在使用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);
};