在 eCharts 中使 x 轴值可点击
Make the x-axis values clickable in eCharts
我正在为我的项目使用 eCharts,需要让它们可点击,以便我可以从那里调用函数。有什么办法吗?
在上图中,我应该可以点击 X 轴中的任何 RTVP... 数字来触发功能。
是的,您所需要的只是爱来添加事件处理程序。
myChart.on('click', 'series', (e) => {
console.log(e);
})
查看实例:
var myChart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
data: [79, 52, 200, 334, 390, 330, 220],
color: 'steelBlue'
}]
};
myChart.setOption(option);
// Here you can exec any function under handler,
// OR
// _
myChart.on('click', 'series', (e) => {
console.log(e.name)
})
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>
我正在为我的项目使用 eCharts,需要让它们可点击,以便我可以从那里调用函数。有什么办法吗?
在上图中,我应该可以点击 X 轴中的任何 RTVP... 数字来触发功能。
是的,您所需要的只是爱来添加事件处理程序。
myChart.on('click', 'series', (e) => {
console.log(e);
})
查看实例:
var myChart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
data: [79, 52, 200, 334, 390, 330, 220],
color: 'steelBlue'
}]
};
myChart.setOption(option);
// Here you can exec any function under handler,
// OR
// _
myChart.on('click', 'series', (e) => {
console.log(e.name)
})
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>