echarts柱状图如何让space around bar可以点击?
How to make space around bar clickable in echarts bar chart?
'click' 事件只有在恰好在栏内单击时才会触发。如果我们有一个宽度或高度较小的条形图,这就不方便了。当我将鼠标悬停在条形图上时,条形图周围的一些 space 以完整的图表高度突出显示,并显示工具提示。我想让突出显示的区域可点击,并且条形数据应该在事件中可用。我已经阅读了文档并尝试过
chart.on('click', 'xAxis.category', 函数 () {...});
但是没有触发该功能。
在此演示中,仅当我在栏内单击时才会触发警报。如何使周边区域可点击?
https://codesandbox.io/s/cocky-banzai-6j5pg?file=/src/Chart.js
确实,一般点击bar外的事件是收不到的,但是Echarts是成熟的框架,几乎任何事件都可以通过low-level对象zRender
接收。您需要使用 getZr()
访问 zRender
,然后将点击像素的坐标转换为图表坐标。在它之后,您将拥有系列数据点的索引,并且使用它来获取类别将很容易。
myChart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
console.log(category);
});
参见示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data: ['Label']
},
xAxis: {
data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
},
yAxis: {},
tooltip: {
trigger: "axis",
confine: true,
enterable: true,
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(255,0,0, 0.5)"
}
},
backgroundColor: "rgba(255,255,255,1)",
textStyle: {
color: "#6D6D70"
},
extraCssText: `box-shadow: 3px 6px 14px #cccccc61;border-radius: 10px;`
},
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
showBackground: true,
}]
};
myChart.setOption(option);
myChart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
console.log(category);
});
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
'click' 事件只有在恰好在栏内单击时才会触发。如果我们有一个宽度或高度较小的条形图,这就不方便了。当我将鼠标悬停在条形图上时,条形图周围的一些 space 以完整的图表高度突出显示,并显示工具提示。我想让突出显示的区域可点击,并且条形数据应该在事件中可用。我已经阅读了文档并尝试过 chart.on('click', 'xAxis.category', 函数 () {...}); 但是没有触发该功能。
在此演示中,仅当我在栏内单击时才会触发警报。如何使周边区域可点击?
https://codesandbox.io/s/cocky-banzai-6j5pg?file=/src/Chart.js
确实,一般点击bar外的事件是收不到的,但是Echarts是成熟的框架,几乎任何事件都可以通过low-level对象zRender
接收。您需要使用 getZr()
访问 zRender
,然后将点击像素的坐标转换为图表坐标。在它之后,您将拥有系列数据点的索引,并且使用它来获取类别将很容易。
myChart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
console.log(category);
});
参见示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data: ['Label']
},
xAxis: {
data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
},
yAxis: {},
tooltip: {
trigger: "axis",
confine: true,
enterable: true,
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(255,0,0, 0.5)"
}
},
backgroundColor: "rgba(255,255,255,1)",
textStyle: {
color: "#6D6D70"
},
extraCssText: `box-shadow: 3px 6px 14px #cccccc61;border-radius: 10px;`
},
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
showBackground: true,
}]
};
myChart.setOption(option);
myChart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
console.log(category);
});
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>