Incubator-echarts: 如何在条形图(柱状图)增加点击事件跳转页面

Created on 2 Jun 2016  ·  2Comments  ·  Source: apache/incubator-echarts

问题简述 (One-line summary)

如何在柱状图中的单个柱体各增加点击事件跳转到对应的URL

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):3.1.7
  • 浏览器类型和版本 (Browser version):chrome 50.0.2661.102 m (64-bit)
  • 操作系统类型和版本 (OS Version):windows 7

    期望结果 (Expected behaviour)

就例如在下面的截图,我想分别点击1月2月3月的3个柱体,分别弹出所点击月份的详细数据的页面(即弹出3个页面),请问我应该增加什么配置项和对数据源的格式进行什么修改,本人刚接触html和js,麻烦能够解释得详细一点,不然我看不懂

其他信息 (Other comments)

image 6

ECharts配置项 (ECharts option)

var echartBar = echarts.init(document.getElementById('echart_bar'), theme);
      echartBar.setOption({
        backgroundColor:'#FFFFFF',
        title: {
            x:'center',
          text: 'Bar Chart',
          subtext: 'subtitle'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
            orient: 'vertical',  
            x:'right',      
            y:'top',        
          data: ['sales', 'purchases']
        },
        calculable: false,
        xAxis: [{
          type: 'category',
          axisLabel: {
                        interval:0      
                    },
                    axisTick:{
                        interval:0      
                    },
          data: ['1月', '2月', '3月']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'sales',
          type: 'bar',
          data: [2.0, 4.9, 7.0]
        }, {
          name: 'purchases',
          type: 'bar',
          data: [2.6, 5.9, 9.0]
        }]
      });

Most helpful comment

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

All 2 comments

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

url地址能否存在于配置项中呢?对于抽象出来的模块不好处理动态地址跳转呢

Was this page helpful?
0 / 5 - 0 ratings