企业网站定制开发第一种效果：企业网站定制开发不同省份颜色不同
代码：
注意：
①企业网站定制开发要实现这种效果，企业网站定制开发地图数据的name企业网站定制开发一定要是省份的名字，企业网站定制开发要不然颜色出不来；
②一定要有visualMap配置，并且它的seriesIndex属性 对应的是series企业网站定制开发的数组下标；
<template> <div class="echartsMapAllDemo"> <!-- style企业网站定制开发的宽高一定要写，企业网站定制开发不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div> </div></template><script>import chinaJson from "../../assets/china.json";export default { data() { return {}; }, mounted() { this.chinaEcharts(); }, methods: { chinaEcharts() { //1.企业网站定制开发注册一个地图 this.$echarts.registerMap("china", chinaJson); //2.初始化echarts let myChart = this.$echarts.init(this.$refs.myEcharts); // 3.准备数据 var data = [ { name: "北京", value: 177 }, { name: "天津", value: 42 }, { name: "河北", value: 102 }, { name: "山西", value: 81 }, { name: "内蒙古", value: 47 }, { name: "辽宁", value: 67 }, { name: "吉林", value: 82 }, { name: "黑龙江", value: 66 }, { name: "上海", value: 24 }, { name: "江苏", value: 92 }, { name: "浙江", value: 114 }, { name: "安徽", value: 109 }, { name: "福建", value: 116 }, { name: "江西", value: 91 }, { name: "山东", value: 119 }, { name: "河南", value: 137 }, { name: "湖北", value: 116 }, { name: "湖南", value: 114 }, { name: "重庆", value: 91 }, { name: "四川", value: 125 }, { name: "贵州", value: 62 }, { name: "云南", value: 83 }, { name: "西藏", value: 9 }, { name: "陕西", value: 80 }, { name: "甘肃", value: 56 }, { name: "青海", value: 10 }, { name: "宁夏", value: 18 }, { name: "新疆", value: 67 }, { name: "广东", value: 123 }, { name: "广西", value: 59 }, { name: "海南", value: 14 } ]; var geoCoordMap = { 上海: [121.472644, 31.231706], 云南: [102.712251, 25.040609], 内蒙古: [111.670801, 40.818311], 北京: [116.405285, 39.904989], 台湾: [121.509062, 25.044332], 吉林: [125.3245, 43.886841], 四川: [104.065735, 30.659462], 天津: [117.190182, 39.125596], 宁夏: [106.278179, 38.46637], 安徽: [117.283042, 31.86119], 山东: [117.000923, 36.675807], 山西: [112.549248, 37.857014], 广东: [113.280637, 23.125178], 广西: [108.320004, 22.82402], 新疆: [87.617733, 43.792818], 江苏: [118.767413, 32.041544], 江西: [115.892151, 28.676493], 河北: [114.502461, 38.045474], 河南: [113.665412, 34.757975], 浙江: [120.153576, 30.287459], 海南: [110.33119, 20.031971], 湖北: [114.298572, 30.584355], 湖南: [112.982279, 28.19409], 澳门: [113.54909, 22.198951], 甘肃: [103.823557, 36.058039], 福建: [119.306239, 26.075302], 西藏: [91.132212, 29.660361], 贵州: [106.713478, 26.578343], 辽宁: [123.429096, 41.796767], 重庆: [106.504962, 29.533155], 陕西: [108.948024, 34.263161], 青海: [101.778916, 36.623178], 香港: [114.173355, 22.320048], 黑龙江: [126.642464, 45.756967], }; //4.企业网站定制开发把数据变成[{{ name: "北京", value: [121.472644, 31.231706,177] },...}]格式 var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } console.log(res) return res; }; //5.echarts配置 let option = { backgroundColor: "transparent", title: { text: "企业网站定制开发全国主要城市空气质量", subtext: "data from PM25.in", sublink: "http://www.pm25.in", left: "center", textStyle: { color: "#fff" } }, tooltip: { trigger: "item", formatter: "{b}<br/>{c} " }, 1)加上这个就可以实现多种颜色的功能 visualMap: { min: 0, max: 100, text: ['High', 'Low'], calculable: true, seriesIndex: [0],//这个对应的是series的数组下标 inRange: { color: ["#00467F", "#A5CC82"] } }, //series就是地图上的数据（去掉就没有数据了） series: [ { type: "map", map: 'china', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true }, emphasis: { show: false, textStyle: { color: "#fff" } } }, roam: true, animation: false, data: data }, ] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); } }};</script><style lang="less">.echartsMapAllDemo {}</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
第二种效果：地图+光圈散点
注意：
①一定要有geo这个配置，要不然光圈出不来。
并且series中的 type: “effectScatter”,的属性中一定要加上 coordinateSystem: “geo”,
② 然后对应的series中 这几个样式一定要加，加上才有那种光圈的效果
showEffectOn: "render",rippleEffect: { brushType: "stroke"}, hoverAnimation: true,- 1
- 2
- 3
- 4
- 5
<template> <div class="echartsMapAllDemo"> <!-- style的宽高一定要写，不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div> </div></template><script>import chinaJson from "../../assets/china.json";export default { data() { return {}; }, mounted() { this.chinaEcharts(); }, methods: { chinaEcharts() { this.$echarts.registerMap("china", chinaJson); let myChart = this.$echarts.init(this.$refs.myEcharts); var data = [ { name: "北京", value: 177 }, { name: "天津", value: 42 }, { name: "河北", value: 102 }, { name: "山西", value: 81 }, { name: "内蒙古", value: 47 }, { name: "辽宁", value: 67 }, { name: "吉林", value: 82 }, { name: "黑龙江", value: 66 }, { name: "上海", value: 24 }, { name: "江苏", value: 92 }, { name: "浙江", value: 114 }, { name: "安徽", value: 109 }, { name: "福建", value: 116 }, { name: "江西", value: 91 }, { name: "山东", value: 119 }, { name: "河南", value: 137 }, { name: "湖北", value: 116 }, { name: "湖南", value: 114 }, { name: "重庆", value: 91 }, { name: "四川", value: 125 }, { name: "贵州", value: 62 }, { name: "云南", value: 83 }, { name: "西藏", value: 9 }, { name: "陕西", value: 80 }, { name: "甘肃", value: 56 }, { name: "青海", value: 10 }, { name: "宁夏", value: 18 }, { name: "新疆", value: 67 }, { name: "广东", value: 123 }, { name: "广西", value: 59 }, { name: "海南", value: 14 } ]; var geoCoordMap = { 上海: [121.472644, 31.231706], 云南: [102.712251, 25.040609], 内蒙古: [111.670801, 40.818311], 北京: [116.405285, 39.904989], 台湾: [121.509062, 25.044332], 吉林: [125.3245, 43.886841], 四川: [104.065735, 30.659462], 天津: [117.190182, 39.125596], 宁夏: [106.278179, 38.46637], 安徽: [117.283042, 31.86119], 山东: [117.000923, 36.675807], 山西: [112.549248, 37.857014], 广东: [113.280637, 23.125178], 广西: [108.320004, 22.82402], 新疆: [87.617733, 43.792818], 江苏: [118.767413, 32.041544], 江西: [115.892151, 28.676493], 河北: [114.502461, 38.045474], 河南: [113.665412, 34.757975], 浙江: [120.153576, 30.287459], 海南: [110.33119, 20.031971], 湖北: [114.298572, 30.584355], 湖南: [112.982279, 28.19409], 澳门: [113.54909, 22.198951], 甘肃: [103.823557, 36.058039], 福建: [119.306239, 26.075302], 西藏: [91.132212, 29.660361], 贵州: [106.713478, 26.578343], 辽宁: [123.429096, 41.796767], 重庆: [106.504962, 29.533155], 陕西: [108.948024, 34.263161], 青海: [101.778916, 36.623178], 香港: [114.173355, 22.320048], 黑龙江: [126.642464, 45.756967] }; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } // console.log(res) return res; }; let option = { backgroundColor: "transparent", title: { text: "全国主要城市空气质量", subtext: "data from PM25.in", sublink: "http://www.pm25.in", left: "center", textStyle: { color: "#fff" } }, tooltip: { trigger: "item" }, //这个属性配置一定要有，要不然无法实现光圈效果 geo: { show: true, map: "china", label: { normal: { show: true }, emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: "#031525", borderColor: "#3B5077" }, emphasis: { areaColor: "#2B91B7" } } }, //series就是地图上的数据（去掉就没有数据了） series: [ //所有的市 { name: "pm2.5", type: "effectScatter", coordinateSystem: "geo", data: convertData(data), symbolSize: function(val) { return val[2] / 10; }, //这几个样式一定要加，加上才有那种光圈的效果 showEffectOn: "render", rippleEffect: { brushType: "stroke" }, hoverAnimation: true, label: { formatter: "{b}", position: "right", show: true }, //圆点的样式 itemStyle: { color: "#ddb926" }, emphasis: { label: { show: true } } } ] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); } }};</script><style lang="less">.echartsMapAllDemo {}</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
第三种效果:多彩省份+光圈散点+气泡
这个差不多就是上面两个的结合
但这种方法比较有趣的一点就是不需要写中国全省和各市的地理坐标，也就是说不需要我们手动提取出来他们的坐标，而是通过方法自动获取到，这一点就很有意思。
<template> <div> <div id="map" style="width:100vw;height:100vh;" ref="map"></div> </div> </template> <script>import chinaJson from "../../assets/china.json";export default { data() { return {}; }, mounted() { this.$echarts.registerMap("china", chinaJson); let myChart = this.$echarts.init(this.$refs.map); this.$nextTick(() => { var mapName = "china"; var data = [ { name: "北京", value: 177 }, { name: "天津", value: 42 }, { name: "河北", value: 102 }, { name: "山西", value: 81 }, { name: "内蒙古", value: 47 }, { name: "辽宁", value: 67 }, { name: "吉林", value: 82 }, { name: "黑龙江", value: 66 }, { name: "上海", value: 24 }, { name: "江苏", value: 92 }, { name: "浙江", value: 114 }, { name: "安徽", value: 109 }, { name: "福建", value: 116 }, { name: "江西", value: 91 }, { name: "山东", value: 119 }, { name: "河南", value: 137 }, { name: "湖北", value: 116 }, { name: "湖南", value: 114 }, { name: "重庆", value: 91 }, { name: "四川", value: 125 }, { name: "贵州", value: 62 }, { name: "云南", value: 83 }, { name: "西藏", value: 9 }, { name: "陕西", value: 80 }, { name: "甘肃", value: 56 }, { name: "青海", value: 10 }, { name: "宁夏", value: 18 }, { name: "新疆", value: 67 }, { name: "广东", value: 123 }, { name: "广西", value: 59 }, { name: "海南", value: 14 } ]; var geoCoordMap = {}; var toolTipData = [ { name: "北京", value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }] }, { name: "天津", value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }] }, { name: "河北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }] }, { name: "山西", value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }] }, { name: "内蒙古", value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }] }, { name: "辽宁", value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }] }, { name: "吉林", value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }] }, { name: "黑龙江", value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }] }, { name: "上海", value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }] }, { name: "江苏", value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }] }, { name: "浙江", value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }] }, { name: "安徽", value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }] }, { name: "福建", value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }] }, { name: "江西", value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }] }, { name: "山东", value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }] }, { name: "河南", value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }] }, { name: "湖北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }] }, { name: "湖南", value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }] }, { name: "重庆", value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }] }, { name: "四川", value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }] }, { name: "贵州", value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }] }, { name: "云南", value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }] }, { name: "西藏", value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }] }, { name: "陕西", value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }] }, { name: "甘肃", value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }] }, { name: "青海", value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }] }, { name: "宁夏", value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }] }, { name: "新疆", value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }] }, { name: "广东", value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }] }, { name: "广西", value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }] }, { name: "海南", value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }] } ]; /*获取地图数据*/ let myChart = this.$echarts.init(document.getElementById("map")); // myChart.showLoading(); var mapFeatures = this.$echarts.getMap(mapName).geoJson.features; // myChart.hideLoading(); mapFeatures.forEach(function(v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.cp; }); // console.log(data); // console.log(toolTipData); var max = 480,min = 9; // todo var maxSize4Pin = 100,minSize4Pin = 20; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var option = { tooltip: { trigger: "item", formatter: function(params) { if (typeof params.value[2] == "undefined") { var toolTiphtml = ""; for (var i = 0; i < toolTipData.length; i++) { if (params.name == toolTipData[i].name) { toolTiphtml += toolTipData[i].name + ":<br>"; for (var j = 0; j < toolTipData[i].value.length; j++) { toolTiphtml += toolTipData[i].value[j].name + ":" + toolTipData[i].value[j].value + "<br>"; } } } // console.log(toolTiphtml); console.log(convertData(data)) return toolTiphtml; } else { var toolTiphtml = ""; for (var i = 0; i < toolTipData.length; i++) { if (params.name == toolTipData[i].name) { toolTiphtml += toolTipData[i].name + ":<br>"; for (var j = 0; j < toolTipData[i].value.length; j++) { toolTiphtml += toolTipData[i].value[j].name + ":" + toolTipData[i].value[j].value + "<br>"; } } } console.log(toolTiphtml); // console.log(convertData(data)) return toolTiphtml; } } }, //这个属性控制地图的多彩板块 visualMap: { show: true, min: 0, max: 200, left: 400, bottom: 200, text: ["高", "低"], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { // color: ['#3B5077', '#031525'] // 蓝黑 // color: ['#ffc0cb', '#800080'] // 红紫 // color: ['#3C3B3F', '#605C3C'] // 黑绿 // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑 // color: ['#23074d', '#cc5333'] // 紫红 color: ["#00467F", "#A5CC82"] // 蓝绿 // color: ['#1488CC', '#2B32B2'] // 浅蓝 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 } }, geo: { show: true, map: mapName, label: { normal: { show: false }, emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: "#031525", borderColor: "#3B5077" }, emphasis: { areaColor: "#2B91B7" } } }, series: [ //1）全省的散点 { name: "散点", type: "scatter", coordinateSystem: "geo", data: convertData(data), symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: "{b}", position: "right", show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: "#05C3F9" } } }, // 2）为了与visualMap配对，必须要加上 { type: "map", map: mapName, geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true }, emphasis: { show: false, textStyle: { color: "#fff" } } }, roam: true, itemStyle: { normal: { areaColor: "#031525", borderColor: "#3B5077" }, emphasis: { areaColor: "#2B91B7" } }, animation: false, data: data }, //3）气泡 { name: "点", type: "scatter", coordinateSystem: "geo", symbol: "pin", //气泡 symbolSize: function(val) { var a = (maxSize4Pin - minSize4Pin) / (max - min); var b = minSize4Pin - a * min; b = maxSize4Pin - a * max; return a * val[2] + b; }, label: { normal: { show: true, textStyle: { color: "#fff", fontSize: 9 } } }, itemStyle: { normal: { color: "#F62157" //标志颜色 } }, zlevel: 6, data: convertData(data) }, //4.前五个有效果的光圈 { name: "Top 5", type: "effectScatter", coordinateSystem: "geo", data: convertData( data .sort(function(a, b) { return b.value - a.value; }) .slice(0, 5) ), symbolSize: function(val) { return val[2] / 10; }, showEffectOn: "render", rippleEffect: { brushType: "stroke" }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", show: true } }, itemStyle: { normal: { color: "yellow", shadowBlur: 10, shadowColor: "yellow" } }, zlevel: 1 } ] }; myChart.setOption(option); }); }};</script> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
第四种效果：下钻
下钻后：
遇到的比较难解决的问题：
从全国地图下钻到安徽省的地图，安徽省的地图会小很多，修改了数据和json包发现都不行，但别人的echarts安徽省的图可以，就是很奇怪，找不到原因。解决的办法就是不同的地图设置不用的中心点和缩放比例。
<template> <div class="echartsMapAllDemo"> <!-- style的宽高一定要写，不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:1000px;height:800px;border:3px solid gold"></div> </div></template><script>import chinaJson from "../../assets/china.json";import anhui from '../../assets/province/anhui.json'import AQ from '../../assets/province/AQ.json'export default { data() { return { //全国的数据和地理坐标 chinaData:[ { name: "北京", value: 177 }, { name: "天津", value: 42 }, { name: "河北", value: 102 }, { name: "山西", value: 81 }, { name: "内蒙古", value: 47 }, { name: "辽宁", value: 67 }, { name: "吉林", value: 82 }, { name: "黑龙江", value: 66 }, { name: "上海", value: 24 }, { name: "江苏", value: 92 }, { name: "浙江", value: 114 }, { name: "安徽", value: 109 }, { name: "福建", value: 116 }, { name: "江西", value: 91 }, { name: "山东", value: 119 }, { name: "河南", value: 137 }, { name: "湖北", value: 116 }, { name: "湖南", value: 114 }, { name: "重庆", value: 91 }, { name: "四川", value: 125 }, { name: "贵州", value: 62 }, { name: "云南", value: 83 }, { name: "西藏", value: 9 }, { name: "陕西", value: 80 }, { name: "甘肃", value: 56 }, { name: "青海", value: 10 }, { name: "宁夏", value: 18 }, { name: "新疆", value: 67 }, { name: "广东", value: 123 }, { name: "广西", value: 59 }, { name: "海南", value: 14 } ], chinaGeoCoordMap:{ 上海: [121.472644, 31.231706], 云南: [102.712251, 25.040609], 内蒙古: [111.670801, 40.818311], 北京: [116.405285, 39.904989], 台湾: [121.509062, 25.044332], 吉林: [125.3245, 43.886841], 四川: [104.065735, 30.659462], 天津: [117.190182, 39.125596], 宁夏: [106.278179, 38.46637], 安徽: [117.283042, 31.86119], 山东: [117.000923, 36.675807], 山西: [112.549248, 37.857014], 广东: [113.280637, 23.125178], 广西: [108.320004, 22.82402], 新疆: [87.617733, 43.792818], 江苏: [118.767413, 32.041544], 江西: [115.892151, 28.676493], 河北: [114.502461, 38.045474], 河南: [113.665412, 34.757975], 浙江: [120.153576, 30.287459], 海南: [110.33119, 20.031971], 湖北: [114.298572, 30.584355], 湖南: [112.982279, 28.19409], 澳门: [113.54909, 22.198951], 甘肃: [103.823557, 36.058039], 福建: [119.306239, 26.075302], 西藏: [91.132212, 29.660361], 贵州: [106.713478, 26.578343], 辽宁: [123.429096, 41.796767], 重庆: [106.504962, 29.533155], 陕西: [108.948024, 34.263161], 青海: [101.778916, 36.623178], 香港: [114.173355, 22.320048], 黑龙江: [126.642464, 45.756967] }, //安徽的数据和地理坐标 anhuiData:[ { name: '合肥市', value: 19 }, { name: '淮南市', value: 14 }, { name: '芜湖市', value: 19 }, { name: '蚌埠市', value: 12 }, { name: '马鞍山市', value: 19 }, { name: '淮北市', value: 15 }, { name: '铜陵市', value: 19 }, { name: '安庆市', value: 14 }, { name: '黄山市', value: 19 }, { name: '滁州市', value: 12 }, { name: '阜阳市', value: 19 }, { name: '宿州市', value: 15 }, { name: '六安市', value: 19 }, { name: '亳州市', value: 14 }, { name: '宣城市', value: 19 }, ], anhuiGeoCoordMap:{ 合肥市: [117.283042, 31.86119], 淮南市: [117.018329, 32.647574], 芜湖市: [118.376451, 31.326319], 蚌埠市: [117.363228, 32.939667], 马鞍山市: [118.507906, 31.689362], 淮北市: [116.794664, 33.971707], 铜陵市: [117.816576, 30.929935], 安庆市: [117.043551, 30.50883], 黄山市: [118.317325, 29.709239], 滁州市: [118.316264, 32.303627], 阜阳市: [115.819729, 32.896969], 宿州市: [116.984084, 33.633891], 六安市: [116.507676, 31.752889], 亳州市: [115.782939, 33.869338], 宣城市: [118.757995, 30.945667], } } }, mounted() { let center = '' let zoom = 1.2 this.chinaEcharts(chinaJson,this.chinaData,this.chinaGeoCoordMap,center,zoom); }, methods: { chinaEcharts(json,data,geoCoordMap,center,zoom) { this.$echarts.registerMap("china", json); let myChart = this.$echarts.init(this.$refs.myEcharts); var convertData = (data)=> { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } // console.log(res) return res; }; let option = { backgroundColor: "transparent", title: { text: "全国主要城市空气质量", subtext: "data from PM25.in", sublink: "http://www.pm25.in", left: "center", textStyle: { color: "#fff" } }, tooltip: { trigger: "item" }, geo: { show: true, map: "china", center: center, label: { normal: { show: true }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: "#031525", borderColor: "#3B5077" }, emphasis: { areaColor: "#2B91B7" } }, roam: true,//平移和鼠标缩放 zoom: zoom,//倍数放大 // 去掉南海诸岛 regions: [ { name: "南海诸岛", itemStyle: { // 隐藏地图 normal: { opacity: 0, // 为 0 时不绘制该图形 } }, label: { show: false // 隐藏文字 } } ] }, //series就是地图上的数据（去掉就没有数据了） series: [ //所有的市 { name: "pm2.5", type: "effectScatter", coordinateSystem: "geo", data: convertData(data), symbolSize: function(val) { return val[2] / 10; }, //这几个样式一定要加，加上才有那种光圈的效果 showEffectOn: "render", rippleEffect: { brushType: "stroke" }, hoverAnimation: true, label: { formatter: "{b}", position: "right", show: true }, //圆点的样式 itemStyle: { color: "#ddb926" }, emphasis: { label: { show: true } } } ] }; myChart.setOption(option,true); myChart.on("click", (parms)=> { if(parms.name == "安徽"){ let center = [117.283042, 31.86119] let zoom = 3 this.chinaEcharts(anhui,this.anhuiData,this.anhuiGeoCoordMap,center,zoom) }else if (parms.name == "蚌埠市") { chinaEcharts(BB, BBData); } else if (parms.name == "宿州市") { chinaEcharts(SZ, SZData); } else if (parms.name == "淮北市") { chinaEcharts(HB, HBData); } else if (parms.name == "亳州市") { chinaEcharts(HZ, HZData); } else if (parms.name == "淮南市") { chinaEcharts(HN, HNData); } else if (parms.name == "阜阳市") { chinaEcharts(FY, FYData); } else if (parms.name == "六安市") { chinaEcharts(LA, LAData); } else if (parms.name == "合肥市") { chinaEcharts(HF, HFData); } else if (parms.name == "滁州市") { chinaEcharts(CZS, CZSData); } else if (parms.name == "安庆市") { chinaEcharts(AQ, AQData); } else if (parms.name == "池州市") { chinaEcharts(CZ, CZData); } else if (parms.name == "铜陵市") { chinaEcharts(TL, TLData); } else if (parms.name == "芜湖市") { chinaEcharts(WF, WFData); } else if (parms.name == "马鞍山市") { chinaEcharts(MAS, MASData); } else if (parms.name == "黄山市") { chinaEcharts(HS, HSData); } else if (parms.name == "宣城市") { chinaEcharts(XC, XCData); } else { chinaEcharts(AHS, AHSData); } }); window.addEventListener("resize", function() { myChart.resize(); }); } }};</script><style lang="less">.echartsMapAllDemo {}</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
第五中效果：通过安装 province-city-china/data 动态获取全国全省，各市，各区的编号
页面效果其实很普通，不是说多惊艳，炫酷，只是这个引入全国，全省，全市json的方法很好，值得收藏。
安装 province-city-china 依赖。
npm i province-city-china -S
const { province, city } = require(‘province-city-china/data’);
同时在assets中引入文件，这样就可以动态的引入，自动区别哪个json的内容
<template> <div> <div id="tool"> <span @click="goBackChina">{{firstTitle}}</span> <span @click="goBackProvince">{{currentProvince.name}}</span> <span @click="goBackCity">{{currentCity.name}}</span> </div> <div id="chinaMap"></div> </div> </template> <script> import * as echarts from 'echarts';// 安装 province-city-china 依赖。 // npm i province-city-china -Sconst { province, city } = require('province-city-china/data'); export default { name: 'ChinaMain', data() { return { firstTitle: '中国', myChart: '', currentClick: '', currentProvince: {}, currentCity: {}, cityState: false, provinceState: false } }, mounted() { this.initEcharts("china", "中国"); }, methods: { goBackChina() { this.initEcharts("china", "中国"); this.currentProvince.name = ''; this.currentCity.name = ''; }, goBackProvince() { this.initEcharts(this.currentProvince.province, this.currentProvince.name, "1"); this.currentCity.name = ''; }, goBackCity() { this.initEcharts(this.currentCity.code, this.currentCity.name); }, initEcharts(pName, Chinese_, state = "0") { this.myChart = echarts.init(document.getElementById('chinaMap')); let tmpSeriesData = []; if (pName === "china") { let geoJson = require('../../assets/mapdata/china.json'); echarts.registerMap(pName, geoJson); } else { if (this.currentClick === 'province' || state === "1") { let geoJson = require(`../../assets/mapdata/geometryProvince/${pName}.json`); echarts.registerMap(pName, geoJson); } else { let geoJson = require(`../../assets/mapdata/geometryCouties/${pName}.json`); echarts.registerMap(pName, geoJson); } } let option = { series: [ { name: Chinese_ || pName, type: 'map', mapType: pName, roam: false,//是否开启鼠标缩放和平移漫游 itemStyle: {//地图区域的多边形 图形样式 normal: {//是图形在默认状态下的样式 label: { show: true,//是否显示标签 textStyle: { color: "#303133", fontSize: '10px' } } }, emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时 label: { show: true, textStyle: { fontSize: '14px' } } } }, data: tmpSeriesData,//后端数据 top: "10%"//组件距离容器的距离 } ] }; this.myChart.setOption(option, true); this.myChart.off("click"); if (pName === "china") { // 全国时，添加click 进入省级 this.currentClick = 'province' this.myChart.on('click', this.mapClick); } else { this.currentClick = 'city' this.myChart.on('click', this.mapClick); } }, //地图点击事件 mapClick(param) { this.provinceState = false; this.cityState = false; if (this.currentClick === 'province') { //遍历取到provincesText 中的下标 去拿到对应的省js for (var i = 0; i < province.length; i++) { if (param.name === province[i].name) { this.provinceState = true; this.currentProvince = { ...province[i] }; this.currentProvince.name = ` -->${this.currentProvince.name} `; //显示对应省份的方法 this.showProvince(province[i].province, province[i].name); break; } } !this.provinceState ? alert('暂不支持该区域地图展示!') : ''; } else { for (var l = 0; l < city.length; l++) { if (param.name === city[l].name) { this.cityState = true; this.currentCity = { ...city[l] }; this.currentCity.name = ` -->${this.currentCity.name} `; //显示对应城市的方法 this.showProvince(city[l].code, city[l].name); break; } } !this.cityState ? alert('暂不支持该区域地图展示!') : ''; } }, showProvince(pName, Chinese_) { this.initEcharts(pName, Chinese_); } }}</script><style lang="less">#tool { height: 30px; line-height: 30px; color: deepskyblue; cursor: pointer; // position: absolute; top: 10px; left: 10px; z-index: 10000; font-size: 18px; text-align: left;}#chinaMap { width: 1000px; height: 750px;}</style> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159