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.后面会尝试高级点的写法，先做个记录（手动滑稽）