【Echarts 3.x】填坑记

解决无数据展示问题

let noData = `
`;
noData += `
${this.title}
`;
noData += `
暂无数据
`;
noData += `
`;
echartsBox.innerHTML = noData;
echartsBox.removeAttribute("_echarts_instance_");

效果如下：

优化加载渲染速度

• 及时销毁变量，减少浏览器内存损耗

• 如果是折线图，将series里的showSymbol和showAllSymbol都设置为false

  series:[{
      type: "line",
      lineStyle: {
         width: 1
       },
       smooth: true, // 平滑
       showSymbol: false, // 只有在 tooltip hover 的时候显示
       showAllSymbol: false, //随主轴标签间隔隐藏策略
       symbol: "emptyCircle", // 标记的图形
       symbolSize: 1,
       sampling: "average", //优化图表的绘制效率
       name: legendLabelResStr, //${element.metric.devicename}
       data: metricData,
       markPoint: {
         symbol: "pin", //标记(气泡)的图形
         symbolSize: this.markLabelShow ? 50 : 0, //标记(气泡)的大小
         itemStyle: {
           color: "#dde4ed" //图形的颜色
         },
         label: {
           show: this.markLabelShow,
           color: "#475b68",
           formatter: point => {
             // optionsLine.series[point.seriesIndex].name
             let val = this.yAxisVal(point.value);
             return `${point.name}:${val}`;
           }
         },
         data: [
           { type: "average", name: "avg" },
           { type: "min", name: "min" },
           { type: "max", name: "max" }
         ]
       }
  }]
  
  

• 初始化echarts时，使用变量接收，不要使用vue 中的data 中对象属性接收

  this.chart = echarts.init(document.getElementById("echartsBox"));
  改为
  var chart = "";
  export default {}