Echarts 点击事件

不是很理解你的需求，可以明确的是echarts可以添加点击事件：

chart.on('click', function (params) {

    //do something

})

FYI。

我们在做echarts图表的时候经常会出现需要点击图表打开d窗或者打开新的页面，而如果图表是柱状图的话，可能会出现最大值和最小值差距过大的情况，比如普通的值大小都在1000上下，然后有几个值的大小只有个位数，这种情况下我们首先就需要将坐标轴指示器的type改为'shadow'，这样首先鼠标移入当前数据那一列就能选中并显示tooltip了，然后更进一步，我们想要点击坐标轴指示器的阴影区域从而获取当前列的内容该怎么做呢，这个时候我们就需要echarts内部的 getZr() 方法了。

由于我项目中使用的是 vue-echarts ，可以通过 @zr:click="xxx" 直接绑定zr事件

如果是常规流程的话就是使用echarts实例调用 getZr() ，最好是先解绑click事件

理论上来说直角坐标系里面的图都可以应用这个方法，只是说柱状图最有应用价值。

这个点是几个月前的项目里用到过的，现在写这篇文章找资料的时候发现了一篇不错的文章，里面介绍的挺详细，留作以后备用。 在Echarts区域的任何位置精准触发事件

script type="text/javascript" src="/doc/asset/js/jquery.js"></script>

<script src="/doc/asset/js/esl/esl.js" type="text/javascript"></script>

<h2>饼图-实现点击事件+提示框样式</h2><input type="button" value="请点击我" />

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="height:600pxwidth:800pxborder:1px solid #e1e1e1"></div>

<div id="main1" style="height:600pxwidth:800pxborder:1px solid #e1e1e1display:none"></div>

<script type="text/javascript">

$(document).ready(function () {

$("input").click(function () {

test1(1)

})

})

function test1(n) {

alert(n)

test()

}

function test() {

require.config({

paths: {

}

})

require(

[

'echarts',

'echarts/chart/pie',

'echarts/chart/map'

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'))

var myChart2 = ec.init(document.getElementById('main1'))

option = {

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)",

borderWidth: 1,

borderColor: 'red',

borderRadius: 4,

backgroundColor: '#f1f1f1',

textStyle: {

color: 'green',

fontFamily: 'Arial',

fontSize: 14

}

},

legend: {

orient: 'vertical',

x: 'left',

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

},

toolbox: {

show: true,

feature: {

mark: { show: true },

dataView: { show: true, readOnly: false },

restore: { show: true },

saveAsImage: { show: true }

}

},

calculable: true,

series: [

{

name: '访问来源',

type: 'pie',

radius: ['50%', '70%'],

itemStyle: {

normal: {

label: {

show: false

},

labelLine: {

show: false

}

},

emphasis: {

label: {

show: true,

position: 'center',

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

}

},

data: [

{ value: 335, name: '直接访问' },

{ value: 310, name: '邮件营销' },

{ value: 234, name: '联盟广告' },

{ value: 135, name: '视频广告' },

{ value: 1548, name: '搜索引擎' }

]

}

]

}

var ecConfig = require('echarts/config')

function eConsole(param) {

var str = param.name + ":" + param.value

alert(str)

$("#main1").css({ "display": "block" })

setTimeout(function(){test1(3)},200)

}

myChart.on(ecConfig.EVENT.CLICK, eConsole)

//myChart.on(ecConfig.EVENT.PIE_SELECTED, eConsole2)

myChart.setOption(option,true)

})

}

</script>

---