ECharts常用图表地图

黑马程序员官方

已于 2022-12-12 14:45:57 修改

阅读量1.2k

点赞数 1

分类专栏： 2023年前端—入门到精通文章标签： echarts 前端 javascript 前端自学

于 2022-12-09 15:11:26 首次发布

本文链接：https://blog.csdn.net/itcast_cn/article/details/128252898

版权

2023年前端—入门到精通专栏收录该内容

323 篇文章 239 订阅

订阅专栏

1.图表5 地图

1.1.地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak

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

接下来的实现是通过矢量图的方式来实现的

1.2.矢量地图的实现步骤

步骤1 ECharts 最基本的代码结构

此时 option 是一个空空如也的对象

步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下

步骤3 使用 Ajax 获取 china.json

$ . get ( 'json/map/china.json' , f unction ( 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'

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

1.3.地图的常见配置

缩放拖动: roam

名称显示: label

初始缩放比例: zoom
地图中心点: center

1.4.地图的常见效果

显示某个区域

准备安徽省的矢量地图数据

加载安徽省地图的矢量数据

$ . get ( 'json/map/anhui.json' , function ( anhuiJson ) {

})

在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('anhui', anhuiJson)
配置 geo 的 type:'map' , map:'anhui'
通过 zoom 调整缩放比例
通过 center 调整中心点

< script >

        var mCharts = echarts . init ( document . querySelector ( "div" ))

        $ . get ( 'json/map/anhui.json' , function ( anhuiJson ) {

                console . log ( anhuiJson )

                echarts . registerMap ( 'anhui' , anhuiJson )

                var option = {

                        geo : {

                                type : 'map' ,

                                map : 'anhui' ,

                                label : {

                                        show : true

                                },

                                zoom : 1.2 ,

                                center : [ 116.507676 , 31.752889 ]

                        }

                };

                mCharts . setOption ( option )

        })

< /script>

不同城市颜色不同

1.显示基本的中国地图

2.准备好城市空气质量的数据, 并且将数据设置给 series

3.将 series 下的数据和 geo 关联起来

geoIndex: 0

type: 'map'

4.结合 visualMap 配合使用

visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过

dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {

        geo : {

                type : 'map' ,

                map : 'chinaMap' ,

                roam : true ,

                label : {

                        show : true

                }

        },

        series : [

                {

                        data : airData ,

                        geoIndex : 0 ,

                        type : 'map'

                }

         ],

        visualMap : {

                min : 0 , // 最小值

                max : 300 , // 最大值

                inRange : {

                        color : [ 'white' , 'red' ] // 颜色的范围

                },

                calculable : true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）

        }

}