處理三維數據作圖表,好比返回的數據就是一個個list,list裏面某幾個數據同屬於一個維度,項目中的實例效果以下:面試
上面的khfx會有多個,好比db一、db二、db3等,下面的那些數據也會變化,目前需求就是作的下面的實現單選,可使用echarts的legend的selectedMode實現,而後上面的db那些就是能夠複選,默認全顯示,選擇以後就取消該條數據顯示。也就是說至關於須要2層圖例組件同時控制下面series的顯示。api
大值考慮的是下面的用legend的圖例,而後上面的圖例就本身手寫,而後經過js方法去實現相似圖例的功能。數組
踩坑記錄:echarts
一、剛開始想的就是經過legend的selected設置爲false來達到效果(以前處理翻頁使用過這種),可是發現不行,設置某一個name爲false,會影響到上面圖例全部的數據,由於series裏的那個name是同樣的,可是這個name又必須和legend裏的一一對應,因此放棄ecmascript
二、考慮先刪除好比db1的數據,因此先定義一個存儲的數組,來存儲刪除的數據,由於點擊series的線消失,再點擊仍是要加進去的,這種實現能夠。可是有個問題,就是當刪除series爲[]一個空數組時,下面的圖仍是會有。在echart的demo裏面試一下,發現series:[],不會畫圖fetch
解決方案:優化
當選中上面圖例時,只把series裏面的對象的data置爲[]空數組,詳情看下面的changeLegrend方法,完美實現效果,代碼還沒優化,碰到相似處理三維圖例的需求時,能夠參考下this
<template>
<div>
<div class="legend_container">
<ul>
<li v-for="item in legendData">
<button class="btn-link btn-legend-item" @click="changeLegrend(item,$event)"><span class="legend-item-bg" :style="'background-color:'+legendColor[item]"></span>{{item}}</button>
</li>
</ul>
</div>
<div id="myLine" :style="{width:'100%',height:'300px'}"></div>
</div>
</template>
<script type="ecmascript-6"> import {getPhyLogiLoadApi} from '@/apis' export default { data(){ return { xData:[], series:[], legendData:[], legendColor:{}, storage:{}, colors:['#5793f3', '#d14a61', '#675bba'] } }, methods:{ drawLine(){ let myLine = this.$echarts.init(document.getElementById('myLine')); let option = { tooltip: { trigger: 'axis' }, legend: { selectedMode:'single' }, grid: { left: '3%', right: '7%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: this.xData, name: '快照時間' } ], yAxis: [ { type: 'value', name: '統計值' } ], series: this.series }; myLine.setOption(option); window.addEventListener("resize", () => { myLine.resize();}); }, fetchData(){ getPhyLogiLoadApi(this.$store.state.inspection.reportInfo.batch_id).then((res) => { if(res.status === 200){ let _dataArray = res.data, len = _dataArray.length; for(let i=0;i<len;i++){ if(!this.legendData.includes(_dataArray[i].instance_name)){ this.legendColor[_dataArray[i].instance_name] = this.colors[this.legendData.length]; this.legendData.push(_dataArray[i].instance_name); } let _obj = { name:_dataArray[i].stat_name, type:'line', smooth:true, dbname:_dataArray[i].instance_name, color:this.legendColor[_dataArray[i].instance_name], data:_dataArray[i].stat_value.split(',') } this.series.push(_obj) } this.xData = _dataArray[0].snap_time.split(',') this.drawLine(); } }) }, changeLegrend(item,e){ let _obj = {}, len = this.series.length, _data = this.series; let thisDom = e.currentTarget; thisDom.classList.toggle('btn-selected'); for(let i = 0; i < len; i++){ if(item === _data[i].dbname){ //若是爲空,說明被選,置爲存儲的數據
if(_data[i].data.length === 0){ _data[i].data = this.storage[item][_data[i].name] }else{ //先存數據,再置爲空
_obj[_data[i].name] = _data[i].data; _data[i].data = [] } } } //存儲數據
this.storage[item] = _obj; this.drawLine(); } }, mounted(){ this.fetchData(); } } </script>
<style scoped lang="stylus" rel="stylesheet"> .legend_container{ text-align center li { list-style none display inline } } .btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover { border-color: transparent; background-color: transparent; box-shadow: none; } .btn-legend-item { color: rgb(72, 72, 72); padding: 0px; } .legend-item-bg { display:inline-block; width: 20px; height: 12px; margin-right: 5px; border-radius: 2px; } .btn-selected{ opacity 0.3 } </style>