当前浏览器不支持canvas，请更换浏览器后再试

echarts重写图例点击事件 

1 <div class="acountEchart">
2           <!-- 图例tab -->
3           <ul class="tabWrap">
4             <li v-for="(item, index) in legendList" :key="index" :class="!item.active ? 'noBgcolor' : ''" @click="tabCilck(item)">{{ item.tab }}</li>
5           </ul>
6           <v-chart ref="myChart" :options="option" :autoresize="true" />
7         </div>
 1  .acountEchart {
 2       margin-top: 28px;
 3       width: 100%;
 4       height: 252px;
 5       position: relative;
 6       .echarts {
 7         width: 100%;
 8         height: 100%;
 9       }
10     }
11 .tabWrap{
12   display:flex;
13   justify-content: space-between;
14   align-items: center;
15   position: absolute;
16   top:-10px;
17   left: 50%;
18   transform: translateX(-50%);
19   width: 90%;
20   z-index:999;
21   li{
22     width: 22%;
23     padding: 5px 0;
24     text-align: center;
25     font-family: Source Han Sans CN;
26     font-weight: 400;
27     line-height: 16px;
28     color: #fff;
29     background:#4DB9FF;
30     border-radius:4px;
31     cursor: pointer;
32     &.noBgcolor{
33       background:#ddd;
34       color: #000;
35     }
36   }
37 }
  1   option: {
  2         color: ['#5A8EF9', '#5AD7A6', '#F6BD16', '#E7674A'],
  3         tooltip: {
  4           trigger: 'axis',
  5           axisPointer: {
  6             type: 'cross',
  7             label: {
  8               backgroundColor: '#6a7985'
  9             }
 10           }
 11         },
 12         legend: {
 13           show: false,
 14           icon: 'none',
 15           itemGap: 0,
 16           data: ['用水总量', '取水许可', '取水计划', '监测水量'],
 17           textStyle: {
 18             fontSize: 12,
 19             color: '#fff',
 20             backgroundColor: '#5A8EF9',
 21             borderRadius: 4,
 22             padding: 5
 23           }
 24         },
 25         grid: {
 26           left: '3%',
 27           right: '4%',
 28           bottom: '3%',
 29           containLabel: true
 30         },
 31         xAxis: [
 32           {
 33             type: 'category',
 34             boundaryGap: false,
 35             data: ['2019', '2020', '2021', '2022', '2023']
 36           }
 37         ],
 38         yAxis: [
 39           {
 40             type: 'value',
 41             name: '(mm³)',
 42             axisLine: {
 43               show: false
 44             },
 45             axisTick: { show: false } // 是否展示y轴坐标刻度
 46           }
 47         ],
 48         series: [
 49           {
 50             name: '用水总量',
 51             type: 'line',
 52             stack: 'Total',
 53             areaStyle: {},
 54             emphasis: {
 55               focus: 'series'
 56             },
 57             data: [120, 132, 101, 134, 90, 230, 210]
 58           },
 59           {
 60             name: '取水许可',
 61             type: 'line',
 62             stack: 'Total',
 63             areaStyle: {},
 64             emphasis: {
 65               focus: 'series'
 66             },
 67             data: [220, 182, 191, 234, 290, 330, 310]
 68           },
 69           {
 70             name: '取水计划',
 71             type: 'line',
 72             stack: 'Total',
 73             areaStyle: {},
 74             emphasis: {
 75               focus: 'series'
 76             },
 77             data: [150, 232, 201, 154, 190, 330, 410]
 78           },
 79           {
 80             name: '监测水量',
 81             type: 'line',
 82             stack: 'Total',
 83             areaStyle: {},
 84             emphasis: {
 85               focus: 'series'
 86             },
 87             data: [320, 332, 301, 334, 390, 330, 320]
 88           }
 89         ]
 90       },
 91       legendList: [
 92         {
 93           tab: '用水总量',
 94           active: true
 95         },
 96         {
 97           tab: '取水许可',
 98           active: true
 99         },
100         {
101           tab: '取水计划',
102           active: true
103         },
104         {
105           tab: '监测水量',
106           active: true
107         }
108       ]
109       methods: {
110     tabCilck(item) {
111       item.active = !item.active
112       const myChart = this.$refs.myChart.chart
113       myChart.dispatchAction({
114         type: item.active ? 'legendSelect' : 'legendUnSelect',
115         // 图例名称
116         name: item.tab
117       })
118     }
119   }

效果如下：
在这里插入图片描述

posted @ 2025-07-12 10:40  高亮uncle  阅读(25)  评论(0)    收藏  举报