【ECharts】ECharts实现地图散点图

最新推荐文章于 2024-05-24 09:50:34 发布

richest_qi

最新推荐文章于 2024-05-24 09:50:34 发布

阅读量9.2k

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/109219969

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="map-wrap" style="height:600px;"></div>
    <script src="./index.js"></script>
</body>
</html>

// index.js
window.onload = function(){
    const XHR = new XMLHttpRequest();
    XHR.open("get","./map/china.json",true);
    XHR.onload = function(){
        const jsonData = XHR.response;
        echarts.registerMap("china",jsonData);
        var mapChart = echarts.init(document.getElementById('map-wrap'));
        var option = {
            geo:{
                id:"china",
                map:"china",
                show:true,
                roam:"scale",
                center:[116.46,39.92],
                scaleLimit:{
                    min:0.5,
                    max:1
                },
                emphasis:{
                    itemStyle:{
                        areaColor:"#0ff",
                        borderColor:"#f00"
                    }
                }
            },
            series:[
                {
                    type:"scatter",
                    name:"地图demo(城市空气质量)",
                    coordinateSystem:"geo",
                    data:[
                        {name:"北京", value:[116.46,39.92,340]},
                        {name:"上海", value:[121.48,31.22,100]},
                        {name:"深圳", value:[114.07,22.62,200]},
                        {name:"广州", value:[113.23,23.16,150]}
                    ]
                }
            ],
            tooltip:{
                trigger:"item"
            }
        }
        mapChart.setOption(option);
    }
    XHR.send(); 
}

在这里插入图片描述

geo
地理坐标系组件，用于地图绘制
- id
  组件ID
- show
  布尔值，是否显示地理坐标系组件
- map
  地图类型
- roam
  是否开启鼠标缩放和平移漫游，默认不开启
  有以下三个值可选，其中，
  "scale"，开启缩放；
  "move"，开启平移;
  true，缩放、平移都开启。
- center
  当前视角的中心点，用经纬度表示
- zoom
  当前视角的缩放比例
- scaleLimit
  滚轮缩放的极限控制
  - min，最小缩放值
  - max，最大缩放值
- label
  图形上的文本标签，用来说明图形的一些数据信息
  - show
    布尔值，是否显示标签
  - position
    标签的位置，其值可以是一个关键字，也可以是一个数组。
    - 是一个关键字，如top|left|right|bottom|inside|insideLeft等
    - 是一个数组，如[10,10]，标签相对于图形包围盒左上角的绝对像素值
    - 是一个数组，如['50%','50%']，标签相对于图形包围盒左上角的相对百分比
  - rotate
    标签旋转角度，是一个整数，取值范围[-90,90]，正值逆时针旋转，负值顺时针旋转。
  - offfset
    标签文本是否进行偏移，默认不偏移。
    比如[30,40]，则表示文本横线偏移30，纵向偏移40.
  - formatter
- itemStyle
  地图中多边形的图形样式
  - areaColor
    地图区域的颜色
  - borderColor
    地图区域的描边颜色
- emphasis
  高亮状态下的标签和多边形样式
  - label
  - itemStyle
series
- type
  type值为scatter，实现散点图
- id
- name
  系列名称
- coordinateSystem
  该系列使用的坐标系。
  coordinateSystem:"geo"，使用地理坐标系。
- data
  该系列的数据内容
tooltip
提示框组件
- show
  布尔值，是否显示提示框
- trigger
  有以下三个值可选，其中，
  "item"，数据项图形触发，主要用在散点图、饼图等图表中；
  "axis"，坐标轴触发，主要用在柱状图、折线图等图表中；
  "none"，不触发，即任何时候都不显示提示框。
- formatter
  提示框浮层内容格式器，有两种方式：字符串模板和回调函数。
  本例中，我们用回调函数试试。
```
tooltip:{
    trigger:"item",
    formatter:function(params){
    	console.log(params);
        const name = params.data.name;
        const value = params.data.value[2];
        return `<div>${name}：${value}</div>`
    }
}
```
参考文档
geo(地图)的配置
series-scatter(散点图)的配置
ECharts实现地图散点图
散点图实例

richest_qi

关注

7
点赞
踩
56

收藏

觉得还不错? 一键收藏
7
评论
【ECharts】ECharts实现地图散点图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4
复制链接

扫一扫