Echarts的鼠標點擊事件

最新推荐文章于 2024-09-04 17:35:50 发布

sunny.day

最新推荐文章于 2024-09-04 17:35:50 发布

阅读量654

点赞数

本文链接：https://blog.csdn.net/yang__k/article/details/81186133

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <script src="../vueIview/echarts.js"></script>
    <script src="../vueIview/jquery-3.3.1.min.js"></script>

</head>
<div id="main" style="width: 700px;height: 500px"></div>
<body>
<script>
    // 基于准备好的dom，初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            // 触发器
            trigger: 'item',
        },
        // 图片的保存，刷新，和数据
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                // 数据视图
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                // 刷新
                restore : {show: true},
                // 保存图片
                saveAsImage : {show: true}
            }
        },
        title:{
          text:'销售',
            x:'center'
        },
        legend:{
          data:["销量",'价格','单价'],
            // x轴方向的位置
            x: 'right '
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [50, 200, 306, 100, 100, 200]
            },
            {
                name: '价格',
                type: 'bar',
                data: [500, 2000, 3006, 1300, 3000, 2000]
            },
            {
                name: '单价',
                type: 'bar',
                data: [90, 200, 250, 130, 300, 10]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

    // 处理点击事件并且跳转到相应的百度搜索页面
    myChart.on('click', function (params) {
        // console.log(params)
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    });


    // 鼠标移动到上面
    // myChart.on('mouseover', function (params) {
    //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    // });

    // 鼠标移动
    // myChart.on('mousemove', function (params) {
    //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    // });

    // 根据params里面的属性可判断鼠标点在了哪里
    myChart.on('click',function (params) {
        if(params.componentType=='series'){
            console.log('点击了series上')
        }
    })
    

    //图例组件用户切换图例开关会触发legendselectchanged 事件
    myChart.on('legendselectchanged', function (params) {
        // 获取点击图例的选中状态
        var isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
    });

</script>
</body>
</html>