echarts直角圖形的x軸座標的標籤新增click事件
<pre name="code" class="html"><!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width:600px;height:400px"></div> <!-- ECharts單檔案引入 --> <script src="./comechart/js/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: './comechart/src' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就載入bar模組，按需載入 ], function (ec) { // 基於準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); var option = { color: ['lime','red','#058DC7'], title: { x:'center', text: '顏色分類',
link:'javascript:alert(1)', //超連結改成click事件target:'self' }, tooltip: { trigger: 'axis', axisPointer : { type : 'shadow' }, show: true, formatter:function(obj){ var html = obj[0].name+"<br/>"; for(var i = 0; i<obj.length;i++){ var value = obj[i].data.toString(); html+=obj[i].seriesName+":"+value.substr(value.lastIndexOf('-')+1)+"<br/>"; } return html; } }, legend: { x:'center', y:'bottom', padding:10, data:['紅','綠','藍'] }, xAxis : [ { axisLabel : { formatter: function (value){return Math.abs(value);} }, type : 'value' } ], yAxis : [ { type : 'category', position:'right', axisLabel : {clickable:true}, data:['一類','二類','三類'] } ], series : [ { name:'紅', clickable:false, type:'bar', data:[-3300, -6320, -13301] }, { name:'綠', clickable:false, type:'bar', data:[-800, -1600, -2010] }, { name:'藍', clickable:false, type:'bar', data:[-400, -800, -1200] } ] }; // 為echarts物件載入資料 myChart.setOption(option); function eConsole(param) { if (typeof param.seriesIndex == 'undefined') { return; } if (param.type == 'click') { alert(param.name); } } var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.CLICK, eConsole); } ); </script> </body>
修改的地方：
1）第一
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
修改為：
paths: {
echarts: './comechart/src' // 'http://echarts.baidu.com/build/dist'檔案的存放路徑
}
2）第二
series裡面新增clickable:false
series : [
{
name:'當天正常簽收',
clickable:false,---------------------------------新新增設定柱子不可點選
type:'bar',
data:[-3300, -6320, -13301]
},
{
name:'未簽收',
clickable:false,,---------------------------------新新增設定柱子不可點選
type:'bar',
data:[-800, -1600, -2010]
},
{
name:'異常簽收',
clickable:false,,---------------------------------新新增設定柱子不可點選
type:'bar',
data:[-400, -800, -1200]
}
]
3）第三
xAxis / yAxis 新增axisLabel : {clickable:true}，xAxis / yAxis對應的type為type : 'category'
yAxis : [
{
type : 'category',
position:'right',
axisLabel : {clickable:true},
data:['分部','本部','總部']
}
]
4）第四
myChart新增onclick事件
myChart.setOption(option);
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
alert(param.name);
}
}
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
}
5）第五
1、這個柱圖的y軸為專案軸，並且設定y軸偏右，所有的數值都是負值，為了讓所有的柱子都貼近y軸；
2、為了x軸所有的標識資料為正數，給x軸的數值都取絕對值
xAxis : [
{
axisLabel : {
formatter: function (value){return Math.abs(value);//顯示的數值都取絕對值
}
},
type : 'value'
}
]
如圖
給title新增click事件：
方法：只要在option的title裡面新增（link:'javascript:alert(1);', target:'self'）
是將title的超連結改成title的click事件