需求
在圖表加載的時候,預設隻顯示部分圖例,隻要圖例顯示部分,對應的柱圖或者折線圖也隻顯示對應的。點選一個按鈕顯示剩餘的圖例,或者點選置灰的圖例讓恢複顯示。
核心
在legend裡面的字段加個selected,然後設定不需要顯示的資料标題:
以官方案例為例:
selected: {'郵件營銷': false, '聯盟廣告': false}
使用按鈕切換可以動态改變selected裡面對象的鍵值即可:
this.options.legend.selected = {'郵件營銷': false, '聯盟廣告': false};
效果
- 預設不展示折線
echarts圖例的顯示與隐藏 - 代碼
option = { backgroundColor: '#031A32', tooltip: { trigger: "axis", axisPointer: { type: "shadow", label: { show: true } } }, grid: { left: "4%", top: "18%", right: "5%", bottom: "22%" }, legend: { data: ["昨日總人數", "今日實時人數", "昨日使用率"], top: "4%", textStyle: { color: "#1FC3CE", fontSize: 14 }, selected: {'昨日使用率': false} // 不需要顯示的設定為false }, xAxis: { data: [ "會議室1", "會議室2", "會議室3", "會議室4", "會議室5", "會議室6", "會議室7", "會議室8", "會議室9", "會議室10", "會議室11", "會議室12" ], axisLine: { show: true, //隐藏X軸軸線 lineStyle: { color: "#3d5269", width: 1 } }, axisTick: { show: true, //隐藏X軸刻度 alignWithLabel: true }, axisLabel: { show: true, textStyle: { color: "#396A87", //X軸文字顔色 fontSize: 14 }, interval: 0, rotate: 30 } }, yAxis: [{ type: "value", name: "人數", nameTextStyle: { color: "#396A87", fontSize: 14 }, splitLine: { show: true, lineStyle: { width: 1, color: "#3d5269" } }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { show: true, textStyle: { color: "#396A87", fontSize: 14 } } }, { type: "value", name: "使用率%", nameTextStyle: { color: "#396A87", fontSize: 14 }, position: "right", splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: "#396A87", width: 2 } }, axisLabel: { show: true, formatter: "{value} %", //右側Y軸文字顯示 textStyle: { color: "#396A87", fontSize: 14 } } } ], series: [{ name: "昨日總人數", type: "bar", barWidth: 18, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#00FFFF" }, { offset: 1, color: "#0080FF" } ]) } }, data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97, 24, 34] }, { name: "今日實時人數", type: "bar", barWidth: 18, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#E29052" }, { offset: 1, color: "#FA5A53" } ]) } }, data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46, 75, 85] }, { name: "昨日使用率", type: "line", yAxisIndex: 1, //使用的 y 軸的 index,在單個圖表執行個體中存在多個 y軸的時候有用 showAllSymbol: true, //顯示所有圖形。 symbol: "circle", //标記的圖形為實心圓 symbolSize: 6, //标記的大小 itemStyle: { //折線拐點标志的樣式 color: "#26D9FF", borderColor: "#26D9FF", width: 2, shadowColor: "#26D9FF", shadowBlur: 2 }, lineStyle: { color: "#26D9FF", width: 2, shadowBlur: 2 }, data: [4.2, 3.5, 2.9, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3] } ] }
- 點選顯示效果
echarts圖例的顯示與隐藏 - 也可以動态改變selected的值