背景
需要实现点击左上角按钮组的按钮，切换对应的统计图
- 点击按钮1呈现的统计图。映射的实体类Vo1
- 点击按钮2呈现的统计图。映射的实体类Vo2
可能会出现的问题：
（1） 空白：进入页面只渲染第一个统计图，点击按钮后，第二个统计图不显示，div为空白。
（2） 数据错乱：第一个统计图的4个series的data会乱入到第二个统计图的3个data，使其也在页面上显示4个data。
正常显示的实现方式
前端
template模块的按钮上增加点击事件；统计图模块增加v-show控制div显隐。
<el-row :gutter="10" class="mb8"><div style="margin-left: 65px; margin-top: 15px"><el-button-group> <!--注意点击事件--><el-button type="primary" size="small" plain @click="showChart('1')">按钮1</el-button><el-button type="primary" size="small" plain @click="showChart('2')">按钮2</el-button></el-button-group></div>
</el-row>
<el-row><el-col align="center"><!-- 统计图--><div id="chart_1" v-show="showAvg" class="chart"></div><div id="chart_2" v-show="!showAvg" class="chart" ></div></el-col></el-row>
data() {return {//按钮参数chartType: '1',//统计图1的数据singleCostValue: [],//统计图2的数据singleTotalValue: [],// v-show 判断是否显示divshowAvg: true,// 查询参数queryParams: {pageNum: 1,pageSize: 10,dateCost: null, //年份查询参数},}}mounted() {this.$nextTick(()=>{this.showChart('按钮1');});},
methods() {
/** 按钮点击切换图表 */showChart(type) {this.chartType = type;if (this.chartType === '1' || type === null){this.showAvg = true;this.initChart_1(); //初始化统计图1}else {this.showAvg = !this.showAvg;this.initChart_2(); //初始化统计图2}},initChart_1(){//根据参数查询，把后端数据传递到统计图方法myEChart_1singleCostChart(this.queryParams).then(response => {this.myEChart_1(response.data);})},initChart_2(){singleIncomeChart(this.queryParams).then(response => {this.myEChart_2(response.data);})},myEChart_2(datm) {var dataMonth = [];var dataCost = [];var dataOut = [];var dataRatio = [];for ( let i = 0; i<datm.length; i++ ){var item1 = {// value: formattedDate,value: datm[i].dateCost.toString().substring(0,7),};//写入横坐标x轴年月dataMonth.push(item1);var item2 = {value: datm[i].totalCost,};//写入统计图第一个数据列表，即第一个柱dataCost.push(item2);var item3 = {value: datm[i].totalOutput,};//写入第二个数据列表dataOut.push(item3);var item4 = {value: datm[i].profitRatio,};//写入第三个数据列表dataRatio.push(item4);}var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['bar1', 'bar2', 'line3'],y: 'bottom'},xAxis: [{type: 'category',data: dataMonth,axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '',axisLabel: {formatter: '{value}万元'}},{type: 'value',name: '',axisLabel: {formatter: '{value}%'}}],series: [{name: 'bar_1',type: 'bar',yAxisIndex: 0,tooltip: {valueFormatter: function (value) {return value + '万元';}},data: dataCost},{......}//省略]};var myChart_1 = echarts.init(document.getElementById("chart_2"));myChart_1.setOption(option);window.addEventListener("resize", () => {myChart_1.resize();});},附注
上示统计图中，联合右上角日期框选择器，查询数据显示对应的统计图
添加事件变化监听@change事件
<el-date-picker clearablev-model="queryParams.dateCost"type="year"style="border-radius: 4px; border: #00afff solid 1px;margin-left: 400px; width: 270px"value-format="yyyy-MM-dd HH:mm:ss"@change="handleYearChange"placeholder="请选择年份">
</el-date-picker>
/** 年份选择 */handleYearChange(value) {// console.log('选择的年份是：', value);this.showChart('1');},
