angularjs - 使 x 轴值在 eCharts 中可单击
解决方案
是的,您所需要的只是喜欢添加事件处理程序。
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>
推荐阅读
- flutter - Flutter Sliver:带有 SliverFillRemaining 的 TabBarView 上的问题
- database - 如何使用 Laravel 关系创建表?
- python - 从 tf.data 中随机抽取 2000 个元素
- c++ - 使用 Media Foundation UWP C++ 提供自定义频道矩阵
- c - 如何使用 MPI 广播发送两个值而不会出现错误 11?
- security - 安全漏洞 XSS Dom based
- sql - 选择所有数据时sql server删除
- reactjs - 将代码推送到 github main,但 github 页面只有基本的 create-react-app
- rabbitmq - 在 RabbitMQ 中一次只处理一个项目基于一个键
- html - 背景图片开启
- 成为背景而不是成为列表项目符号