echart.js给series,xAxis中的data动态赋值(三种方式)_echart data

最近用echart.js比较多，感觉我的js技能又加深了……

给echart中的x轴或者series动态赋值，是echart的基本操作：

场景：

//引入echart.js   下面的是引入的本地文件
<script src="~/yisha/js/echarts.min.js"></script>
//获取图表的容器：dom 并初始化
var myChart = echarts.init(document.getElementById("skuId"));
//配置项初始化 因为我是在vue中用的，下面的内容是data中的定义，是对象的属性格式：
option: {
   title: {
       text: '交期准时率'
   },
   xAxis: {
       type: 'category',
       boundaryGap: false,
       data: []
   },
   yAxis: {
       type: 'value',
       min: 0,
       max: 100,
       axisLabel: {
           show: true,
           interval: 'auto',
           formatter: '{value}%'
       }
   },
   legend: {
       data: ['交期准时率']
   },
   series: [
       {
           name: '交期准时率',
           type: 'line',
           stack: '总量',
           data: [],
           label: {
               show: true,
               position: "top",
               formatter: function (params) {
                   return params.value + "%"
               }
           },
           lineStyle: {
               color: '#f90',
           }
       }
   ]
},
//处理接口返回的循环数据
假设数据未：res.Data，是一个数组的形式
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

方式一：循环遍历res.Data时给echart动态赋值

for (var i = 0; i < res.Data.length; i++) {
    var item = res.Data[i];
    this.option.xAxis.data.push(item.dateTime);
    this.option.series[0].data.push(item.getYearDatas.AmountMoney);
}
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{
	myChart.setOption(this.option);
},100)
1
2
3
4
5
6
7
8
9
10

方式二：循环遍历res.Data赋值给变量，再赋值给echart

var Xdata = [];
var Sdata = [];
for (var i = 0; i < res.Data.length; i++) {
    var item = res.Data[i];
    Xdata.push(item.dateTime);
    Sdata.push(item.getYearDatas.AmountMoney);
}
this.option.series[0].data = Sdata;
this.option.xAxis.data = Xdata;
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{
	myChart.setOption(this.option);
},100)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方式三：循环res.Data获取到数据后，直接通过option赋值给echart

var Xdata = [];
var Sdata = [];
for (var i = 0; i < res.Data.length; i++) {
    var item = res.Data[i];
    Xdata.push(item.dateTime);
    Sdata.push(item.getYearDatas.AmountMoney);
}
this.option = {
   title: {
       text: '交期准时率'
   },
   xAxis: {
       type: 'category',
       boundaryGap: false,
       data: Xdata
   },
   yAxis: {
       type: 'value',
       min: 0,
       max: 100,
       axisLabel: {
           show: true,
           interval: 'auto',
           formatter: '{value}%'
       }
   },
   legend: {
       data: ['交期准时率']
   },
   series: [
       {
           name: '交期准时率',
           type: 'line',
           stack: '总量',
           data: Sdata,
           label: {
               show: true,
               position: "top",
               formatter: function (params) {
                   return params.value + "%"
               }
           },
           lineStyle: {
               color: '#f90',
           }
       }
   ]
},
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{
	myChart.setOption(this.option);
},100)
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

比较这三种方式，第二种是最好的，但是如果是要对x轴和y轴或series的数据进行处理的话，第三种就是最好的了，因为可以进行格式化：

x轴y轴的数据格式化

series的数据格式化

效果展示图：