Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)實(shí)例代碼
更新時(shí)間：2022年04月24日 11:25:08 作者：vaelcy
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
效果圖
代碼部分
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,//取消圖例上的點(diǎn)擊事件
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);
},
//圖表點(diǎn)擊事件封裝
//
echarClickfun(myChart) {
var _this = this;
myChart.off('click');
myChart.on('click', function (params) {
if (params.componentType == "xAxis") {//點(diǎn)擊x軸標(biāo)簽xAxis
_this.getchart(params.value);
} else if(params.componentType == "yAxis") {//點(diǎn)擊y軸標(biāo)簽yAxis
_this.getchart(params.value);
} else {//點(diǎn)擊柱子柱子
}
})
},
//獲取二級(jí)數(shù)據(jù)重新渲染
getchart(data) {
ajaxGet('接口地址', { "province": data }, res => {
if (res.state !== 1) {
this.$message({
message: res.value || '接口報(bào)錯(cuò)',
type: 'error'
});
return;
}
var echartData = res.value || [];//獲取二級(jí)數(shù)據(jù)
this.mychart1(echartData);
})
}
}注：echarClickfun里邊點(diǎn)擊事件根據(jù)自己實(shí)際情況寫就可以，我這里是把三種情況都列舉出來了，這里還需要一個(gè)默認(rèn)圖表一級(jí)數(shù)據(jù)，大家真正實(shí)際寫的時(shí)候加上獲取接口數(shù)據(jù)就好了。
總結(jié)
到此這篇關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Echarts切換圖表二級(jí)數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序與webview?H5交互的方法(內(nèi)嵌H5跳轉(zhuǎn)原生頁面)
小程序webView中嵌套H5頁面,難免會(huì)遇到小程序與h5頁面進(jìn)行數(shù)據(jù)通信或交互的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于微信小程序與webview?H5交互的相關(guān)資料,內(nèi)嵌H5跳轉(zhuǎn)原生頁面,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了如何使用pdf.js展示pdf文件(親測(cè)可用),如果只是電腦端,可通過 iframe 標(biāo)簽嵌套預(yù)覽,文中介紹了安裝電腦ios的通用方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了js實(shí)現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要是對(duì)Javascript中難以理解的11個(gè)問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
setTimeout函數(shù)兼容各主流瀏覽器運(yùn)行執(zhí)行效果實(shí)例
setTimeout是一個(gè)很不錯(cuò)的函數(shù)，網(wǎng)站頁面前端工程師經(jīng)常將其用于幾秒后執(zhí)行的動(dòng)作，下文要講的setTimeout可以很好地兼容IE6，7,8,9以及谷歌等主流瀏覽器2013-06-06
這篇文章主要為大家詳細(xì)介紹了一道極易被忽視的javascript面試題七問七答，感興趣的小伙伴們可以參考一下2016-02-02
面試官常問之說說js中var、let、const的區(qū)別
var、let和const都是JavaScript中用來聲明變量的關(guān)鍵字,并且let和 const關(guān)鍵字是在 ES6 中才新增的,下面這篇文章主要給大家介紹了關(guān)于var、let、const區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-03-03
javascript 容錯(cuò)處理代碼(屏蔽js錯(cuò)誤)
有時(shí)候大家來瀏覽網(wǎng)頁的時(shí)候發(fā)現(xiàn)IE瀏覽器左下角總有個(gè)黃色錯(cuò)誤標(biāo)志，有時(shí)候更是直接彈出錯(cuò)誤無法繼續(xù)瀏覽頁面，這樣對(duì)于網(wǎng)站的正規(guī)性與權(quán)威性發(fā)展不利。2010-04-04
layui table復(fù)選框禁止某幾條勾選的實(shí)例
今天小編就為大家分享一篇layui table復(fù)選框禁止某幾條勾選的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實(shí)現(xiàn)表格切換的技巧,需要的朋友可以參考下2015-05-05