額。。當(dāng)然其他事件都是支持的，此文僅以click做簡(jiǎn)單介紹：

請(qǐng)點(diǎn)擊“柱子”。。。

官方介紹：http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

1 function bottom_z (thisId){ 2 var myChart = echarts.init(document.getElementById(thisId)); 3 option = { 4 color: ['#fff'], 5 textStyle:{ 6 color:'#fff' 7 8 }, 9 tooltip : { 10 trigger: 'axis', 11 axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效 12 type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow' 13 } 14 }, 15 grid: { 16 left: '3%', 17 right: '4%', 18 bottom: '3%', 19 containLabel: true 20 }, 21 xAxis : [ 22 { 23 type : 'category', 24 splitLine : {//去掉網(wǎng)格線 25 show : false 26 }, 27 data : ['掌上營(yíng)業(yè)廳', '微信營(yíng)業(yè)廳','網(wǎng)上營(yíng)業(yè)廳'], 28 axisLabel : { 29 show : true, 30 textStyle : { 31 color : '#FFF', 32 align : 'center', 33 fontSize: 15 34 } 35 }, 36 axisTick: { 37 alignWithLabel: true 38 }, 39 axisLine : {//設(shè)置軸線 40 lineStyle : { 41 color : '#FFF' 42 } 43 }, 44 axisTick : {//設(shè)置刻度 45 lineStyle : { 46 color : '#FFF' 47 } 48 } 49 } 50 ], 51 yAxis : [ 52 { 53 type : 'value', 54 splitLine : {//去掉網(wǎng)格線 55 show : false 56 }, 57 axisLabel : { 58 show : true, 59 textStyle : { 60 color : '#FFF', 61 align : 'right', 62 fontSize: 15 63 } 64 }, 65 axisLine : { 66 lineStyle : { 67 color : '#FFF' 68 } 69 }, 70 axisTick : { 71 lineStyle : { 72 color : '#FFF' 73 } 74 } 75 } 76 ], 77 series : [ 78 { 79 name:'', 80 type:'bar', 81 barWidth: '40%', 82 itemStyle : { 83 normal : { 84 color:'#ccecff',//柱狀的顏色 85 label : { 86 textStyle : { 87 fontSize : '15',//柱狀上的顯示的文字大小 88 color:'#ccecff' 89 } 90 } 91 } 92 }, 93 94 label : { 95 normal : { 96 show : true,//顯示數(shù)字 97 position : 'top' 98 } 99 }, 100 data:[10, 52, 200] 101 } 102 ] 103 }; 104 myChart.setOption(option); 105 106 /* 添加柱狀圖的點(diǎn)擊事件 */ 107 myChart.on('click',function(params){ 108 109 if(params.name === '掌上營(yíng)業(yè)廳'){ /*params.name是橫軸的被點(diǎn)擊的name的值*/ 110 parent.window.location.href = '../../page/wap.html';/*因?yàn)樵趇frame中所以需要控制iframe外面的window對(duì)象，控制外部window需要添加一個(gè)parent（每一個(gè)iframe中有一個(gè)單獨(dú)的window對(duì)象）*/ 111 sessionStorage.setItem('_paramsName_','掌上營(yíng)業(yè)廳');//業(yè)務(wù)需求 跳轉(zhuǎn)后通過(guò)session（當(dāng)前存的值）判斷二級(jí)菜單的顯示 112 return false 113 }; 114 if(params.name === '微信營(yíng)業(yè)廳'){ 115 parent.window.location.href = '../../page/weixin.html'; 116 sessionStorage.setItem('_paramsName_','微信營(yíng)業(yè)廳'); 117 return false 118 }; 119 if(params.name === '網(wǎng)上營(yíng)業(yè)廳'){ 120 parent.window.location.href = '../../page/web.html'; 121 sessionStorage.setItem('_paramsName_','網(wǎng)上營(yíng)業(yè)廳'); 122 return false 123 }; 124 }); 125 } 126 127 bottom_z ('lineChart_Z');

添加事件在“107行”的代碼注意參數(shù)“params”，如下格式：

?

本文實(shí)現(xiàn)點(diǎn)擊定向跳轉(zhuǎn)的方式就是判斷了當(dāng)前的params.name然后進(jìn)行業(yè)務(wù)跳轉(zhuǎn)，快去試試吧（本文較初級(jí)如有錯(cuò)誤還望指點(diǎn)）

轉(zhuǎn)載于:https://www.cnblogs.com/cy3664983/p/7280795.html

總結(jié)

以上是生活随笔為你收集整理的echarts_部分图表配置_图表click事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。