echarts 地图类型热力图

地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。echarts 官网案例：https://echarts.apache.org/zh/option.html#visualMap-piecewise。

除了可以在地图上打点之外，我们如何在地图上做热力图呢？效果图如下：

首先介绍 visualMap 视觉映射组件。

visualMap: {show: true,min: 1,max: 1000,// splitNumber: 5,inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},textStyle: {color: '#fff'},
},

设置 visualMap 组件的最大值和最小值，切分段数以及在选择范围中的视觉元素定义颜色、尺寸等。

引入地图信息：

geo: {map: 'china',type: 'map',
},

如何将数据铺在地图上呢？

function randomValue() {return Math.round(Math.random()*1000);
}
series: [//地图配置{ name: 'china',type: 'map',mapType: 'china',zoom: 1,geoIndex: 0,data: [{name: '北京', value: randomValue()},{name: '天津', value: randomValue()},{name: '上海', value: randomValue()},{name: '重庆', value: randomValue()},{name: '河北', value: randomValue()},{name: '河南', value: randomValue()},{name: '云南', value: randomValue()},{name: '辽宁', value: randomValue()},{name: '黑龙江', value: randomValue()},{name: '湖南', value: randomValue()},{name: '安徽', value: randomValue()},{name: '山东', value: randomValue()},{name: '新疆', value: randomValue()},{name: '江苏', value: randomValue()},{name: '浙江', value: randomValue()},{name: '江西', value: randomValue()},{name: '湖北', value: randomValue()},{name: '广西', value: randomValue()},{name: '甘肃', value: randomValue()},{name: '山西', value: randomValue()},{name: '内蒙古', value: randomValue()},{name: '陕西', value: randomValue()},{name: '吉林', value: randomValue()},{name: '福建', value: randomValue()},{name: '贵州', value: randomValue()},{name: '广东', value: randomValue()},{name: '青海', value: randomValue()},{name: '西藏', value: randomValue()},{name: '四川', value: randomValue()},{name: '宁夏', value: randomValue()},{name: '海南', value: randomValue()},{name: '台湾', value: randomValue()},{name: '香港', value: randomValue()},{name: '澳门', value: randomValue()}]}
]

更多详情，请参考官方案例：https://echarts.apache.org/examples/zh/editor.html?c=map-HK

echarts 地图类型热力图相关推荐

echarts地图散点热力图1
echarts地图散点热力图 <!--https:// ...
高德地图使用、echarts地图等地图设置
1.高德地图使用前提准备: 1.打开高德地图开方平台,注册账号: https://console.amap.com/dev/key/app 2.创建一个应用,获取key值. 一.引入相关资源 < ...
Echarts地图编写
1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...
echarts地图的基本使用配置
一.空气质量图代码和配置如下: <template><div class="box"><div id="map">< ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
echarts地图api series_ECharts地图绘制和钻取简易接口详解
1.地图绘制过程原理给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成中国以及省市县等地图的基础数据可以从这里生成与下载. ht ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
ECharts之类型3D(map，bar3D,scatter3D)
ECharts之类型3D(3D地图) 相关js源码下载: 1.世界地图.js,中国地图.js,中国各省份地图.js 地址:https://github.com/ecomfe/echarts/tree/ ...
ECharts地图使用
ECharts地图使用最近项目开发中用到了ECharts地图,感觉ECharts地图美观炫酷,所 ...

echarts 地图类型热力图

echarts 地图类型热力图相关推荐

最新文章

热门文章