echarts 热力图（中国地图版）

echarts热力图开发要点

在options中添加 visualMap配置
详细配置方法见官网
https://echarts.apache.org/zh/option.html#visualMap
映射的数据，必须有value值

      let dataList = [{name: "北京",value: 54,},{name: "天津",value: 13,},]

完整范例代码和效果

<template><div class="mapBox"><div style="height: 100%;width: 100%" ref="myChart"></div></div>
</template><script>
import echarts from "echarts";
import "@/components/charts/chinaMap/china.js";export default {methods: {initEchartMap() {let dataList = [{name: "北京",value: 54,},{name: "南海诸岛",value: 0,},{name: "天津",value: 13,},{name: "上海",value: 40,},{name: "重庆",value: 75,},{name: "河北",value: 13,},{name: "河南",value: 83,},{name: "云南",value: 11,},{name: "辽宁",value: 19,},{name: "黑龙江",value: 15,},{name: "湖南",value: 69,},{name: "安徽",value: 60,},{name: "山东",value: 39,},{name: "新疆",value: 4,},{name: "江苏",value: 31,},{name: "浙江",value: 104,},{name: "江西",value: 36,},{name: "湖北",value: 1052,},{name: "广西",value: 33,},{name: "甘肃",value: 7,},{name: "山西",value: 9,},{name: "内蒙古",value: 7,},{name: "陕西",value: 22,},{name: "吉林",value: 4,},{name: "福建",value: 18,},{name: "贵州",value: 5,},{name: "广东",value: 98,},{name: "青海",value: 1,},{name: "西藏",value: 0,},{name: "四川",value: 44,},{name: "宁夏",value: 4,},{name: "海南",value: 22,},{name: "台湾",value: 3,},{name: "香港",value: 5,},{name: "澳门",value: 5,},];let myChart = echarts.init(this.$refs.myChart);let options = {title: {text: "全国好友分布图",subtext: "朝阳",left: "center",textStyle: {color: "#fff",fontSize: 30,},subtextStyle: {fontSize: 20,},},tooltip: {triggerOn: "click",formatter: function(e, t, n) {return e.seriesName + "<br />" + e.name + "：" + e.value;},},// 热力地图visualMap: {min: 0,max: 1000,left: 240,textStyle: {color: "#fff",},pieces: [{gt: 100,label: "> 100 人",color: "#7f1100",},{gte: 10,lte: 100,label: "10 - 100 人",color: "#ff5428",},{gte: 1,lt: 10,label: "1 - 9 人",color: "#ff8c71",},{value: 0,label: "无",color: "#ffd768",},],},series: [{name: "好友数",data: dataList,type: "map",map: "china",zoom: 1.2,aspectScale: 0.75,label: {// 默认文本标签样式normal: {color: "white",show: true,},// 高亮文本标签样式emphasis: {color: "yellow",fontSize: 22,fontWeight: "bold",},},itemStyle: {// 默认区域样式normal: {// 区域背景透明areaColor: "transparent",borderColor: "rgba(39,211,233, 1)",borderWidth: 1,},// 高亮区域样式emphasis: {// 高亮区域背景色areaColor: "#01ADF2",},},},],};myChart.setOption(options);// 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小window.addEventListener("resize", function() {myChart.resize();});},},mounted() {this.$nextTick(() => {this.initEchartMap();});},
};
</script>
<style scoped>
.mapBox {background: #020933;position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding: 30px;box-sizing: border-boxs;
}
</style>

china.js 的百度网盘下载链接：
https://pan.baidu.com/s/1K0wlmb3Yt223XAykMXpALA
提取码：w160

echarts 热力图（中国地图版）相关推荐

echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
使用echarts完成中国省市区县镇地图展示
目录前言一.中国地图 1.1 地图数据-china.js 1.2 代码应用二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用三.市级地图--以 ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示 ECharts 官方案例: https://www.makeapie.com/editor.html?c=x_kEnG-Ggq 效果如 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...

echarts 热力图（中国地图版）

echarts热力图开发要点

完整范例代码和效果

echarts 热力图（中国地图版）相关推荐

最新文章

热门文章