手動實現legend 與 echarts圖交互通過js事件實現圖標某項的高亮顯示與隱藏

通過html實現legend的樣式提供調用echarts的api實現與echarts圖表交互的效果

實現餅圖element實現類似于legend與echartstu表交互效果

效果圖

在這里插入圖片描述

配置代碼

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in dataList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"@click="handleClick(item)"><i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{dataList: [{ value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },{ value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },{ value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},series: [{name: 'Access From',type: 'pie',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},data: this.dataList}]}}},methods: {handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},handleClick(item){item.isShow = !item.isShowthis.$refs.chart.dispatchAction({type: 'legendToggleSelect',name: item.name,// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})}}}
</script><style lang="scss" scoped></style>

通過js實現柱形圖同一組數據時隱藏某一個柱子

效果圖

在這里插入圖片描述

配置代碼

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in dataList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@click="handleClick(item)"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"><i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{dataList: [{ value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },{ value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },{ value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},xAxis: {type: 'category',data: this.computedSeriesData.map(item => item.name)},yAxis: {type: 'value'},series: [{name: 'Access From',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},data: this.computedSeriesData}]}},computedSeriesData() {return this.dataList.filter(item => item.isShow)}},methods: {handleClick(item){item.isShow = !item.isShow},handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},}}
</script><style lang="scss" scoped></style>

通過js實現柱形圖一組數據的顯示隱藏達到legend的效果

效果圖

在這里插入圖片描述

配置代碼

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in legendList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@click="handleClick(item)"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"><i :style="{'background-color': item.isShow ? item.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{legendList: [{ name: '測試1', isShow: true, color: '#00BFFF' },{ name: '測試2', isShow: true, color: '#FFD700'},],dataList1: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct'},{ value: 580, name: 'Email'},],dataList2: [{ value: 800, name: 'Search Engine' },{ value: 335, name: 'Direct'},{ value: 1580, name: 'Email'},]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},xAxis: {type: 'category',data: this.dataList1.map(item => item.name)},yAxis: {type: 'value'},series: [{name: '測試1',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},itemStyle:{color: '#00BFFF'},data: this.dataList1},{name: '測試2',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},itemStyle:{color: '#FFD700'},data: this.dataList2}]}},},methods: {handleClick(item){item.isShow = !item.isShowthis.$refs.chart.dispatchAction({type: 'legendToggleSelect',// 圖例名稱name: item.name,// // 下列參數自 v5.6.0 起開始支持// // 圖例組件ID// legendId: string,// // 圖例組件索引// legendIndex: number,// // 圖例組件名稱// legendName: string})},handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',seriesName: item.name// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',seriesName: item.name// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 來指定系列。// // 可以使用數組指定多個系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項// dataIndex?: number | number[],// // 可選，數據項名稱，在有 dataIndex 的時候忽略// name?: string | string[],})},}}
</script><style lang="scss" scoped></style>