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

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

      报告相同问题?

      悬赏问题

      • ¥15 在matlab中如何进行三个参数的离散傅里叶逆变换(idft)
      • ¥15 遇到问题了,求解答!
      • ¥15 请问coppliasim eduUR5视觉抓取怎么实现仿真,
      • ¥30 JavaWeb实验(购物平台)
      • ¥15 八路抢答器倒计时设计时显示器不输出,只能显示0
      • ¥15 用C语言随机生成一个迷宫
      • ¥15 超多因素的正交方案设计
      • ¥15 Scratch~汽车小游戏
      • ¥30 OSGB转换为3dtiles
      • ¥25 用于Audio的芯片中“Audio Interface”和“Mode Control”是什么?