0%

echarts地图设置外边框

发表于 分类于 Valine：
本文字数： 10k 阅读时长 ≈ 9 分钟

基础用法

示例效果

1、先画个中国地图

html部分

1
2
<div ref="myEchart"
     :style="{height:'100%%',width:'100%'}"/>

引入中国地图

1
2
import echarts from "echarts";
import "echarts/map/js/china";

js部分

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
let myChart = echarts.init(this.$refs.myEchart); // 这里是为了获得容器所在位置
window.onresize = myChart.resize();
myChart.setOption({
    backgroundColor: "transparent", // 画布背景颜色
    geo: {
        show: true,
        map: "china",
        zoom: 1.1,
        aspectScale: 0.8, // 长宽比
        top: "5%",
        layoutSize: "100%"
        roam: false
    },
    series: [
        {
            type: "map",
            map: "china",
            geoIndex: 0,
            zoom: 1.1,
            top: "5%",
            layoutSize: "100%",
            aspectScale: 0.8 // 长宽比
        }
    ]
});

效果如下，灰白白一片，啥也没有

添加边框

echarts的geo配置里面有个边框属性，但是如果盲目的给加上这个边框，会发现每个省市都有，边框还好说，但是设计图里面有个阴影，加上去那真是惨不忍睹。所以咱换个思路讲，在geo里面添加边框和阴影，在series里面再给每个item设置一个背景色，遮盖住geo里面的阴影和边框，效果就会变得好看起来。代码如下

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
myChart.setOption({
    backgroundColor: "transparent", // 画布背景颜色
    tooltip: { // 鼠标移到图里面的浮动提示框
        show: false
    },
    geo: {
        ...
        roam: false,
        itemStyle: {
            normal: {
                areaColor: "#00A0E6",
                borderWidth: 0, // 设置外层边框
                borderColor: "#05D8ED",
                shadowColor: "#1442A4",
                shadowOffsetX: 0,
                shadowOffsetY: 18
            }
        }
    },
    series: [
        {
            geoIndex: 1, // 关键代码就是将index设为1 这样就能在geo的上面去覆盖边框和阴影
            ...
            label: { // 这一段代码是为了显示各省份的名称
                normal: {
                    show: true,
                    formatter: "{b}",
                    color: "#ffffff",
                    fontSize: 14,
                    position: "inside"
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: "#fff"
                    }
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: "#00BAE6",
                    borderColor: "#01E6F6",
                    borderWidth: 2
                },
                emphasis: {
                    areaColor: "#009EE6"
                }
            }
        }
      ]
});

尾巴彩蛋

设计图需求还有一个是要显示每个省市对应的人数，如果用tooltip的话不能多个一起显示，于是利用了scatter给每个item设置一个框显示数据，框的样式可以叫UI切个背景图，效果如下图。

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
myChart.setOption({
    backgroundColor: "transparent", // 画布背景颜色
    tooltip: { // 鼠标移到图里面的浮动提示框
        show: false
    },
    geo: {
        ...
    },
    series: [
        {
            ...
            { // 悬浮窗
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon,
                    symbolSize: [1.92 * this.fontSize, 2.43 * this.fontSize], // [25, 30]
                    symbolOffset: [0, -2.14 * this.fontSize],
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                },
                // 框
                {
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon1,
                    symbolSize: [10.6 * this.fontSize, 5 * this.fontSize], // [25, 30]
                    symbolOffset: [0, -5.71 * this.fontSize],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: this.fontSize * 0.9
                            },
                            formatter: (params) =>
                            {
                                return `{a|${params.name}}\n{b|${params.data.value[2]}}`;
                            },
                            rich: {
                                a: {
                                    color: "#01D8FF",
                                    fontWeight: "bold",
                                    fontSize: this.fontSize,
                                    align: "center"
                                },
                                b: {
                                    color: "#ffffff",
                                    fontSize: this.fontSize * 1.2,
                                    fontWeight: "bold",
                                    padding: 10,
                                    align: "center"
                                }
                            }
                        }
                    },
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                }
        }
      ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
convertDataDian()
        {
            let geoCoordMap = this.geoCoordMap[0];
            let res = [];
            for (let i = 0; i < this.dataList.length; i++)
            {
                let nativePlace = this.dataList[i].nativePlace ? this.dataList[i].nativePlace.replace("省", "") : "";
                let geoCoord = geoCoordMap[nativePlace];
                if (geoCoord)
                {
                    res.push({
                        name: this.dataList[i].nativePlace,
                        value: geoCoord.concat(this.dataList[i].peopleCounting)
                    });
                }
            }
            return res;
        }

最后附上完整代码

运行可直接使用

echarts：4.2.1

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
<template>
    <div id="chart-map"
         ref="myEchart"
         :style="{height:'88vh',width:'100%'}"
         class="map-contanier"/>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils/common/utils";
