Skip to main content
 首页 » 编程设计

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

2022年07月19日26haluo1

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, 61.0], 
                    [160.7, 69.1], 
                    [163.2, 55.9], 
                    [152.4, 46.5], 
                    [157.5, 54.3], 
                    [168.3, 54.8], 
                    [180.3, 60.7], 
                    [165.5, 60.0], 
                    [165.0, 62.0], 
                    [164.5, 60.3], 
                    [156.0, 52.7], 
                    [160.0, 74.3], 
                    [163.0, 62.0], 
                    [165.7, 73.1], 
                    [161.0, 80.0], 
                    [162.0, 54.7], 
                    [166.0, 53.2], 
                    [174.0, 75.7], 
                    [172.7, 61.1], 
                    [167.6, 55.7], 
                    [151.1, 48.7], 
                    [164.5, 52.3], 
                    [163.5, 50.0], 
                    [152.0, 59.3], 
                    [169.0, 62.5], 
                    [164.0, 55.7], 
                    [161.2, 54.8], 
                    [155.0, 45.9], 
                    [170.0, 70.6], 
                    [176.2, 67.2], 
                    [170.0, 69.4], 
                    [162.5, 58.2], 
                    [170.3, 64.8], 
                    [164.1, 71.6], 
                    [169.5, 52.8], 
                    [163.2, 59.8], 
                    [154.5, 49.0], 
                    [159.8, 50.0], 
                    [173.2, 69.2], 
                    [170.0, 55.9], 
                    [161.4, 63.4], 
                    [169.0, 58.2], 
                    [166.2, 58.6], 
                    [159.4, 45.7], 
                    [162.5, 52.2], 
                    [159.0, 48.6], 
                    [162.8, 57.8], 
                    [159.0, 55.6], 
                    [179.8, 66.8], 
                    [162.9, 59.4], 
                    [161.0, 53.6], 
                    [151.1, 73.2], 
                    [168.2, 53.4], 
                    [168.9, 69.0], 
                    [173.2, 58.4], 
                    [171.8, 56.2], 
                    [178.0, 70.6], 
                    [164.3, 59.8], 
                    [163.0, 72.0], 
                    [168.5, 65.2], 
                    [166.8, 56.6], 
                    [172.7, 105.2], 
                    [163.5, 51.8], 
                    [169.4, 63.4], 
                    [167.8, 59.0], 
                    [159.5, 47.6], 
                    [167.6, 63.0], 
                    [161.2, 55.2], 
                    [160.0, 45.0], 
                    [163.2, 54.0], 
                    [162.2, 50.2], 
                    [161.3, 60.2], 
                    [149.5, 44.8], 
                    [157.5, 58.8], 
                    [163.2, 56.4], 
                    [172.7, 62.0], 
                    [155.0, 49.2], 
                    [156.5, 67.2], 
                    [164.0, 53.8], 
                    [160.9, 54.4], 
                    [162.8, 58.0], 
                    [167.0, 59.8], 
                    [160.0, 54.8], 
                    [160.0, 43.2], 
                    [168.9, 60.5], 
                    [158.2, 46.4], 
                    [156.0, 64.4], 
                    [160.0, 48.8], 
                    [167.1, 62.2], 
                    [158.0, 55.5], 
                    [167.6, 57.8], 
                    [156.0, 54.6], 
                    [162.1, 59.2], 
                    [173.4, 52.7], 
                    [159.8, 53.2], 
                    [170.5, 64.5], 
                    [159.2, 51.8], 
                    [157.5, 56.0], 
                    [161.3, 63.6], 
                    [162.6, 63.2], 
                    [160.0, 59.5], 
                    [168.9, 56.8], 
                    [165.1, 64.1], 
                    [162.6, 50.0], 
                    [165.1, 72.3], 
                    [166.4, 55.0], 
                    [160.0, 55.9], 
                    [152.4, 60.4], 
                    [170.2, 69.1], 
                    [162.6, 84.5], 
                    [170.2, 55.9], 
                    [158.8, 55.5], 
                    [172.7, 69.5], 
                    [167.6, 76.4], 
                    [162.6, 61.4], 
                    [167.6, 65.9], 
                    [156.2, 58.6], 
                    [175.2, 66.8], 
                    [172.1, 56.6], 
                    [162.6, 58.6], 
                    [160.0, 55.9], 
                    [165.1, 59.1], 
                    [182.9, 81.8], 
                    [166.4, 70.7], 
                    [165.1, 56.8], 
                    [177.8, 60.0], 
                    [165.1, 58.2], 
                    [175.3, 72.7], 
                    [154.9, 54.1], 
                    [158.8, 49.1], 
                    [172.7, 75.9], 
                    [168.9, 55.0], 
                    [161.3, 57.3], 
                    [167.6, 55.0], 
                    [165.1, 65.5], 
                    [175.3, 65.5], 
                    [157.5, 48.6], 
                    [163.8, 58.6], 
                    [167.6, 63.6], 
                    [165.1, 55.2], 
                    [165.1, 62.7], 
                    [168.9, 56.6], 
                    [162.6, 53.9], 
                    [164.5, 63.2], 
                    [176.5, 73.6], 
                    [168.9, 62.0], 
                    [175.3, 63.6], 
                    [159.4, 53.2], 
                    [160.0, 53.4], 
                    [170.2, 55.0], 
                    [162.6, 70.5], 
                    [167.6, 54.5], 
                    [162.6, 54.5], 
                    [160.7, 55.9], 
                    [160.0, 59.0], 
                    [157.5, 63.6], 
                    [162.6, 54.5], 
                    [152.4, 47.3], 
                    [170.2, 67.7], 
                    [165.1, 80.9], 
                    [172.7, 70.5], 
                    [165.1, 60.9], 
                    [170.2, 63.6], 
                    [170.2, 54.5], 
                    [170.2, 59.1], 
                    [161.3, 70.5], 
                    [167.6, 52.7], 
                    [167.6, 62.7], 
                    [165.1, 86.3], 
                    [162.6, 66.4], 
                    [152.4, 67.3], 
                    [168.9, 63.0], 
                    [170.2, 73.6], 
                    [175.2, 62.3], 
                    [175.2, 57.7], 
                    [160.0, 55.4], 
                    [165.1, 104.1], 
                    [174.0, 55.5], 
                    [170.2, 77.3], 
                    [160.0, 80.5], 
                    [167.6, 64.5], 
                    [167.6, 72.3], 
                    [167.6, 61.4], 
                    [154.9, 58.2], 
                    [162.6, 81.8], 
                    [175.3, 63.6], 
                    [171.4, 53.4], 
                    [157.5, 54.5], 
                    [165.1, 53.6], 
                    [160.0, 60.0], 
                    [174.0, 73.6], 
                    [162.6, 61.4], 
                    [174.0, 55.5], 
                    [162.6, 63.6], 
                    [161.3, 60.9], 
                    [156.2, 60.0], 
                    [149.9, 46.8], 
                    [169.5, 57.3], 
                    [160.0, 64.1], 
                    [175.3, 63.6], 
                    [169.5, 67.3], 
                    [160.0, 75.5], 
                    [172.7, 68.2], 
                    [162.6, 61.4], 
                    [157.5, 76.8], 
                    [176.5, 71.8], 
                    [164.4, 55.5], 
                    [160.7, 48.6], 
                    [174.0, 66.4], 
                    [163.8, 67.3] 
                ], 
                markPoint: { 
                    data: [{ 
                        type: 'max', 
                        name: '最大值' 
                    }, { 
                        type: 'min', 
                        name: '最小值' 
                    }] 
                }, 
                markLine: { 
                    data: [{ 
                        type: 'average', 
                        name: '平均值' 
                    }] 
                } 
            }, { 
                name: '男性', 
                type: 'scatter', 
                data: [ 
                    [174.0, 65.6], 
                    [175.3, 71.8], 
                    [193.5, 80.7], 
                    [186.5, 72.6], 
                    [187.2, 78.8], 
                    [181.5, 74.8], 
                    [184.0, 86.4], 
                    [184.5, 78.4], 
                    [175.0, 62.0], 
                    [184.0, 81.6], 
                    [180.0, 76.6], 
                    [177.8, 83.6], 
                    [192.0, 90.0], 
                    [176.0, 74.6], 
                    [174.0, 71.0], 
                    [184.0, 79.6], 
                    [192.7, 93.8], 
                    [171.5, 70.0], 
                    [173.0, 72.4], 
                    [176.0, 85.9], 
                    [176.0, 78.8], 
                    [180.5, 77.8], 
                    [172.7, 66.2], 
                    [176.0, 86.4], 
                    [173.5, 81.8], 
                    [178.0, 89.6], 
                    [180.3, 82.8], 
                    [180.3, 76.4], 
                    [164.5, 63.2], 
                    [173.0, 60.9], 
                    [183.5, 74.8], 
                    [175.5, 70.0], 
                    [188.0, 72.4], 
                    [189.2, 84.1], 
                    [172.8, 69.1], 
                    [170.0, 59.5], 
                    [182.0, 67.2], 
                    [170.0, 61.3], 
                    [177.8, 68.6], 
                    [184.2, 80.1], 
                    [186.7, 87.8], 
                    [171.4, 84.7], 
                    [172.7, 73.4], 
                    [175.3, 72.1], 
                    [180.3, 82.6], 
                    [182.9, 88.7], 
                    [188.0, 84.1], 
                    [177.2, 94.1], 
                    [172.1, 74.9], 
                    [167.0, 59.1], 
                    [169.5, 75.6], 
                    [174.0, 86.2], 
                    [172.7, 75.3], 
                    [182.2, 87.1], 
                    [164.1, 55.2], 
                    [163.0, 57.0], 
                    [171.5, 61.4], 
                    [184.2, 76.8], 
                    [174.0, 86.8], 
                    [174.0, 72.2], 
                    [177.0, 71.6], 
                    [186.0, 84.8], 
                    [167.0, 68.2], 
                    [171.8, 66.1], 
                    [182.0, 72.0], 
                    [167.0, 64.6], 
                    [177.8, 74.8], 
                    [164.5, 70.0], 
                    [192.0, 101.6], 
                    [175.5, 63.2], 
                    [171.2, 79.1], 
                    [181.6, 78.9], 
                    [167.4, 67.7], 
                    [181.1, 66.0], 
                    [177.0, 68.2], 
                    [174.5, 63.9], 
                    [177.5, 72.0], 
                    [170.5, 56.8], 
                    [182.4, 74.5], 
                    [197.1, 90.9], 
                    [180.1, 93.0], 
                    [175.5, 80.9], 
                    [180.6, 72.7], 
                    [184.4, 68.0], 
                    [175.5, 70.9], 
                    [180.6, 72.5], 
                    [177.0, 72.5], 
                    [177.1, 83.4], 
                    [181.6, 75.5], 
                    [176.5, 73.0], 
                    [175.0, 70.2], 
                    [174.0, 73.4], 
                    [165.1, 70.5], 
                    [177.0, 68.9], 
                    [192.0, 102.3], 
                    [176.5, 68.4], 
                    [169.4, 65.9], 
                    [182.1, 75.7], 
                    [179.8, 84.5], 
                    [175.3, 87.7], 
                    [184.9, 86.4], 
                    [177.3, 73.2], 
                    [167.4, 53.9], 
                    [178.1, 72.0], 
                    [168.9, 55.5], 
                    [157.2, 58.4], 
                    [180.3, 83.2], 
                    [170.2, 72.7], 
                    [177.8, 64.1], 
                    [172.7, 72.3], 
                    [165.1, 65.0], 
                    [186.7, 86.4], 
                    [165.1, 65.0], 
                    [174.0, 88.6], 
                    [175.3, 84.1], 
                    [185.4, 66.8], 
                    [177.8, 75.5], 
                    [180.3, 93.2], 
                    [180.3, 82.7], 
                    [177.8, 58.0], 
                    [177.8, 79.5], 
                    [177.8, 78.6], 
                    [177.8, 71.8], 
                    [177.8, 116.4], 
                    [163.8, 72.2], 
                    [188.0, 83.6], 
                    [198.1, 85.5], 
                    [175.3, 90.9], 
                    [166.4, 85.9], 
                    [190.5, 89.1], 
                    [166.4, 75.0], 
                    [177.8, 77.7], 
                    [179.7, 86.4], 
                    [172.7, 90.9], 
                    [190.5, 73.6], 
                    [185.4, 76.4], 
                    [168.9, 69.1], 
                    [167.6, 84.5], 
                    [175.3, 64.5], 
                    [170.2, 69.1], 
                    [190.5, 108.6], 
                    [177.8, 86.4], 
                    [190.5, 80.9], 
                    [177.8, 87.7], 
                    [184.2, 94.5], 
                    [176.5, 80.2], 
                    [177.8, 72.0], 
                    [180.3, 71.4], 
                    [171.4, 72.7], 
                    [172.7, 84.1], 
                    [172.7, 76.8], 
                    [177.8, 63.6], 
                    [177.8, 80.9], 
                    [182.9, 80.9], 
                    [170.2, 85.5], 
                    [167.6, 68.6], 
                    [175.3, 67.7], 
                    [165.1, 66.4], 
                    [185.4, 102.3], 
                    [181.6, 70.5], 
                    [172.7, 95.9], 
                    [190.5, 84.1], 
                    [179.1, 87.3], 
                    [175.3, 71.8], 
                    [170.2, 65.9], 
                    [193.0, 95.9], 
                    [171.4, 91.4], 
                    [177.8, 81.8], 
                    [177.8, 96.8], 
                    [167.6, 69.1], 
                    [167.6, 82.7], 
                    [180.3, 75.5], 
                    [182.9, 79.5], 
                    [176.5, 73.6], 
                    [186.7, 91.8], 
                    [188.0, 84.1], 
                    [188.0, 85.9], 
                    [177.8, 81.8], 
                    [174.0, 82.5], 
                    [177.8, 80.5], 
                    [171.4, 70.0], 
                    [185.4, 81.8], 
                    [185.4, 84.1], 
                    [188.0, 90.5], 
                    [188.0, 91.4], 
                    [182.9, 89.1], 
                    [176.5, 85.0], 
                    [175.3, 69.1], 
                    [175.3, 73.6], 
                    [188.0, 80.5], 
                    [188.0, 82.7], 
                    [175.3, 86.4], 
                    [170.5, 67.7], 
                    [179.1, 92.7], 
                    [177.8, 93.6], 
                    [175.3, 70.9], 
                    [182.9, 75.0], 
                    [170.8, 93.2], 
                    [188.0, 93.2], 
                    [180.3, 77.7], 
                    [177.8, 61.4], 
                    [185.4, 94.1], 
                    [168.9, 75.0], 
                    [185.4, 83.6], 
                    [180.3, 85.5], 
                    [174.0, 73.9], 
                    [167.6, 66.8], 
                    [182.9, 87.3], 
                    [160.0, 72.3], 
                    [180.3, 88.6], 
                    [167.6, 75.5], 
                    [186.7, 101.4], 
                    [175.3, 91.1], 
                    [175.3, 67.3], 
                    [175.9, 77.7], 
                    [175.3, 81.8], 
                    [179.1, 75.5], 
                    [181.6, 84.5], 
                    [177.8, 76.6], 
                    [182.9, 85.0], 
                    [177.8, 102.5], 
                    [184.2, 77.3], 
                    [179.1, 71.8], 
                    [176.5, 87.9], 
                    [188.0, 94.3], 
                    [174.0, 70.9], 
                    [167.6, 64.5], 
                    [170.2, 77.3], 
                    [167.6, 72.3], 
                    [188.0, 87.3], 
                    [174.0, 80.0], 
                    [176.5, 82.3], 
                    [180.3, 73.6], 
                    [167.6, 74.1], 
                    [188.0, 85.9], 
                    [180.3, 73.2], 
                    [167.6, 76.3], 
                    [183.0, 65.9], 
                    [183.0, 90.9], 
                    [179.1, 89.1], 
                    [170.2, 62.3], 
                    [177.8, 82.7], 
                    [179.1, 79.1], 
                    [190.5, 98.2], 
                    [177.8, 84.1], 
                    [180.3, 83.2], 
                    [180.3, 83.2] 
                ], 
                markPoint: { 
                    data: [{ 
                        type: 'max', 
                        name: '最大值' 
                    }, { 
                        type: 'min', 
                        name: '最小值' 
                    }] 
                }, 
                markLine: { 
                    data: [{ 
                        type: 'average', 
                        name: '平均值' 
                    }] 
                } 
            }] 
        }; 
         
        myChart.setOption(option); 
         
        //获取三个DOM元素 
        var sex = document.getElementById('sex'); 
        var height = document.getElementById('hight'); 
        var weight = document.getElementById('weight'); 
         
        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);         
    </script> 
 
</html>


本文参考链接:https://www.cnblogs.com/wgl1995/p/6281784.html