echarts地图绘制

前提
1、需要引入echarts.js(echarts.min.js) 和 china.js
2、需要有一个有宽高的dom容器来放置地图

---

1、简单的地图绘制

1.1代码实现

(function () {
   
    //1、实例化对象
    var myChart = echarts.init(document.querySelector(".map .chart"))

    var option = {
   
        //设置标题
        title: {
   
            text: '地图绘制',  // 主标题名称
            textStyle: {
   
                color: '#bce2e8',
                fontStyle: 'oblique',       //斜体
                fontFamily: 'monospace',    //字体
            },
            top: 20,
            left: 20
        },

        // 地图配置
        geo: {
   
            map: "china",
            //放大地图
            zoom: 1.25,
            //开启漫游
            roam: true,
            //让其文字出现在外地图上
            label: {
   
                // 通常状态下的文字样式
                normal: {
   
                    show: true,
                    textStyle: {
   
                        color: "#fff",
                    },
                },
                // 鼠标放上去的样式
                emphasis: {
   
                    textStyle: {
   
                        color: "red",
                    },
                },
            },
            
            // 地图区域的样式设置
            itemStyle: {
   
                //配置正常状态下的样式
                normal: {
   
                    borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
                    borderWidth: 1, //设置地图区域边框的宽度
                    areaColor: {
       //设置地图区域的填充色 -> 渐变色
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
   
                                offset: 0,
                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            {
   
                                offset: 1,
                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    },
                },
                // 鼠标放上去高亮的样式（在鼠标悬停状态下）
                emphasis: {
   
                    areaColor: "#389BB7",
                    borderWidth: 0,
                },
            },
        },

    }

    //3、把配置项给实例对象
    myChart.setOption(option)
})()

1.2 代码讲解

这段代码是使用ECharts库来绘制一个地图，并设置地图的样式和配置。下面是代码的解释：

1. 首先，通过 echarts.init 方法实例化一个 ECharts 对象，并传入一个 DOM 元素作为容器。这个容器将用来展示地图。
2. 定义了一个 option 对象，用于配置地图的样式和行为。
3. 设置地图的标题，包括文本内容和样式。
4. 配置地图的基本属性，通过 geo 字段来设置。其中 map 属性指定了要使用的地图类型，这里是中国地图；zoom 属性设置地图的缩放级别；roam 属性开启了地图的漫游，可以通过鼠标拖拽和缩放来浏览地图；label 字段设置了地图区域上的标签样式，包括通常状态和鼠标悬停状态下的样式。
5. 设置地图区域的样式，通过 itemStyle 字段来配置。normal 属性设置了正常状态下的样式，包括边框颜色、边框宽度和填充色。填充色使用渐变色，从透明到某个颜色的渐变。emphasis 属性设置了鼠标悬停状态下的样式，包括区域颜色和边框宽度。
6. 最后，通过 myChart.setOption(option) 方法把配置项应用到实例对象，实现地图的绘制。

2、给地图加上标注

给地图加上标注只需要在series中添加：

1. coordinateSystem: "geo" → 使用地理坐标系进行展示，
2. type: "scatter"→设置为散点类型
3. data → 数据格式：其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
   例如：data: [{ name: “广东”, value: [113.23, 23.16, 12656.80] }]

2.1 代码演示

(function () {
   
    //1、实例化对象
    var myChart = echarts.init(document.querySelector(".map .chart"))

    var option = {
   
        //设置标题
        title: {
   
            text: '地图绘制',  // 主标题名称
            textStyle: {
   
                color: '#bce2e8',
                fontStyle: 'oblique',       //斜体
                fontFamily: 'monospace',    //字体
            },
            top: 20,
            left: 20
        },

        // 地图配置
        geo: {
   
            map: "china",
            //放大地图
            zoom: 1.25,
            //开启漫游
            roam: true,
            //让其文字出现在外地图上
            label: {
   
                // 通常状态下的文字样式
                normal: {
   
                    show: true,
                    textStyle: {
   
                        color: "#fff",
                    },
                },
                // 鼠标放上去的样式
                emphasis: {
   
                    textStyle: {
   
                        color: "red",
                    },
                },
            },
            
            // 地图区域的样式设置
            itemStyle: {
   
                //配置正常状态下的样式
                normal: {
   
                    borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
                    borderWidth: 1, //设置地图区域边框的宽度
                    areaColor: {
       //设置地图区域的填充色 -> 渐变色
                        type: "radial",