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

本文介绍了在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,     //深度监听,监听对象内任一属性发生变化
      },
    }

最终效果如下:

图1

此外如果期望使用堆叠图,也就是两组数据的合计将有特殊意义,只需要为option中单条线的属性添加stack,具体操作是为将几组线进行分组合并,为每组线提供一个组名例如:stack: '总量'
但需要注意的是,当采用堆叠图时,上方线所计算平均值将以自身高度所在进行计算。

最终效果如下:

图2.

结语

从我个人角度出发echart官方所提供的图表解决方案非常好的照顾了我自身对这方面的未知,有着丰富的操作指引以及简单的调试方案,并且样式丰富,非常利于进行各种轻量级开发。

比如:折线图样式的可调试示例

(知识点加1)


参考:https://www.cnblogs.com/qdhxhz/p/12600889.html
参考:https://www.cnblogs.com/ludeng-blog/p/12531903.html
参考:https://www.jianshu.com/p/08fefbfc9378
参考:https://blog.youkuaiyun.com/zhang_xiao_xie/article/details/114020691
参考:https://www.cnblogs.com/shiningly/p/9471067.html
参考:https://www.cnblogs.com/feiyangyao/p/12466563.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值