javascript - Echarts.js 库 - 使用饼图的 onclick 事件引用页面

标签 javascript echarts

我正在使用 echarts.js 库来制作饼图,

我想使饼图中的每个切片超链接到另一个页面。

我现在使用静态数据点,以测试它是否有效 - 之后将更新为动态数据。

下面是 pie1a 的示例 - 我希望 T2、T2、T4 和 N/A 引用他们自己的页面。 T2 = "http://localhost/T2.html "。

//ECHART_PIE1a

  var echartPie1a = echarts.init(document.getElementById('echart_pie1a'), theme);

  echartPie1a.setOption({
     tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"

    },




    legend: {
      x: 'right',
      y: 'bottom',
       data: ['T2', 'T3', 'T4', 'N/A']
    },

    calculable: true,
    series: [{
      name: '(TB)',
      type: 'pie',
      radius: '54%',
      center: ['54%', '36%'],
      data: [{

        value: 438,
        name: 'T2'
      }, {
        value: 1109,
        name: 'T3'
      }, {
        value: 42,
        name: 'T4'
      }, {
        value: 389,
        name: 'N/A'

      }]
    }]
  });

最佳答案

echartPie1a.setOption(option);
echartPie1a.on('click', function (params) 
{window.open('' + encodeURIComponent(params.name) + '.html', '_self');
});

似乎已经成功了。

关于javascript - Echarts.js 库 - 使用饼图的 onclick 事件引用页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38243663/

相关文章:

javascript - 在设置 attr ('checked' 后检查是否选中复选框时,对象不支持 IE8 中的此属性或方法;

javascript - Google map Javascript API 无法在移动网站上运行

javascript - 使用echart为条形图(yAxis)提供多种颜色

highcharts - 如何获得世界各国主要城市的geojson

javascript - Redux Forms 提交验证不设置错误信息

javascript - 意外的 string.replace() 结果

javascript - 如何向 watson 对话响应添加操作?

javascript - Apache ECharts : Sankey colors

javascript - 动态添加数据和系列到 Echarts

javascript - 悬停散点图时显示变量名称