echarts地图(map)
代码：
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>地图title>head><style>* {margin: 0;padding: 0;box-sizing: border-box;}#app {width: 100vw;height: 100vh;padding: 400px;display: flex;align-items: center;justify-content: space-between;}.chart {width: 800px;height: 800px;}style><body><div id="app"><div class="chart" id="chinaMap">div><div class="chart" id="HunanMap">div>div>body><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"type="text/javascript">script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"type="text/javascript">script><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"type="text/javascript">script><script type="text/javascript">new Vue({el: "#app",data: {// 中国地图分布数据chinaDataList: [{name: "北京市",value: 540,},{name: "天津市",value: 130,},{name: "上海市",value: 400,},{name: "重庆市",value: 750,},{name: "河北省",value: 130,},{name: "河南省",value: 830,},{name: "云南省",value: 110,},{name: "辽宁省",value: 19,},{name: "黑龙江省",value: 150,},{name: "湖南省",value: 690,},{name: "安徽省",value: 60,},{name: "山东省",value: 39,},{name: "新疆维吾尔自治区",value: 4,},{name: "江苏省",value: 31,},{name: "浙江省",value: 104,},{name: "江西省",value: 36,},{name: "湖北省",value: 52,},{name: "广西壮族自治区",value: 33,},{name: "甘肃省",value: 7,},{name: "山西省",value: 5,},{name: "内蒙古自治区",value: 778,},{name: "陕西省",value: 22,},{name: "吉林省",value: 4,},{name: "福建省",value: 18,},{name: "贵州省",value: 5,},{name: "广东省",value: 98,},{name: "青海省",value: 1,},{name: "西藏自治区",value: 1,},{name: "四川省",value: 44,},{name: "宁夏回族自治区",value: 4,},{name: "海南省",value: 22,},{name: "台湾省",value: 3,},{name: "香港特别行政区",value: 5,},{name: "澳门特别行政区",value: 555,},{name: "南海诸岛",value: 100,},],// 湖南地图分布数据HunanDataList: [{ name: "长沙市", value: 20 },{ name: "益阳市", value: 340 },{ name: "岳阳市", value: 430 },{ name: "娄底市", value: 423 },{ name: "湘潭市", value: 223 },{ name: "张家界市", value: 120 },{ name: "湘西土家族苗族自治州", value: 323 },{ name: "常德市", value: 230 },{ name: "怀化市", value: 423 },{ name: "株洲市", value: 330 },{ name: "衡阳市", value: 423 },{ name: "邵阳市", value: 45 },{ name: "永州市", value: 55 },{ name: "郴州市", value: 65 },],},created() {this.$nextTick(() => {this.chinaMap();this.HunanMap();});},mounted() {},methods: {// 中国地图chinaMap() {// 初始化echarts实列对象并绑定呈现图标的盒子var chinaMap = echarts.init(document.getElementById("chinaMap"));// 矢量地图json数据文件名称var china = "china";this.mapJson(chinaMap, this.chinaDataList, china, false);},// 湖南地图HunanMap() {var HunanMap = echarts.init(document.getElementById("HunanMap"));var Hunan = "chinaHunan";this.mapJson(HunanMap, this.HunanDataList, Hunan, true);},// 地图公共方法// chinaMap初始化图标 dataList地图分别数据 mapName地图json数据文件名称 show展示标签控制变量mapJson(chinaMap, dataList, mapName, show) {// 通过Ajax获取矢量地图数据// chinaJson是各个省份的json数据$.get(mapName + ".json", function (chinaJson) {// 在Ajax回调函数中往echarts全局对象注册地图的json数据// mapName registerMap注册的地图名称echarts.registerMap(mapName, chinaJson);// 准备配置项var option = {// 地理坐标系组件用于地图的绘制geo: {map: mapName, //使用 registerMap 注册的地图名称roam: false, //缩放设置zoom: 1, //初始化的缩放比例// 图形上的文本标签label: {//展示标签show: show,//标签内容格式器formatter(data) {for (let i = 0; i < dataList.length; i++) {if (data.name == dataList[i].name) {return data.name + "\n" + dataList[i].value;}}},color: "#ffffff",fontSize: 9,lineHeight: 12, //行高},},// 地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的分布数据series: [{data: dataList, // 地图系列中的数据内容数组geoIndex: 0, //将数据和第0个geo配置关联type: "map",},],// visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）visualMap: {type: "piecewise", // 分段型视觉映射组件min: 0.75, // 指定 visualMapPiecewise 组件的最小值max: 1.2, // 指定 visualMapPiecewise 组件的最大值left: "center", // visualMap 组件离容器左侧的距离top: "bottom", // visualMap 组件离容器上侧的距离orient: "horizontal", // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）// 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式pieces: [{gte: 1, // gte（大于等于，greater than or equals）来表达边界lte: 9, // lte（小于等于 less than or equals）color: "#9E9976",symbol: "rect", // 图元的图形类别label: "1-9",},{gte: 10,lte: 99,color: "#999C64",symbol: "rect",label: "10-99",},{gte: 100,lte: 499,color: "#89924F",symbol: "rect",label: "100-499",},{gte: 500,lte: 999,color: "#677324",symbol: "rect",label: "500-999",},{gte: 1000,color: "#4B612C",symbol: "rect",label: "大于等于1000",},],},};// 将配置项给echarts实力chinaMap.setOption(option);});},},});script>
html>
效果图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！