vue引入echarts并动态渲染

vue引入echarts并完成动态渲染

只需以下几步就可以在vue项目中完成echarts的渲染。

1.引入

安装echarts运行依赖，并引入项目。

import echarts from 'echarts'

2.创建一个echarts的盒子容器

<div id="lineChart" style='width:100%;height: 75vh'></div>

注意长宽的定义，为了后续完成响应式自适应窗口大小（下一篇文章会讲到）。

3.准备数据和参数配置项

export default {
  data(){
    return{
        //定义全局chart名称
        myChart:'',
        //准备数据和配置项
        option:{
          title: {
            text: '历史数据曲图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['瞬时流量(m3/h)','瞬时热量(kW)','供水温度(℃)','回水温度(℃)'],
            textStyle:{
              fontSize:18
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            itemSize:22,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'瞬时流量(m3/h)',
              type:'line',
              smooth:0.1,
              data:[]
            },
            {
              name:'瞬时热量(kW)',
              type:'line',
              smooth:0.1,
              data:[]
            },
            {
              name:'供水温度(℃)',
              type:'line',
              smooth:0.1,
              data:[]
            },
            {
              name:'回水温度(℃)',
              type:'line',
              smooth:0.1,
              data:[]
            },
          ]
        },
      }
    }
  }

4.初始化echarts实例并根据this.option的数据绘制图表

methods:{
    //将数据渲染到表格
      init(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('lineChart'))
        // 根据this.option的数据绘制图表
        this.myChart.setOption(this.option,true)
      },
}

5.在mounted中执行上述渲染方法

注意是在mounted中而不是在created中

mounted () {
      //执行渲染chart程序
      this.init()
    },

6.监听数据变化

在完成上述操作后，如果option.series.data的数组中有数据，那么此时就能渲染上去了，但是不能动态改变。这就需要用到watch监听数据变化。

    watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal); 
            }
          } else {
            this.init();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
    }

7.数据源

完成上述操作后，就只差数据源了。绑定数据源的方式有很多,但最后都是为了给data赋值。一般都是将原始数据进行处理后再进行赋值。

parseData(){
    //将处理完的数据赋值给option
    this.option.xAxis.data=this.httpReturnData.TimeData
    this.option.series[0].data=this.httpReturnData.iCData
    this.option.series[1].data=this.httpReturnData.iFData
    this.option.series[2].data=this.httpReturnData.T1Data
    this.option.series[3].data=this.httpReturnData.T2Data
}

最后再添个按钮或者时间选择器调用parseData就完成了。

第一次在vue项目中引入echarts，虽然几经波折弄了出来，但肯定还有更好的方法。在此做一下笔记，以供日后参考，希望这篇文章也能帮到大家，如果各位发现文章的不足之处请多多指正，提出自己的宝贵意见。