使用ECharts时,遇到新增元素需要实时添加到图表中的解决办法_echart柱状图动态增加数据

在使用EChart时,常见的饼状图和柱状图,data不可能是固定的,有交互需求时很多小伙伴都不知道如何导入,封装函数-一键调用 3行代码解决数据传输需求,

首先封装一个函数,以arr为例,需要注意的是,封装完成后 需要调用,不要忘记了哦.任何事件都需要调用重新渲染哦.

function Arr(){ 
   //创建一个新的空数组
     let uname = [];
   
    //循环需要传输的数据,以tr为例 新增的tr里面包含 姓名 薪资 评分 三个实时新增的数据
    for (let i = 0; i < 'tbody>tr'.length; i++) {
    //找到当前tr的数据
    uname.push($('tbody>tr').eq(i).children('td').eq(0).text())
    Scores.push($('tbody>tr').eq(i).children('td').eq(0).text())
      Money.push($('tbody>tr').eq(i).children('td').eq(0).text())
    }
    // option为Echarts里面图表的option 可以自己更改,我这个是柱状图和条形图的X轴和series 取里面的data 并赋值
    option.xAxis.data = uname
    option.series.data = Scores
    option1.xAxis.data = uname
    option1.series.data = Money
 
   // 每次调用都需要重新渲染一次  也是Echarts里面的属性,和上方option一致 不懂可以去直接抄
    option && my.setOption(option);
    myChart.setOption(option1);
  };