这篇文章主要讲解了“Echarts怎么实现图表点击x轴y轴切换图表二级数据”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Echarts怎么实现图表点击x轴y轴切换图表二级数据”吧！
效果图
代码部分
methods: { mychart1(data) { this.myChart = echarts.init(document.getElementById('profitTotal')); let echartData = []; if(data) { echartData = data; } else { echartData = []; } let xAxisData = echartData.map(v => v.name); let yAxisData1 = echartData.map(v => v.value1); let yAxisData2 = echartData.map(v => v.value2); let yAxisData3 = echartData.map(v => v.value3); option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['2019', '2020','2021'], orient: "horizontal",//vertical x: 'center', // y: 'bottom', // right: '-50%', bottom: '4%', icon: "roundRect", selectedMode: false,//取消图例上的点击事件 itemWidth: 16, // 设置宽度 itemHeight: 10, // 设置高度 itemGap: 10,// 设置间距 textStyle: {//文字根据legend显示 color: "#FFFFFF", fontSize: 12, }, }, grid: { left: '15%', top: '20%', right: '8%', bottom: '10%', containLabel: true }, xAxis: { type: 'category', triggerEvent: true, // data: ['风电', '光伏'], data: xAxisData, axisLine: { show: false }, axisLabel: { color: "#FFFFFF", fontSize: '14', // interval: 0, // rotate: rotate//文字旋转角度 }, axisTick: { // show: false, alignWithLabel: true, lineStyle: { color: '#0C4F81', type: 'solid' } }, }, yAxis: { type: 'value', nameTextStyle: { color: '#4F88BD', padding: [0, 25, -5, 0], fontSize: 12, fontFamily: 'Microsoft YaHei', }, axisLine: { show: true, lineStyle: { color: "#0C4F81" } }, axisLabel: { color: "#4F88BD", fontSize: '12', formatter: '{value}' }, splitLine: { lineStyle: { type: "dotted", color: "#0C4F81" } }, axisTick: { show: false }, }, series: [ { name: '2019', type: 'bar', barMaxWidth: 80, stack: 'Ad', emphasis: { focus: 'series' }, itemStyle: { normal: { label: { show: false, position: 'top', color: '#ffffff' }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(25, 186, 255, 1)" }, { offset: 1, color: "rgba(85, 243, 174, 1)" } ]), } }, data: yAxisData1 }, { name: '2020', type: 'bar', barMaxWidth: 80, stack: 'Ad', emphasis: { focus: 'series' }, itemStyle: { normal: { label: { show: false, position: 'top', color: '#ffffff' }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(255, 74, 140, 1)" }, { offset: 1, color: "rgba(253, 129, 132, 1)" } ]), } }, data: yAxisData2 }, { name: '2021', type: 'bar', barMaxWidth: 80, stack: 'Ad', emphasis: { focus: 'series' }, itemStyle: { normal: { label: { show: false, position: 'top', color: '#ffffff' }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#F6F68C" }, { offset: 1, color: "#FC8F3E" } ]), } }, data: yAxisData3 }, ] }; this.myChart.clear(); this.myChart.setOption(option); this.echarClickfun(this.myChart); }, //图表点击事件封装 // echarClickfun(myChart) { var _this = this; myChart.off('click'); myChart.on('click', function (params) { if (params.componentType == "xAxis") {//点击x轴标签xAxis _this.getchart(params.value); } else if(params.componentType == "yAxis") {//点击y轴标签yAxis _this.getchart(params.value); } else {//点击柱子柱子 } }) }, //获取二级数据重新渲染 getchart(data) { ajaxGet('接口地址', { "province": data }, res => { if (res.state !== 1) { this.$message({ message: res.value || '接口报错', type: 'error' }); return; } var echartData = res.value || [];//获取二级数据 this.mychart1(echartData); }) }}注：echarClickfun里边点击事件根据自己实际情况写就可以，我这里是把三种情况都列举出来了，这里还需要一个默认图表一级数据，大家真正实际写的时候加上获取接口数据就好了。
感谢各位的阅读，以上就是“Echarts怎么实现图表点击x轴y轴切换图表二级数据”的内容了，经过本文的学习后，相信大家对Echarts怎么实现图表点击x轴y轴切换图表二级数据这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
