1. 程式人生 > >echarts_部分圖表配置_圖表click事件

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

pointer parent click 通過 技術分享 ech series osi slab

額。。當然其他事件都是支持的,此文僅以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然後進行業務跳轉,快去試試吧(本文較初級如有錯誤還望指點)

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