文章目錄

• • • 解決無數據展示問題
    • 優化加載渲染速度

解決無數據展示問題

let noData = `<div style="min-height:100%;">`; noData += `<p style="text-align: center;font-size: 15px;padding-top: 10px;font-weight: 600;">${this.title}</p>`; noData += `<div style="text-align: center;">暫無數據</div>`; noData += `</div>`; 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].namelet 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 {}

總結

以上是生活随笔為你收集整理的【Echarts 3.x】填坑记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。