ECharts问题--散点图中对散点添加点击事件

最新推荐文章于 2024-08-29 11:24:43 发布

weixin_30402085

最新推荐文章于 2024-08-29 11:24:43 发布

阅读量3.7k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wgl1995/p/6281784.html

版权

本文介绍了如何为ECharts散点图的散点添加点击事件。由于图表绘制在canvas中，无法直接通过DOM操作获取散点，因此不能使用原生JavaScript的click事件。ECharts提供了方法来为图表元素添加点击事件。文中提到了在实现过程中遇到的require错误，这是由于直接通过标签引入ECharts而非模块化引入导致的。并提供了完整的代码示例和效果展示。

摘要由CSDN通过智能技术生成

1.　　我们这次就没有先讲解怎么使用散点图了，这个跟之前的一些图还是很类似的，不会的可以去官网上面查看 API 使用。我们这次讲解的是为散点图中的散点添加点击事件，然后在图表之外的一个 div 里面显示这个元素的一些属性，一开始我想的是使用原生 javascript 的click事件来操作，但是这个方法是不可行的，因为我们的图表是在 canvas 中的显示的，所以我们每个散点不是能够我们通过 DOM 操作来获取的，这里我们可以使用 ECharts 中的一个方法：使用下面的方法我们就可以为图表中的每个元素添加点击事件了。这里要说说明的是在官网的实例中我们看到的是下面的第一行代码跟官网的不一样，官网代码：var ecConfig = require('echarts/config'); ，如果我们这里的代码跟官网写一样的话就会报错：ReferenceError: require is not defined，这是因为我们在练习和实际的开发中很多时候是通过标签的形式引入的 echarts，这样不同于模块的引用（这里的实现是使用的 sea.js 中的 require() 方法来载入和引用模块，有兴趣的可以自己去了解一下）。

var ecConfig = echarts.config;
function eConsole(param){
    sex.innerText = param.seriesName;
    if(param.value.length > 1) {
        height.innerText = param.value[0]+'cm';
        weight.innerText = param.value[1]+'kg';
    } else {
        height.innerText = param.name+'cm';
        weight.innerText = param.value+'kg';
    }
}
        
//在这里做一个点击事件的监听，绑定的是eConsole方法
myChart.on(ecConfig.EVENT.CLICK, eConsole);

2.　　下面我们贴出所有的代码和显示图片：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/echarts-all.js"></script>
    </head>

    <body>
        <div id="main" style="width: 1200px;height:500px;"></div>
        <div>
            性别：<span id="sex">未知</span><br />
            身高：<span id="hight">未知</span><br />
            体重：<span id="weight">未知</span>
        </div>
    </body>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
    
        var option = {
            title: {
                text: '男性女性身高体重分布',
                subtext: '抽样调查来自: Heinz  2003'
            },
            tooltip: {
                trigger: 'axis',
                showDelay: 0,
                formatter: function(params) {
                    if(params.value.length > 1) {
                        return params.seriesName + ' :<br/>' +
                            params.value[0] + 'cm ' +
                            params.value[1] + 'kg ';
                    } else {
                        return params.seriesName + ' :<br/>' +
                            params.name + ' : ' +
                            params.value + 'kg ';
                    }
                },
                axisPointer: {
                    show: true,
                    type: 'cross',
                    lineStyle: {
                        type: 'dashed',
                        width: 1
                    }
                }
            },
            legend: {
                data: ['女性', '男性']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataZoom: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            xAxis: [{
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} cm'
                }
            }],
            yAxis: [{
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} kg'
                }
            }],
            series: [{
                name: '女性',
                type: 'scatter',
                data: [
                    [161.2, 51.6],
                    [167.5, 59.0],
                    [159.5, 49.2],
                    [157.0, 63.0],
                    [155.8, 53.6],
                    [170.0, 59.0],
                    [159.1, 47.6],
                    [166.0, 69.8],
                    [176.2, 66.8],
                    [160.2, 75.2],
                    [172.5, 55.2],
                    [170.9, 54.2],
                    [172.9, 62.5],
                    [153.4, 42.0],
                    [160.0, 50.0],
                    [147.2, 49.8],
                    [168.2, 49.2],
                    [175.0, 73.2],
                    [157.0, 47.8],
                    [167.6, 68.8],
                    [159.5, 50.6],
                    [175.0, 82.5],
                    [166.8, 57.2],
                    [176.5, 87.8],
                    [170.2, 72.8],
                    [174.0, 54.5],
                    [173.0, 59.8],
                    [179.9, 67.3],
                    [170.5, 67.8],
                    [160.0, 47.0],
                    [154.4, 46.2],
                    [162.0, 55.0],
                    [176.5, 83.0],
                    [160.0, 54.4],
                    [152.0, 45.8],
                    [162.1, 53.6],
                    [170.0, 73.2],
                    [160.2, 52.1],
                    [161.3, 67.9],
                    [166.4, 56.6],
                    [168.9, 62.3],
                    [163.8, 58.5],
                    [167.6, 54.5],
                    [160.0, 50.2],
                    [161.3, 60.3],
                    [167.6, 58.3],
                    [165.1, 56.2],
                    [160.0, 50.2],
                    [170.0, 72.9],
                    [157.5, 59.8],
                    [167.6,