export default {
    data()
    {
        return {
            chart: null,
            geoCoordMap: [
                {
                    "甘肃": [103.73, 36.03],
                    "青海": [101.74, 36.56],
                    "四川": [104.06, 30.67],
                    "河北": [114.48, 38.03],
                    "云南": [102.73, 25.04],
                    "贵州": [106.71, 26.57],
                    "湖北": [114.31, 30.52],
                    "河南": [113.65, 34.76],
                    "山东": [117, 36.65],
                    "江苏": [118.78, 32.04],
                    "安徽": [117.27, 31.86],
                    "浙江": [120.19, 30.26],
                    "江西": [115.89, 28.68],
                    "福建": [119.3, 26.08],
                    "广东": [113.23, 23.16],
                    "湖南": [113, 28.21],
                    "海南": [110.35, 20.02],
                    "辽宁": [123.38, 41.8],
                    "吉林": [125.35, 43.88],
                    "黑龙江": [126.63, 45.75],
                    "山西": [112.53, 37.87],
                    "陕西": [108.95, 34.27],
                    "台湾": [121.30, 25.03],
                    "北京": [116.46, 39.92],
                    "上海": [121.48, 31.22],
                    "重庆": [106.54, 29.59],
                    "天津": [117.2, 39.13],
                    "内蒙古": [111.65, 40.82],
                    "广西": [108.33, 22.84],
                    "西藏": [91.11, 29.97],
                    "宁夏": [106.27, 38.47],
                    "新疆": [87.68, 43.77],
                    "香港": [114.17, 22.28],
                    "澳门": [113.54, 22.19]
                }
            ],
            dataList: [
                { nativePlace: "黑龙江", peopleCounting: 2635 },
                { nativePlace: "北京", peopleCounting: 2635 },
                { nativePlace: "新疆", peopleCounting: 2635 },
                { nativePlace: "青海", peopleCounting: 2635 },
                { nativePlace: "湖北", peopleCounting: 2653 },
                { nativePlace: "贵州", peopleCounting: 2635 }
            ]
        };
    },
    mounted()
    {
        this.initChart();
        this.__resizeHandler = debounce(() =>
        {
            if (this.chart)
            {
                this.chart.resize();
            }
        }, 100);
        window.addEventListener("chart-map", this.__resizeHandler);
    },
    beforeDestroy()
    {
        if (!this.chart)
        {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart()
        {
            let icon = "image://" + require("@/assets/images/reform/ready.png"); // location图标
            let icon1 = "image://" + require("@/assets/images/reform/hint.png"); // 弹窗的背景图片
            let myChart = echarts.init(this.$refs.myEchart); // 这里是为了获得容器所在位置
            window.onresize = myChart.resize();
            myChart.setOption({
                backgroundColor: "transparent", // 画布背景颜色
                tooltip: { // 鼠标移到图里面的浮动提示框
                    show: false
                },
                geo: {
                    show: true,
                    map: "china",
                    zoom: 1.1,
                    aspectScale: 0.8, // 长宽比
                    top: "5%",
                    layoutSize: "100%",
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#00A0E6",
                            borderWidth: 0, // 设置外层边框
                            borderColor: "#05D8ED",
                            shadowColor: "#1442A4",
                            shadowOffsetX: 0,
                            shadowOffsetY: 18
                        }
                    }
                },
                series: [
                {
                    type: "map",
                    map: "china",
                    geoIndex: 1,
                    zoom: 1.1,
                    top: "5%",
                    layoutSize: "100%",
                    aspectScale: 0.8, // 长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b}",
                            color: "#ffffff",
                            fontSize: 14,
                            position: "inside"
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    selectedMode: "multiple",
                    colorBy: "series",
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#00BAE6",
                            borderColor: "#01E6F6",
                            borderWidth: 2
                        },
                        emphasis: {
                            areaColor: "#009EE6"
                        }
                    }
                },
                // 地图中闪烁的点
                {
                    name: "闪点",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    symbolOffset: [0, -30],
                    data: this.convertDataDian(),
                    showEffectOn: "render",
                    encode: {
                        value: 5
                    },
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke", // 波纹绘制方式 stroke, fill
                        period: 5, // 动画时间，值越小速度越快
                        scale: 5 // 波纹圆环最大限制，值越大波纹越大
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        color: "#0154BE",
                        shadowBlur: 10,
                        shadowColor: "#0154BE"
                    },
                    zlevel: 1
                },
                { // 悬浮窗
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon,
                    symbolSize: [27, 34],
                    symbolOffset: [0, -30],
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                },
                // 框
                {
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon1,
                    symbolSize: [149, 70],
                    symbolOffset: [0, -80],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: this.fontSize * 0.9
                            },
                            formatter: (params) =>
                            {
                                return `{a|${params.name}}\n{b|${params.data.value[2]}}`;
                            },
                            rich: {
                                a: {
                                    color: "#01D8FF",
                                    fontWeight: "bold",
                                    fontSize: this.fontSize,
                                    align: "center"
                                },
                                b: {
                                    color: "#ffffff",
                                    fontSize: this.fontSize * 1.2,
                                    fontWeight: "bold",
                                    padding: 10,
                                    align: "center"
                                }
                            }
                        }
                    },
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                }
                ]
            });
        },
        convertDataDian()
        {
            let geoCoordMap = this.geoCoordMap[0];
            let res = [];
            for (let i = 0; i < this.dataList.length; i++)
            {
                let geoCoord = geoCoordMap[this.dataList[i].nativePlace];
                if (geoCoord)
                {
                    res.push({
                        name: this.dataList[i].nativePlace,
                        value: geoCoord.concat(this.dataList[i].peopleCounting)
                    });
                }
            }
            return res;
        }
    }
};
</script>
-------------The End-------------
坚持原创技术分享，您的支持将鼓励我继续创作！