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

前端数据展示（数据可视化、数据大屏等）可使用的工具比较多，很多第三方都提供了在线平台，比如阿里云，只需数据接口，在线配置一下界面即可使用。

阿里云的使用：利用阿里云物联网平台（IoT）实现WEB数据可视化
第三方平台对比：有哪些免费简单的数据展示（数据可视化）网站

也可以使用开源代码自己开发前端，本文所介绍的就是ECharts的开发，这是一款基于JavaScript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官方网站：https://echarts.apache.org/zh/index.html
官方示例：https://echarts.apache.org/examples/zh/index.html
官方指南：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><div id="main" style="width: 600px;height:400px;"></div>
</template><script setup>
import * as echarts from 'echarts'
</script><script>
export default {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><div id="main" style="width: 600px;height:400px;"></div>
</template><script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script><script>
export default {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){// 调用jsonaxios.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><div id="main" style="width: 600px;height:400px;"></div>
</template><script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script><script>
export default {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: {// 获取async getOpt (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><div id="main" style="width: 600px;height:400px;float:left"></div><div id="sub" style="width: 600px;height:400px;float:left;"></div>
</template><script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script><script>
export default {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: {// 获取async getOptMain (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！

在这里插入图片描述