ECharts 绘制吉林省地图，并根据数值设置市区颜色（demo）

最新推荐文章于 2025-03-27 16:30:45 发布

生命不止,奋斗不息

最新推荐文章于 2025-03-27 16:30:45 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/wangkunggxx/article/details/125182585

版权

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过阿里云地图数据和Echarts库，获取并动态展示了吉林省各城市的地图数据，包括长春、吉林等，通过视觉映射和自定义颜色显示数据分布情况。

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

先看下效果图

1、如何获取地图数据

前往阿里云的地图数据获取需要的地图json

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.87755764334002&lng=104.150390625&zoom=3

打开的页面是这样子的，下载数据，一定要选框出的部分下载。否则可能会出现奇怪的bug

2、在html中，引入echarts.js ，关于echarts的资料如下

echarts 官方文档

https://echarts.apache.org/zh/option.html#title

echarts 的js文件获取地址

https://echarts.apache.org/zh/builder.html

引入jquery 和 echars.js

<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>

3、读取吉林省份地图json的数据，并加载到echarts

function getArea () {
    const myChart = echarts.init(document.getElementById('main'))

    var url = "js/jilin.json";
    $.get(url, null, function (ret) {
        let geoJson = ret;
   
        echarts.registerMap('jilin', ret)
        // 注册矢量地图数据
        var option = {
          visualMap: { // 视觉映射组件

            // type: 'continuous', 如果需要渐变色，设置type为连续
            show: true,
            // inverse: true, // 反转
            top: '70%',
            bottom: '0%',
            left: '2%',
            textStyle: {
              fontsize: 12
            },

            splitList: [ // 自定义范围
              { start: 0, end: 100 },
              { start: 100, end: 300 },
              { start: 300, end: 500 },
              { start: 500, end: 1000 },
              { start: 1000 }
            ],
            color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色
          },
          tooltip: { // 悬浮框
            trigger: 'item', // 触发条件
            backgroundColor: 'RGBA(136, 123, 135, 0.8)',
            formatter: '{b}<br/>占用数{c}', // 自定义显示数据
            textStyle: {
              color: '#ffffff'
            }
          },
          series: [
            {
              type: 'map',
              map: 'jilin',
              zoom: 1.2,
              top: '10%',
              x: 'center',
              label: {
                show: true // 显示               
              },
              itemStyle: {
                normal: { // 静态的时候显示的默认样式
                  areaColor: '#F3D7D9', // 地图颜色
                  borderColor: '#886364' // 边框颜色
                },
                emphasis: { // 鼠标移入动态的时候显示的默认样式
                  borderWidth: 2, // 边框宽度
                  areaColor: '#ffffff' // 地图颜色
                }
              },
              // 数据
              data: [
                {
                  name: '长春市',
                  value: '1202'
                },
                {
                  name: '吉林市',
                  value: '396'
                },
                {
                  name: '通化市',
                  value: '1125'
                },
                {
                  name: '四平市',
                  value: '635'
                },
                {
                  name: '白山市',
                  value: '586'
                },
                {
                  name: '辽源市',
                  value: '360'
                },
                {
                  name: '白城市',
                  value: '231'
                },
                {
                  name: '延边朝鲜族自治州',
                  value: '196'
                },
                {
                  name: '松原市',
                  value: '80'
                }
              ]
            }
 
          ]
        }
        myChart.setOption(option)
      })
    }