在 ECharts 中,你可以通过事件监听和配置项来实现在点击曲线时隐藏该曲线,并自定义交互效果。以下是一个详细的步骤和示例,帮助你实现这一功能。
1. 准备工作
首先,确保你已经引入了 ECharts 库。你可以从 ECharts 的官方网站下载或使用 CDN 链接。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
2. 创建图表
创建一个基本的 ECharts 图表,例如折线图。
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option);
3. 监听点击事件
通过 myChart.on 方法监听 click 事件。
myChart.on('click', function (params) {
// params.dataIndex 是点击的数据索引
var dataIndex = params.dataIndex;
var seriesIndex = params.seriesIndex;
var series = option.series[seriesIndex];
// 切换显示状态
series.show = !series.show;
// 重新渲染图表
myChart.setOption(option);
});
4. 自定义交互效果
你可以通过修改 series 配置项来自定义交互效果。以下是一些示例:
4.1 改变颜色
series.itemStyle = {
color: '#ff0000' // 红色
};
4.2 添加阴影
series.itemStyle = {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
shadowOffsetX: 5
};
4.3 添加标记
series.markPoint = {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
};
5. 完整示例
以下是完整的示例代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
itemStyle: {
color: '#ff0000' // 红色
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};
myChart.setOption(option);
myChart.on('click', function (params) {
var dataIndex = params.dataIndex;
var seriesIndex = params.seriesIndex;
var series = option.series[seriesIndex];
series.show = !series.show;
myChart.setOption(option);
});
</script>
</body>
</html>
通过以上步骤,你可以在 ECharts 中实现点击曲线隐藏并自定义交互效果。希望这个示例能帮助你解决问题!
