关于vue2中echarts的一些响应式及组件化渲染记录

组件化后多个resize只有最后一个生效解决方法

main.js中全局挂载方法

Vue.prototype.$echartsResize = function (ref){
  window.addEventListener("resize",function (){
    ref.resize()
  })
}

echarts组件中使用该方法

 this.$echartsResize(this.myChart)

获取接口数据后组件传参组件渲染

父组件中获取接口数据并传递给组件后在组件中监听渲染
这里需注意组件中的深度监听及图表重新渲染覆盖会导致部分样式丢失问题，样式需在传递的参数中具有相关设置

//父组件中
//div部分
 <line-basic :line-date="harvestingEfficiencyForPeople"/>

//data中声明部分
harvestingEfficiencyForPeople:{
        title: {
          text: '人员对不同系列数据分析',
          left:'center'
        },
        tooltip: {
          trigger: 'axis',
          showContent: true
        },
        legend:{
          top: "25",
          right:'center'
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["张文", "李晗", '萧左', "吴志成", "陈令申"]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: [{
          name: '单位'
        }],
        color: ['#3366CC', '#FFCC99','#99CC33','#f17b58','#eac324','#bf92f5','#7cfae5'],
        series: [
          {
            type: 'line',
            name: '系列1',
            data: [47, 84, 53, 86, 79],
            markPoint: {
              data: [
                {type: 'max', name: 'Max'}
              ]
            },
            areaStyle: {//区域样式
              origin: "start",//向最小值方向渐变，y轴有负值要写
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#3366CC90',
                },
                {
                  offset: 1,
                  color: "#3366CC10",
                },
              ]),
            },
          },
          {
            type: 'line',
            name: '系列2',
            data: [65, 64, 73, 81, 89],
            markPoint: {
              data: [
                {type: 'max', name: 'Max'}
              ]
            },
            areaStyle: {//区域样式
              origin: "start",//向最小值方向渐变，y轴有负值要写
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFCC9990',
                },
                {
                  offset: 1,
                  color: "#FFCC9910",
                },
              ]),
            },
          }
        ]
      },

//接口方法中赋值
    getHarvestingEfficiencyForPeople(){
      efficiency().then(res=>{
        let color =['#3366CC', '#FFCC99','#99CC33','#f17b58','#eac324','#bf92f5','#7cfae5']
        let data = res.data.data
        this.harvestingEfficiencyForPeople.legend.data = data.legend.data
        // this.harvestingEfficiencyForPeople.title.text = data.title.text
        this.harvestingEfficiencyForPeople.xAxis.data = data.xAxis[0].data
        this.harvestingEfficiencyForPeople.series = []
        for(let i = 0;i<data.series.length;i++){
          this.harvestingEfficiencyForPeople.series.push({
            data: data.series[i].data,
            name: data.series[i].name,
            type: 'line',
            smooth: true,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'}
              ]
            },
            areaStyle: {//区域样式
              origin: "start",//向最小值方向渐变，y轴有负值要写
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color:color[i]+'90',
                },
                {
                  offset: 1,
                  color: color[i]+'00',
                },
              ]),
            },
          })
        }
      })
    }


//图表组件中监听相关参数
watch:{
      lineDate:{
        deep:true,//object类型内部变化需要设置深度监听
        handler:function (newVal,oldVal){
          this.myChart.setOption(this.lineDate,true)//设置true值为覆盖式重新渲染，静态数据或历史数据会直接清空，包括样式，因此传递的相关参数不能只包含数据，需和样式一块传递
        }
      }
    }