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

╰半夏微凉° 2021-07-26 01:08 681阅读 0赞

最近用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，是一个数组的形式

### 方式一：循环遍历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)

### 方式二：循环遍历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)

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

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

### x轴y轴的数据格式化 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

### series的数据格式化 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
效果展示图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/d456e39ca0724ff5a22f4fd85cb3a026.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/ea2180c9e3814af5b4ee8de8998f2808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/bf57be714755401ba2ad561efcfd6cd9.png