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

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

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

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

4、用处理后的数据画图

vue界面代码如下:

html 复制代码
<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数据为:

python 复制代码
[
  {
    "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
      }
    ]
  }
]
相关推荐
某公司摸鱼前端7 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~9 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程14 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏16 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
测试杂货铺2 小时前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron