Vue3 Element-UI中使用ECharts（前端数据展示开发）

• 前端数据展示（数据可视化、数据大屏等）可使用的工具比较多，很多第三方都提供了在线平台，比如阿里云，只需数据接口，在线配置一下界面即可使用。1. 阿里云的使用：利用阿里云物联网平台（IoT）实现WEB数据可视化2. 第三方平台对比：有哪些免费简单的数据展示（数据可视化）网站
• 也可以使用开源代码自己开发前端，本文所介绍的就是ECharts的开发，这是一款基于JavaScript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。1. 官方网站：https://echarts.apache.org/zh/index.html2. 官方示例：https://echarts.apache.org/examples/zh/index.html3. 官方指南：https://echarts.apache.org/handbook/zh/get-started/

注意，本文是在Vue3版本下的Element-UI中使用，ECharts官网打开较慢，可尝试翻越。

安装

npm install echarts --save

调用

创建一个

*.vue

页面，实现方法如下三种。

1. 本页数据

修改官方代码：https://echarts.apache.org/handbook/zh/basics/import

<template><divid="main"style="width: 600px;height:400px;"></div></template><scriptsetup>import*as echarts from'echarts'</script><script>exportdefault{data(){return{}},created(){},// DOM 渲染完成触发mounted(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 绘制图表
    myChart.setOption({title:{text:'ECharts 入门示例'},tooltip:{},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]});}}</script>

2. 调用数据

修改官方的线性图示例图代码，修改为线性和柱状混合展示图
https://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter&lang=js

另需准备一个json文件，下载自官网：https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json
本例中将文件放于根目录，本例中路径为：

http://localhost/life-expectancy-table.json

<template><divid="main"style="width: 600px;height:400px;"></div></template><scriptsetup>import*as echarts from'echarts'import axios from'axios'import{ nextTick }from'vue'</script><script>exportdefault{data(){return{}},created(){},// DOM 渲染完成触发mounted(){// 数据来源，注意自行修改var url ='http://localhost/life-expectancy-table.json';// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 每隔三秒发起请求，获取数据并绘制图表nextTick(()=>{setInterval(()=>{// 执行this.run(url, myChart);},3000)})},methods:{// 执行run(url, obj){// 调用json
      axios.get(url).then(res=>{let option ={dataset:[{id:'dataset_raw',source: res.data
            },{id:'dataset_since_1950_of_germany',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'Germany'}]}}},{id:'dataset_since_1950_of_france',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'France'}]}}}],title:{text:'Income of Germany and France since 1950'},tooltip:{trigger:'axis'},xAxis:{type:'category',nameLocation:'middle'},yAxis:{name:'Income'},series:[{type:'line',datasetId:'dataset_since_1950_of_germany',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}},{type:'bar',datasetId:'dataset_since_1950_of_france',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}}]};
        
        obj.setOption(option);})}}}</script>

展示图

• 可以顺便学习一下vue3中 nextTick 的具体用法。

3. 异步调用

还是上面的例子（实现略有不同），

setInterval()

中原有的

run()

函数改为了

getOpt()

函数，主要用来学习

axios

如何返回值~~
学习：获取axios的return值

<template><divid="main"style="width: 600px;height:400px;"></div></template><scriptsetup>import*as echarts from'echarts'import axios from'axios'import{ nextTick }from'vue'</script><script>exportdefault{data(){return{}},created(){},// DOM 渲染完成触发mounted(){// 数据来源，注意自行修改var url ='http://localhost/life-expectancy-table.json';// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 每隔三秒发起请求，获取数据并绘制图表nextTick(()=>{setInterval(()=>{// 与上面不同的实现方式this.getOpt(url).then(opt=>{
          myChart.setOption(opt);});},3000)})},methods:{// 获取asyncgetOpt(url){let option;// 调用jsonawait axios.get(url).then(res=>{
        option ={dataset:[{id:'dataset_raw',source: res.data
            },{id:'dataset_since_1950_of_germany',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'Germany'}]}}},{id:'dataset_since_1950_of_france',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'France'}]}}}],title:{text:'Income of Germany and France since 1950'},tooltip:{trigger:'axis'},xAxis:{type:'category',nameLocation:'middle'},yAxis:{name:'Income'},series:[{type:'line',datasetId:'dataset_since_1950_of_germany',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}},{type:'bar',datasetId:'dataset_since_1950_of_france',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}}]};})return option;}}}</script>

4. 多表同时

结合两种不同的图标放在一个页面，其中新增一种表为：
https://echarts.apache.org/examples/zh/editor.html?c=gauge-ring

<template><divid="main"style="width: 600px;height:400px;float:left"></div><divid="sub"style="width: 600px;height:400px;float:left;"></div></template><scriptsetup>import*as echarts from'echarts'import axios from'axios'import{ nextTick }from'vue'</script><script>exportdefault{data(){return{}},created(){},// DOM 渲染完成触发mounted(){// 数据来源，注意自行修改var url ='http://localhost/life-expectancy-table.json';// 基于准备好的dom，初始化echarts实例var myMain = echarts.init(document.getElementById('main'))var mySub = echarts.init(document.getElementById('sub'))var option;const gaugeData =[{value:20,name:'Perfect',title:{offsetCenter:['0%','-30%']},detail:{valueAnimation:true,offsetCenter:['0%','-20%']}},{value:40,name:'Good',title:{offsetCenter:['0%','0%']},detail:{valueAnimation:true,offsetCenter:['0%','10%']}},{value:60,name:'Commonly',title:{offsetCenter:['0%','30%']},detail:{valueAnimation:true,offsetCenter:['0%','40%']}}];
    option ={series:[{type:'gauge',startAngle:90,endAngle:-270,pointer:{show:false},progress:{show:true,overlap:false,roundCap:true,clip:false,itemStyle:{borderWidth:1,borderColor:'#464646'}},axisLine:{lineStyle:{width:40}},splitLine:{show:false,distance:0,length:10},axisTick:{show:false},axisLabel:{show:false,distance:50},data: gaugeData,title:{fontSize:14},detail:{width:50,height:14,fontSize:14,color:'inherit',borderColor:'inherit',borderRadius:20,borderWidth:1,formatter:'{value}%'}}]};// 每隔三秒发起请求，获取数据并绘制图表nextTick(()=>{setInterval(()=>{// main部分this.getOptMain(url).then(opt=>{
          myMain.setOption(opt);});// sub部分
        gaugeData[0].value =+(Math.random()*100).toFixed(2);
        gaugeData[1].value =+(Math.random()*100).toFixed(2);
        gaugeData[2].value =+(Math.random()*100).toFixed(2);
        mySub.setOption({series:[{data: gaugeData,pointer:{show:false}}]});},3000)})
    
    option && mySub.setOption(option);},methods:{// 获取asyncgetOptMain(url){let option;// 调用jsonawait axios.get(url).then(res=>{
        option ={dataset:[{id:'dataset_raw',source: res.data
            },{id:'dataset_since_1950_of_germany',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'Germany'}]}}},{id:'dataset_since_1950_of_france',fromDatasetId:'dataset_raw',transform:{type:'filter',config:{and:[{dimension:'Year',gte:1950},{dimension:'Country','=':'France'}]}}}],title:{text:'Income of Germany and France since 1950'},tooltip:{trigger:'axis'},xAxis:{type:'category',nameLocation:'middle'},yAxis:{name:'Income'},series:[{type:'line',datasetId:'dataset_since_1950_of_germany',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}},{type:'bar',datasetId:'dataset_since_1950_of_france',showSymbol:false,encode:{x:'Year',y:'Income',itemName:'Year',tooltip:['Income']}}]};})return option;}}}</script>

参考：
Vue Element UI 之ECharts图表
Echarts 在vue3x中使用（包括动态数据变化）
优化了三年经验者的Echarts卡顿
关于vue+elementui 访问本地json和跨域访问API问题
Vue3+ElementPlus+Axios实现从后端请求数据并渲染
Vue3中的Methods用法介绍
Vue3中你应该知道的setup！