<div class="acountEchart"><!-- 图例tab --><ul class="tabWrap"><li v-for="(item, index) in legendList" :key="index" :class="!item.active ? 'noBgcolor' : ''" @click="tabCilck(item)">{{ item.tab }}</li></ul><v-chart ref="myChart" :options="option" :autoresize="true" /></div>
css代码：
.acountEchart {margin-top: 28px;width: 100%;height: 252px;position: relative;.echarts {width: 100%;height: 100%;}}.tabWrap{display:flex;justify-content: space-between;align-items: center;position: absolute;top:-10px;left: 50%;transform: translateX(-50%);width: 90%;z-index:999;li{width: 22%;padding: 5px 0;text-align: center;font-family: Source Han Sans CN;font-weight: 400;line-height: 16px;color: #fff;background:#4DB9FF;border-radius:4px;cursor: pointer;&.noBgcolor{background:#ddd;color: #000;}}}
option: {color: ['#5A8EF9', '#5AD7A6', '#F6BD16', '#E7674A'],tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {show: false,icon: 'none',itemGap: 0,data: ['用水总量', '取水许可', '取水计划', '监测水量'],textStyle: {fontSize: 12,color: '#fff',backgroundColor: '#5A8EF9',borderRadius: 4,padding: 5}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['', '', '', '', '']}],yAxis: [{type: 'value',name: '(mm³)',axisLine: {show: false},axisTick: {show: false } // 是否展示y轴坐标刻度}],series: [{name: '用水总量',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},{name: '取水许可',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: '取水计划',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: '监测水量',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]}]},legendList: [{tab: '用水总量',active: true},{tab: '取水许可',active: true},{tab: '取水计划',active: true},{tab: '监测水量',active: true}]methods: {tabCilck(item) {item.active = !item.activeconst myChart = this.$refs.myChart.chartmyChart.dispatchAction({type: item.active ? 'legendSelect' : 'legendUnSelect',// 图例名称name: item.tab})}}
效果如下：
