// 引入 ECharts 库
import echarts from 'echarts';
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('yourChartId'));
// 假设你有一些数据
var data = [
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30}
];
// 设置图表的配置项和数据
var option = {
series: [{
type: 'bar',
data: data
}]
};
// 使用设置好的配置项显示图表
myChart.setOption(option);
// 指定数据图形高亮
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: dataIndex
});
});
// 取消数据图形高亮
myChart.on('mouseout', function () {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
});
在上面的例子中,通过监听鼠标事件,当鼠标移动到图表的某个数据点时,使用 highlight 方法高亮该数据点,当鼠标移出时,使用 downplay 方法取消高亮效果。
请确保替换代码中的 yourChartId 为你实际使用的图表容器的 ID,并根据你的数据和图表类型进行相应的配置。这只是一个简单的例子,实际应用中可能需要根据具体情况进行更复杂的逻辑处理。
转载请注明出处:http://www.zyzy.cn/article/detail/5077/ECharts