ECharts-散点图入门demo-effectScatter-动态修改数据

最新推荐文章于 2025-06-05 09:14:02 发布

cs_gogoing

最新推荐文章于 2025-06-05 09:14:02 发布

阅读量1.5w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.csdn.net/kobedir/article/details/89349931

本文通过一个ECharts散点图入门示例，详细介绍了如何初始化图表、定义初始化选项以及如何动态修改数据。通过监听layui的下拉框事件，实现散点图中心点数据的实时更新，强调了`echartsInstance.setOption`在数据更新中的关键作用。

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

学习什么框架最简单的方式就是官网提供的例子，我这里也是拷贝一个官网的例子进行改造

百度ECharts散点图例子

可以在右下角的位置直接把当前的demo下载下来进行修改（记得修改自己的AK）

1、初始化

初始化比较简单，定义一个div，然后使用JS对其进行初始化

<div id="container" style="height: 100%"></div>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
</script>

但是上面的几行代码是什么都不会显示的。你还需要对散点图进行配置：

2、定义一个初始化用到的option，以及option的介绍，我这里定义的有点粗糙，大家可以根据情况抽取些常用的出来定义为全局

    option = {
        title: {
            text: '全国主要城市空气质量 - 百度地图',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            left: 'center'
        },
        //鼠标 提示
        tooltip: {
        //         trigger：触发类型。
        // 可选：
        // 'item'
        // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        // 'axis'
        // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        // 在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
        // 'none'
        // 什么都不触发。
            trigger: 'item',
            // 格式化显示的数据
            formatter: function (params, ticket, callback) {
                return params.data.name + ":" + params.value[2];
            }
        },
        bmap: {
            // 地图中心点
            center: ["113.2708136740", "23.1351666766"],
            // 方法倍数
            zoom: 12,
            roam: true,
            //地图样式，比如将水变成什么样式，陆地又变成什么样式
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series: [
            {
                name: 'pm2.56'