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

function bottom_z (thisId){
    var myChart = echarts.init(document.getElementById(thisId));
    option = {
            color: ['#fff'],
            textStyle:{
                color:'#fff'
                
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    splitLine : {//去掉网格线
                        show : false
                    },
                    data : ['掌上营业厅', '微信营业厅','网上营业厅'],
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#FFF',
                            align : 'center',
                            fontSize: 15
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine : {//设置轴线
                        lineStyle : {
                            color : '#FFF'
                        }
                    },
                    axisTick : {//设置刻度
                        lineStyle : {
                            color : '#FFF'
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitLine : {//去掉网格线
                        show : false
                    },
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#FFF',
                            align : 'right',
                            fontSize: 15
                        }
                    },
                    axisLine : {
                        lineStyle : {
                            color : '#FFF'
                        }
                    },
                    axisTick : {
                        lineStyle : {
                            color : '#FFF'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'',
                    type:'bar',
                    barWidth: '40%',
                    itemStyle : {
                        normal : {
                            color:'#ccecff',//柱状的颜色
                            label : {
                                  textStyle : {
                                      fontSize : '15',//柱状上的显示的文字大小
                                      color:'#ccecff'
                                  }
                              }
                        }
                    },

                    label : {
                        normal : {
                            show : true,//显示数字
                            position : 'top'
                        }
                    },
                    data:[10, 52, 200]
                }
            ]
        };
    myChart.setOption(option);
     
    /* 添加柱状图的点击事件 */
    myChart.on('click',function(params){
        
        if(params.name === '掌上营业厅'){    /*params.name是横轴的被点击的name的值*/
            parent.window.location.href = '../../page/wap.html';/*因为在iframe中所以需要控制iframe外面的window对象，控制外部window需要添加一个parent（每一个iframe中有一个单独的window对象）*/
            sessionStorage.setItem('_paramsName_','掌上营业厅');//业务需求 跳转后通过session（当前存的值）判断二级菜单的显示
            return false
        };
        if(params.name === '微信营业厅'){
            parent.window.location.href = '../../page/weixin.html';
            sessionStorage.setItem('_paramsName_','微信营业厅');
            return false
        };
        if(params.name === '网上营业厅'){
            parent.window.location.href = '../../page/web.html';
            sessionStorage.setItem('_paramsName_','网上营业厅');
            return false
        };
    });
}

bottom_z ('lineChart_Z');

添加事件在“107行”的代码注意参数“params”，如下格式：

本文实现点击定向跳转的方式就是判断了当前的params.name然后进行业务跳转，快去试试吧（本文较初级如有错误还望指点）