vue初步使用echart，实现折线图

最新推荐文章于 2024-10-16 16:06:39 发布

正半轴

最新推荐文章于 2024-10-16 16:06:39 发布

阅读量3.1k

点赞数

分类专栏：服务端开发文章标签： vue javascript 数据可视化

本文链接：https://blog.csdn.net/ex_xyz/article/details/117923161

版权

本文介绍了在Vue项目中如何引入和使用ECharts库创建动态折线图，包括初始化图表、配置基础信息、动态赋值、以及如何实现多折线的堆叠显示。通过设置全局变量保存图表实例，利用watch监听数据变化来更新图表，同时展示了堆叠图的配置方法。

摘要由CSDN通过智能技术生成

前言

前几周到现在琢磨了一下怎么在vue里添加折线图用于显示数据。参考了不少文章终于完成了。

本文主要有以下内容：

如何引入官方库
如何配置图表基础信息用于显示，包括标题，图例，图表大小等
如何添加平均线
如何添加面积显示
如何选择多折现的叠加或者堆砌

echarts引入

echarts是一个基于 JavaScript 的开源可视化图表库，官方提供了丰富的图表种类配合其简单舒适的测试方式，非常利于前端页面使用
链接：echarts官网

参考了官网的：5 分钟上手 ECharts

在vue框架下引入的方法为：

在package.json中的"dependencies"内加入"echarts": "^5.0.1"以引用最新版本的包
在main.js中加入import * as echarts from 'echarts'以全部引用
在vue文件中声明图表， <div id="myChart1" :style="{width: '1000px', height: '500px'}"></div>这种方式可以声明固定的大小配置
在vue文件的js部分准备函数进行图表的初始化

图表的动态显示

初始化

在配置图表前首先应该准备一个初始化函数用于实例化图表，这个实例化的对象应该设置成全局变量，以防止修改图表时进行重复的实例化（如果内容无需修改，那么设置为局部变量也无所谓）

对象的获取(初始化)：

      iniMyChart(){
   
        if (this.myChart != null &&
          this.myChart != "" &&
          this.myChart != undefined) {
   
          //this.MyChart.dispose();//销毁
        }else
          this.myChart = this.$echarts.init(document.getElementById('myChart1'));
        this.myChart.setOption(this.myChartOption);
      },