yinyan1314
yinyan1314
2017-08-04 08:28
采纳率: 50%
浏览 7.2k

Echarts柱状图点击事件

    // 基于准备好的dom,初始化echarts实例
var myChart  = echarts.init(document.getElementById('main'),'macarons');
window.onresize = function(){
    myChart.resize();
};

    // 指定图表的配置项和数据
    var option = {
            title : {
                text: '',
                subtext: '发布日期: 7.31 19:10',
                subtextStyle : {
                    fontSize:20
                }
            },
            grid : {
                x:'10%',
                y:'10%',
                bottom:'15%',
                right:'3%'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[
                    {
                        name:'全部',
                        icon: 'roundRect',
                        textStyle:{
                            color:'red',
                            fontSize:40
                        }
                    },
                    {
                        name:'早餐',
                        icon: 'roundRect',
                        textStyle:{
                            color:'red',
                            fontSize:40
                        }
                    },
                    {
                        name:'午餐',
                        icon: 'roundRect',
                        textStyle:{
                            color:'red',
                            fontSize:40
                        }
                    },
                    {
                        name:'晚餐',
                        icon: 'roundRect',
                        textStyle:{
                            color:'red',
                            fontSize:40
                        }
                    }],
                selectedMode:'single',   //设置图例为单选
                top:'94%',
                width:'100%',
                itemGap:80,
                itemWidth:90,
                itemHeight:70
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    axisLabel:{ //调整x轴的lable  
                        textStyle:{
                            fontSize:25 // 让字体变大
                        }
                    },
                    data : ['荟萃','不挑食','儿童餐厅','宴会']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        textStyle: {
                            fontSize:20
                        }
                    }
                }
            ],
            series : [
                {
                    name:'全部',
                    type:'bar',
                    barWidth:'40%',
                    label: {
                        normal: {
                            show:true,
                            textStyle: {
                                fontSize:25
                            },
                            position: 'top'
                        }
                    },
                    data:[288, 80, 90, 168]
                },
                {
                    name:'早餐',
                    type:'bar',
                    barWidth:'40%',
                    label: {
                        normal: {
                            show:true,
                            textStyle: {
                                fontSize:25
                            },
                            position: 'top'
                        }
                    },
                    data:[139,39,0,84]
                },
                {
                    name:'午餐',
                    type:'bar',
                    barWidth:'40%',
                    label: {
                        normal: {
                            show:true,
                            textStyle: {
                                fontSize:25
                            },
                            position: 'top'
                        }
                    },
                    data:[31, 0, 11, 84]
                },
                {
                    name:'晚餐',
                    type:'bar',
                    barWidth:'40%',
                    label: {
                        normal: {
                            show:true,
                            textStyle: {
                                fontSize:25
                            },
                            position: 'top'
                        }
                    },
                    data:[115,0,39,0]
                }
            ]
        };
    myChart.setOption(option,true);

    var ecConfig = require('echarts/config');
    function eConsole(param) {
        if (typeof param.seriesIndex != 'undefined') {
            alert(param.seriesIndex);
        }
    }
    myChart.on(ecConfig.EVENT.CLICK, eConsole);
    上面是我的代码,点击图中柱子没反应,用的是Echarts3.x版本。我这里应该怎么写才对,求大神。
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • weixin_39540475
    GannnkKi 2017-08-04 08:41
    已采纳

    会将点击部分的信息封装到a中,你看看console.log(a)中封装的信息就知道了。我这个是饼图的,你看着将后台的json数据放到柱状图中就可以了
    myChart.on('click',function(a,b){
    /* console.log(a); */
    var options = myChart.getOption();

    $.ajax({
    url: "<%=request.getContextPath()%>/complaintMessageCategory/forthPieByForthName",
    type: "POST",
    dataType: "json",
    data: {
    "forthName": a.name,
    "date":date1
    },
    async: false,
    success: function(data) {
    if(data){
    options.title.text = textTotal+'→'+a.name+'的分类 :';

    options.series[0].data = data.series;
    options.series[0].name = data.forthName;
    options.legend.data = data.legend;

    myChart.setOption(options,true);
    }
    },
    error: function() {
    alert("error!");
    }
    });
    });

    点赞 评论

相关推荐