vue中使用echarts，导入JSON数据画图

1、将.json文件放置在与index.html同一目录下

2、编写vue界面，在script中加载json文件

3、在script中加载处理json数据

4、用处理后的数据画图

vue界面代码如下：

<script>
import * as echarts from "echarts"  //引入echarts核心模块export default {mounted () {this.fetchDataFromLocalFile();},methods: {fetchDataFromLocalFile () {fetch('./data.json')  //data.json需要放在与index.html（/public）放在同一目录下.then(response=>response.json()).then(data=>{const consumptionData = data[0].data.sort((a, b) => a.finalTotalAmount - b.finalTotalAmount).slice(0, 5)     .map(item => ({  //对数组中的每个 item 执行一个函数。这个函数返回一个新的对象，该对象包含两个属性：province: item.provinceName, // 提取省份名称amount: item.finalTotalAmount // 提取消费金额}))console.log(consumptionData) // 在控制台打印处理后的消费数据var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据const option = {title: {text: '2020年消费额最低的5个省份',left: 'center'},xAxis: {type: 'category',data: consumptionData.map(item => item.province) // 设置x轴的数据为省份名称},yAxis: {type: 'value',axisLabel: {fontSize: 8 // 设置y轴标签的字号大小为8px}},series: [{data: consumptionData.map(item => item.amount), // 设置柱状图的数据为消费金额type: 'bar', // 设置图表类型为柱状图label: {show: true, // 显示标签position: 'top' // 标签显示在柱状图的顶部}},{data: consumptionData.map(item => item.amount), // 设置柱状图的数据为消费金额type: 'line', // 设置图表类型为柱状图label: {show: true, // 显示标签position: 'top' // 标签显示在柱状图的顶部}}]};myChart.setOption(option);// 将图表的配置应用到图表上})}},}
</script><template><div id="main" style="width: 1000px;height: 400px;"></div>
</template>

data数据为：

[{"msg": "操作成功","code": 200,"data": [{"outTradeNo": "762726941436512","finalTotalAmount": 784432.0,"provinceName": "广东","regionName": "华东","userName": "西门清","id": 78444},{"outTradeNo": "122515318746846","finalTotalAmount": 207260.0,"provinceName": "贵州","regionName": "滕成","userName": "滕成","id": 78445},{"outTradeNo": "189377665987296","finalTotalAmount": 240486.0,"provinceName": "澳门","regionName": "西南","userName": "尉迟莉","id": 78446},{"outTradeNo": "727564233416679","finalTotalAmount": 62997.0,"provinceName": "山东","regionName": "华东","userName": "庞茂","id": 78447},{"outTradeNo": "712939938964818","finalTotalAmount": 509385.0,"provinceName": "湖北","regionName": "华中","userName": "司马言若","id": 78448},{"outTradeNo": "366811414371877","finalTotalAmount": 40392.0,"provinceName": "吉林","regionName": "华中","userName": "卫娅琦","id": 78449},{"outTradeNo": "625397617582265","finalTotalAmount": 333611.0,"provinceName": "云南","regionName": "东北","userName": "司马真","id": 78450},{"outTradeNo": "245924562386116","finalTotalAmount": 273301.0,"provinceName": "新疆","regionName": "华南","userName": "朱贵","id": 78451},{"outTradeNo": "5621398864121127","finalTotalAmount": 147177.0,"provinceName": "西北","regionName": "西南","userName": "宇文娅","id": 78452},{"outTradeNo": "346272442916713","finalTotalAmount": 197594.0,"provinceName": "重庆","regionName": "西北","userName": "岑清飞","id": 78453},{"outTradeNo": "583479347648972","finalTotalAmount": 60418.0,"provinceName": "湖南","regionName": "重庆","userName": "广东","id": 78454}]}
]