echarts的事件

最新推荐文章于 2024-04-03 16:23:48 发布

开水没有冬天

最新推荐文章于 2024-04-03 16:23:48 发布

阅读量1.6k

点赞数 1

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/90778140

版权

echarts 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了ECharts实例的各种操作方法，包括初始化、销毁、清空、改变尺寸、设置选项、显示和隐藏加载动画等。同时，深入探讨了ECharts中的事件监听，如click、legendselectchanged和datazoom事件，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

    myChart.dispose() // 销毁实例，销毁后实例无法再被使用。
    myChart.clear() // 清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。
    myChart.resize() // 改变图表尺寸，在容器大小发生改变时需要手动调用。
    myChart.setOption(this.options) // 初始化数据和动态增加数据点
    myChart.showLoading(); // 显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
    myChart.hideLoading(); // 隐藏动画加载效果。
    myChart.getDom(); // 获取 ECharts 实例容器的 dom 节点。
    myChart.getWidth(); // 获取 ECharts 实例容器的宽度。
    myChart.getHeight(); // 获取 ECharts 实例容器的高度。
    myChart.getOption() // 获取当前实例中维护的 option 对象

// 改变窗口大小的时候，自适应
window.addEventListener('resize',function(){
	console.log("resize执行了...")
	myChart.resize();
	 // that.myChart.setOption(option); // 不是重新setOption方法，而是 echarts自己的resize方法！！！
});

// click事件
myChart.on("click",function (params) {
    console.log(params);
})

// 图例事件
myChart.on("legendselectchanged",function (params) {
    console.log("图例的事件：",params);
})

// 缩放事件
myChart.on("datazoom",function (params) {
        console.log("缩放事件：",params);
    })

根据类型判断：componentType，seriesType，dataType。

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

app.currentIndex = -1;
alert(JSON.stringify(app))
setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

具体参考官网：https://echarts.baidu.com/tutorial.html#ECharts 中的事件和行为
==>events和action里面的事件都有小实例讲解！自己看一下吧