echarts地图设置外边框

2021-12-31T05:00:00.000Z

基础用法

示例效果

1、先画个中国地图

html部分

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

引入中国地图

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

js部分

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里面的阴影和边框，效果就会变得好看起来。代码如下

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切个背景图，效果如下图。

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
                }
        }
      ]
});

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