Vue集成echarts数据的二次渲染
1.简单的方法,耦合度高
在echarts初始化,设置option之前,从后台拿到数据进行赋值
设置option
按自己需求设置里面的样式,以我自己做的柱状图折线图为例,里面的数据暂时为空,
init () 方法
在此方法中,发送一个请求,拿到后台数据,再进行赋值操作!!!
//x轴数据封装
this.option.xAxis[0].data = convertDate(res.data);
//y轴数据封装,
this.option.series[0].data = convertData(res.data);
this.option.series[1].data = convertData2(res1.data);
之后便是获取图表所在div,调整区域面积,init,setoption
var pmChart = document.getElementById('pmChart');
let fsize = document.body.clientWidth/1920*16;
pmChart.style.height = document.body.clientWidth<=1920? fsize*14+'px':'14rem';
var myChart = this.$echarts.init(pmChart);
myChart.setOption(this.option,true);
window.addEventListener('resize',function () {
myChart.resize();
})
convertData方法,写在tool.js中
function convertData(dbData) {
var result= [];
for (var i=0;i<dbData.length;i++){
result.push(dbData[i].value)
}
return result;
}
function convertDate(dbData) {
var result= [];
for (var i=0;i<dbData.length;i++){
result.push(dbData[i].name)
}
return result;
}
export {convertData,convertDate}
别忘了在图表所在的vue里引入
import {convertData} from '../js/tool'
import {convertDate} from '../js/tool'
##数据渲染成功
2.后面会尝试高级点的写法,先做个记录(手动滑稽)