echarts_部分圖表配置_圖表click事件

額。。當然其他事件都是支持的，此文僅以click做簡單介紹：

請點擊“柱子”。。。

官方介紹：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 : {            // 坐標軸指示器，坐標軸觸發有效
 12                     type : 'shadow'        // 默認為直線，可選為：'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 : {//去掉網格線
 25                         show : false
 26                     },
 27                     data : ['掌上營業廳', '微信營業廳','網上營業廳'],
 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 : {//設置軸線
 40                         lineStyle : {
 41                             color : '#FFF'
 42                         }
 43                     },
 44                     axisTick : {//設置刻度
 45                         lineStyle : {
 46                             color : '#FFF'
 47                         }
 48                     }
 49                 }
 50             ],
 51             yAxis : [
 52                 {
 53                     type : 'value',
 54                     splitLine : {//去掉網格線
 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,//顯示數字
 97                             position : 'top'
 98                         }
 99                     },
100                     data:[10, 52, 200]
101                 }
102             ]
103         };
104     myChart.setOption(option);
105      
106     /* 添加柱狀圖的點擊事件 */
107     myChart.on('click',function(params){
108         
109         if(params.name === '掌上營業廳'){    /*params.name是橫軸的被點擊的name的值*/
110             parent.window.location.href = '../../page/wap.html';/*因為在iframe中所以需要控制iframe外面的window對象，控制外部window需要添加一個parent（每一個iframe中有一個單獨的window對象）*/
111             sessionStorage.setItem('_paramsName_','掌上營業廳');//業務需求 跳轉后通過session（當前存的值）判斷二級菜單的顯示
112             return false
113         };
114         if(params.name === '微信營業廳'){
115             parent.window.location.href = '../../page/weixin.html';
116             sessionStorage.setItem('_paramsName_','微信營業廳');
117             return false
118         };
119         if(params.name === '網上營業廳'){
120             parent.window.location.href = '../../page/web.html';
121             sessionStorage.setItem('_paramsName_','網上營業廳');
122             return false
123         };
124     });
125 }
126 
127 bottom_z ('lineChart_Z');

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

本文實現點擊定向跳轉的方式就是判斷了當前的params.name然后進行業務跳轉，快去試試吧（本文較初級如有錯誤還望指點）

轉載于:https://www.cnblogs.com/cy3664983/p/7280795.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/252176.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/252176.shtml
英文地址，請注明出處：http://en.pswp.cn/news/252176.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！