vue里面动态更新echarts数据

/先占坑，有机会在填/
前几天项目上用个功能，要用图表来动态显示传入的数据，看到这个需要一下子就想到了echarts,
于是开始鼓捣起来。
由于是第一次使用echarts，只能把文档里面的demo在vue里面展示出来不知道怎么往图表里面动态传数据，百度之后发现基本全是写的死数据，自己折腾了半天终于搞起来了，下面上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
initCharts() {
  this.echartData = this.historyTempData; //从后端获取的获取
  if (this.chart) {
    this.chart.clear();
  } else {
    this.chart = echarts.init(document.getElementById('temperChart'));
  }
  let tZeroData;
  let tOneData;
  let bedData;
  let chamberData;
  if (this.echartData.t0) {
    tZeroData = this.echartData.t0.map((val) => [val.time, val.current, val.machine_id]);
  } else {
    tZeroData = [];
  }
  console.log(tZeroData);
  if (this.echartData.t1) {
    tOneData = this.echartData.t1.map((val) => [val.time, val.current, val.machine_id]);
  } else {
    tOneData = [];
  }
  if (this.echartData.bed) {
    bedData = this.echartData.bed.map((val) => [val.time, val.current, val.machine_id]);
  } else {
    bedData = [];
  }
  if (this.echartData.chamber) {
    chamberData = this.echartData.chamber.map((val) => [val.time, val.current, val.machine_id]);
  } else {
    chamberData = [];
  }
  const colors = ['#e60012', '#00b7ee', '#80c269', '#fff100'];
  this.chart.setOption({
    color: colors,
    legend: {
      left: 'center',
      data: ['喷头一', '喷头二', '腔体', '底板']
    },
    toolbox: {
      feature: {
        saveAsImage: {},
        dataView: {
          optionToContent: function(opt) {
            const axisData = opt.series;
            const series = opt.series;
            let table = '<table border="1px" style="width:100%;text-align:center;font-size:15px;border-collapse:collapse"><tbody><tr>' +
                        '<td style="width:20%">时间</td>' +
                        '<td style="width:20%">' + series[0].name + '</td>' +
                        '<td style="width:20%">' + series[1].name + '</td>' +
                        '<td style="width:20%">' + series[2].name + '</td>' +
                        '<td style="width:20%">' + series[3].name + '</td>' +
                        '</tr>';
            for (let i = 0, l = axisData[0].data.length; i < l; i++) {
              table += '<tr>' +
                        '<td>' + axisData[0].data[i][0] + '</td>' +
                        '<td>' + axisData[0].data[i][1] + '度</td>' +
                        '<td>' + axisData[1].data[i][1] + '度</td>' +
                        '<td>' + axisData[2].data[i][1] + '度</td>' +
                        '<td>' + axisData[3].data[i][1] + '度</td>' +
                        '</tr>';
            }
            table += '</tbody></table>';
            return table;
          } //数据视图时的格式
        },
        restore: {}
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: function(param) {
        return `${param[0].seriesName}: ${param[0].data[0]}, ${Number(param[0].data[1]).toFixed(2)}度`;
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'time',
      name: '时间',
      splitLine: {
        show: false
      },
      data: []
    },
    yAxis: {
      type: 'value',
      name: '温度',
      max: function (val) {
        return val.max + 50;
      },
      boundaryGap: [0, '100%'],
      axisLabel: {
        formatter: (value, index) => parseInt(value).toFixed(2)
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '喷头一',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: tZeroData
      },
      {
        name: '喷头二',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: tOneData
      },
      {
        name: '腔体',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: chamberData
      },
      {
        name: '底板',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: bedData
      }
    ]
  });
}
vue.js
#vue.js
vue里面动态更新echarts数据
https://xypecho.github.io/2018/03/28/vue里面动态更新echarts数据/
作者
很青的青蛙
发布于
2018年3月28日
许可协议