echarts后端获取数据后怎么填充到图表里？

Question

比如series有3个对象，里面每个都有data，后台请求数据后，只能通过setOptions的方法设置数据吗？另外顺序呢？只能根据之前写好的顺序填充吗？

Answer 1

在重新setOption一下，就能设置新数据。
另外顺序根据series自行调整就可以吧，就是设置data字段时分开赋值。

this.chart.setOption({series: [
    {
      name: '数据1',
      type: 'line',
      stack: 'Total',
      data: data1 // 接口数据1
    },
    {
      name: '数据2',
      type: 'line',
      stack: 'Total',
      data: data2  // 接口数据2
    },
    {
      name: '数据3',
      type: 'line',
      stack: 'Total',
      data:  data3  // 接口数据3
    }
  ]})

Answer 2

只能用 setOptions 这个API，因为要重新渲染。
“顺序” 我没理解，具体指的是什么？

Answer 3

设置的时候你可以做一下排序

let chart = echarts.init(document.getElementById('main'));


let option = {
    series: [
        {name: '系列1', type: 'line', data: []},
        {name: '系列2', type: 'line', data: []},
        {name: '系列3', type: 'line', data: []}
    ]
};

// 设置初始选项
chart.setOption(option);


let backendData = [
    {name: '系列1', data: [120, 132, 101, 134, 90, 230, 210]},
    {name: '系列2', data: [220, 182, 191, 234, 290, 330, 310]},
    {name: '系列3', data: [150, 232, 201, 154, 190, 330, 410]}
];


backendData.forEach((item) => {
    let seriesItem = option.series.find(s => s.name === item.name);
    if (seriesItem) {
        seriesItem.data = item.data;
    }
});


chart.setOption(option);