yinyan1314 2017-08-04 08:28 采纳率: 0%
浏览 7907
已采纳

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条回答 默认 最新

  • 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!");
    }
    });
    });

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题