您好,登錄后才能下訂單哦!
這篇文章主要講解了“Echarts怎么實現(xiàn)圖表點擊x軸y軸切換圖表二級數(shù)據(jù)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Echarts怎么實現(xiàn)圖表點擊x軸y軸切換圖表二級數(shù)據(jù)”吧!
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, // 設(shè)置寬度 itemHeight: 10, // 設(shè)置高度 itemGap: 10,// 設(shè)置間距 textStyle: {//文字根據(jù)legend顯示 color: "#FFFFFF", fontSize: 12, }, }, grid: { left: '15%', top: '20%', right: '8%', bottom: '10%', containLabel: true }, xAxis: { type: 'category', triggerEvent: true, // data: ['風(fēng)電', '光伏'], data: xAxisData, axisLine: { show: false }, axisLabel: { color: "#FFFFFF", fontSize: '14', // interval: 0, // rotate: rotate//文字旋轉(zhuǎn)角度 }, 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軸標(biāo)簽xAxis _this.getchart(params.value); } else if(params.componentType == "yAxis") {//點擊y軸標(biāo)簽yAxis _this.getchart(params.value); } else {//點擊柱子柱子 } }) }, //獲取二級數(shù)據(jù)重新渲染 getchart(data) { ajaxGet('接口地址', { "province": data }, res => { if (res.state !== 1) { this.$message({ message: res.value || '接口報錯', type: 'error' }); return; } var echartData = res.value || [];//獲取二級數(shù)據(jù) this.mychart1(echartData); }) } }
注:echarClickfun里邊點擊事件根據(jù)自己實際情況寫就可以,我這里是把三種情況都列舉出來了,這里還需要一個默認(rèn)圖表一級數(shù)據(jù),大家真正實際寫的時候加上獲取接口數(shù)據(jù)就好了。
感謝各位的閱讀,以上就是“Echarts怎么實現(xiàn)圖表點擊x軸y軸切換圖表二級數(shù)據(jù)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Echarts怎么實現(xiàn)圖表點擊x軸y軸切換圖表二級數(shù)據(jù)這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。