Apache Echarts实现矢量地图

最新推荐文章于 2024-08-14 19:18:20 发布

diviner_s

最新推荐文章于 2024-08-14 19:18:20 发布

阅读量3k

点赞数 4

分类专栏：数据可视化_Echarts 文章标签：数据可视化 echarts javascript

本文链接：https://blog.csdn.net/diviner_s/article/details/116019747

版权

本文介绍了如何在Echarts中实现矢量地图，包括地图图表的使用方式、实验步骤、常见配置和效果展示。详细讲解了加载地图数据、配置地图属性以及创建不同城市颜色的地图和地图与散点图的结合应用。

摘要由CSDN通过智能技术生成

文章目录

Echarts常用图表

Echarts常用图表

每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！
各类常用图表总结在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html

1. 地图图表的使用方式

矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据

2.矢量地图的实验步骤

1.先上Echarts经典基本代码框架~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script> 
</head>
<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {
   }
        mCharts.setOption(option)
    </script>
</body>
</html>

此时option对象是空的。

2.准备中国的矢量地图json文件，放到json/map/目录之下：
在这里插入图片描述

3.使用Ajax获取china.json

$.get('json/map/china.json',function (chinaJson) {
   
            
})

4.在Ajax的回调函数中，往echarts全局对象注册地图的json数据
echarts.registerMap('chinaMap',chinaJson)

$.get('json/map/china.json',function (chinaJson) {
   
            echarts.registerMap('chinaMap', chinaJson)
})

5.获取完数据之后，需要配置geo节点，再次的setOption
type:'map'
map : 'chinaMap'

        $.get('json/map/china.json',function (chinaJson) {
   
            echarts.registerMap('chinaMap', chinaJson)
            var option = {
   
                geo:{
   
                    type: 'map',  // map是一个固定的值
                    map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                }
            }
            mCharts.setOption(option)
        })

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        $.get('json/map/china.json',function (chinaJson) {
   
            echarts.registerMap('chinaMap', chinaJson)
            var option = {
   
                geo:{
   
                    type: 'map',  // map是一个固定的值
                    map: 'chinaMap' // chinaMap需要和registerMap中的第一个参数保持一致
                }
            }
            mCharts.setOption(option)
        })
    </script>
</body>
</html>

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应
该将其置于 HTTP 的服务之下方可正常展示地图

3.矢量地图的常见配置

缩放拖动：roam
在geo下：roam: true表示可以使用鼠标进行拖动和缩放
名称显示：label
label下show:true
初始缩放比例：zoom
地图中心点：center

 var option = {
   
        geo: {
   
          type: 'map',// map是一个固定的值
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          lab