vue中写ECharts的小细节

数据重叠显示

原因：series中的stack都写为总量
解决方法：去掉任意一个即可

 series: [
        {
          name: "冷负荷(kW)",
          type: "line",
          stack: "总量",
          data: [, 0, 0, 0, 0, 1200, 1000, 4000, 3000, 4000, 2000, 4500, 3600, 4200, 3600, 2700,1000, 0,0,0,],
        },
        {
          name: "热负荷(kW)",
          type: "line",
          // stack: "总量",
          data: [1000,1800, 3000, 1600, 1400, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2500,3000,1500,],
        },
      ],

在tabs不是第一栏中图像（设置是为100%）显示宽度为100px

解决方法：

 // 图形容器设置如下
 <div id="charts-a" :style="[{width: chartWidth} ,{height: '500px'}]" ></div>
 // 在js中加入
 export default {
	data() {
	    return {
	      chartWidth: window.innerWidth （+ - * / 都行） + 'px' ; //获取当前可视窗口宽度赋值给图形
	    }
	}
}      

在 对话框（el-dialog）中写 echarts(解决不显示的问题)

<template>
    <el-dialog  @open="open()" ></el-dialog>
</template>
<script>
	export default {
   		 methods: {
    		open() {
     			 this.$nextTick(() => {
			     this.mapEchartsInit(); //要调用的方法
     		 });
   		 },
	}
</script>

自适应拉伸宽度

methods：{
	  var chartsEnergy = echarts.init(document.getElementById("chartsEnergy"));
      chartsEnergy.setOption({}）
      // 设置echarts根据窗口自适应宽度
      window.addEventListener("resize", () => {
        chartsEnergy.resize();
      });
}

 // tabs  is 事件 （解决echarts不出现问题）
 // 方法一
    isComponent() {
      return this.componentsList[this.activeName];
    },
  // 方法二
 <el-tab-pane :label="$t('home.daily')"  name="dailyPaper">
       <dailyPaper ref="day" v-if="activeName == 'dailyPaper'"></dailyPaper>
      </el-tab-pane>