echarts直角图形的x轴坐标的标签添加click事件

来源：互联网发布：sql为表创建外键约束编辑：程序博客网时间：2024/05/18 04:52

<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事件

0 0