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

最新推荐文章于 2025-06-18 18:12:47 发布

正半轴

最新推荐文章于 2025-06-18 18:12:47 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/ex_xyz/article/details/117923161

服务端开发专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前几周到现在琢磨了一下怎么在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);
      },

在上方这个函数中，用于存储图表信息的媒介为全局变量：myChartOption

基础信息

在一般的开发过程中会在这个变量声明的时候准备好图表所需的基础信息而将x轴和y轴的信息留空，用于动态的进行赋值，从而保持灵活性。

Option：

		myChartOption : {		
          title: {
            text: 'XX统计',
            textStyle:{				    //---主标题内容样式
              color:'#000'				//主标题文字颜色
            },
            padding:[5,0,0,100]			//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
          },
          legend: {						//图例
            data: ['AA统计（单位：次）','BB统计（单位：次）']
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []					//x轴数组
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name:'AA统计（单位：次）',
            data: [],
            type: 'line',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            },
            areaStyle: {},        //折线面积图
            smooth: true,         //平滑曲线
            markLine : {          //平均线
              data : [
                {type : 'average'}
              ]
            }
          }, {
            name:'BB统计（单位：次）',
            data: [],
            type: 'line',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            },
            areaStyle: {},        //折线面积图
            smooth: true,         //平滑曲线
            markLine : {          //平均线
              data : [
                {type : 'average'}
              ]
            }
          }]
        },

动态赋值

在上方的option中，配置了除了x轴和y周的信息，因为通常除数据信息外其他部分是通用固定的，那么对于数据信息需要准备一个函数用于赋值，准备一个监视用于更新。

赋值：

	setMyChart(xAx,yAy,yAy2){
        if (this.myChart != null &&
          this.myChart != "" &&
          this.myChart != undefined) {
        }else
          this.myChart = this.$echarts.init(document.getElementById('myChart1'));

		//用于演示
		//xAx = ["5-1","5-2","5-3","5-4","5-5","5-6","5-7","5-8"];	
		//yAy = [9,8,1,3,5,4,7,6];
		//yAy2 = [5,7,8,1,5,0,6,7];


		this.myChartOption.xAxis.data = xAx;
		this.myChartOption.series[0].data = yAy;
		this.myChartOption.series[1].data = yAy2;
	},

监视(监听)

准备一个watch用于监听属性的变化

	watch: {
      myChartOption: {
        handler(newOption, oldOption) {
          if(this.myChart){
            if(newOption)
              this.myChart.setOption(newOption);
            else
              this.myChart.setOption(oldOption);
          }else {
            //
          }
        },
        immediate: true,//首次绑定就执行
        deep: true,     //深度监听，监听对象内任一属性发生变化
      },
    }