<div class="chart-box"><v-chart ref="barChart" class="chartStyle" :options="options" />
</div>
options() {const $this = thisreturn {title: { text: 'Echarts图表' },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: { type: 'shadow' },formatter: function (params) {const date = params[0].axisValue;const test= $this.dataList.find(item => {return item.date === date})?.test;let result = `${date}<br/>`;result += `label数据3: ${test?? ''}<br/>`;result += params.map((param) => {if (param.seriesName === '折线概率') {return `${param.seriesName}: ${param.value ?? ''}%`;} else {return `${param.seriesName}: ${param.value ?? ''}`;}}).join('<br>');return result;}},legend: { data: ['柱状数据A', '柱状数据B', '折线概率'] },xAxis: {type: 'category',data: this.xAxisData},yAxis: [{type: 'value'},{type: 'value',axisLabel: { formatter: '{value}%' },splitLine: { show: false } }],series: [{name: '柱状数据A',type: 'bar',barWidth: 30, barMinHeight: 15,z: 10,stack: '堆叠', data: this.aList,itemStyle: { color: '#698BF9' },label: {show: true,color: '#fff'}},{name: '柱状数据B',type: 'bar',barWidth: 30, barMinHeight: 35,stack: '堆叠',data: this.bList,itemStyle: { color: '#FA5561' },label: {show: true}},{name: '折线概率',type: 'line',yAxisIndex: 1, data: this.cList,smooth: true, symbol: 'circle', symbolSize: 8,lineStyle: { width: 3, color: '#63CDFE' },itemStyle: { color: '#63CDFE' },label: {show: false, formatter: '{c}%' }}]}}
handleEchartsData() {const { xAxisData, aList, bList, cList} = this.dataList.reduce((acc, item) => {acc.xAxisData.push(item.statisticsDate ?? '')acc.aList.push(item.a?? '')acc.bList.push(item.b?? '')acc.cList.push(item.c? (item.c* 100).toFixed(2) : '')return acc},{ xAxisData: [], aList: [], bList: [], cList: [] })this.xAxisData = xAxisDatathis.aList= aListthis.bList= bListthis.cList= cList},