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){      // 调用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>  <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;      // 调用json      await 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;      // 调用json      await 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！

本文链接：https://www.kjpai.cn/news/2024-04-09/155786.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！