Echarts数据可视化第11章 Echarts高级功能 11.4 事件与行为

た入场券 2024-03-25 20:46 62阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第11章 Echarts高级功能
         *   *  11.4 事件与行为

> Echarts数据可视化：入门、实战与进阶

#### 第11章 Echarts高级功能 ####

##### 11.4 事件与行为 #####

在Echarts 中，最常见的事件主要是与鼠标相关的事件，当用户去分析一张可视化图时，主要是通过鼠标交互。

举个栗子，实现一个饼图，当鼠标点击其中的商品饼块时，就打开新的页面并在百度搜索引擎中搜索该商品。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
          
            title: {
          
                text: '各商品销量占比',
                subtext: 'A商场情况分析',
                left: 'center'
            },
            tooltip: {
          
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
          
                orient: 'vertical',
                left: 'left',
                data: ['足球', '篮球', '羽毛球', '排球', '乒乓球']
            },
            series: [
                {
          
                    name: '所售商品',
                    type: 'pie',
                    data: [
                        {
          value: 343, name: '足球'},
                        {
          value: 250, name: '篮球'},
                        {
          value: 509, name: '羽毛球'},
                        {
          value: 108, name: '排球'},
                        {
          value: 948, name: '乒乓球'}
                    ],
                }
            ]
        };
        myChart.setOption(option);
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function (params) {
          
            window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });
    </script>
    </body>
    </html>

浏览器渲染效果

![在这里插入图片描述][d71b7e9c977a4f1ca207fe8655a4a074.gif_pic_center]

OK， 就这样。

当然事件还有很多可以设置的，可参考官方文档：[https://echarts.apache.org/handbook/zh/concepts/event][https_echarts.apache.org_handbook_zh_concepts_event]

![在这里插入图片描述][b826a39f6dbd4b64965628ff15b88c4d.png_pic_center]

[d71b7e9c977a4f1ca207fe8655a4a074.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0db20abef0a248ff94267304c0fc3008.png
[https_echarts.apache.org_handbook_zh_concepts_event]: https://echarts.apache.org/handbook/zh/concepts/event
[b826a39f6dbd4b64965628ff15b88c4d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f1391edd33394441b31908e52dcced03.png