echarts 渲染2d地图

逆风优雅

已于 2022-08-13 17:18:03 修改

阅读量531

点赞数

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2022-08-13 17:10:47 首次发布

本文链接：https://blog.csdn.net/qq_44603011/article/details/126321742

版权

本文介绍如何利用Echarts库来渲染2D地图。首先，需要初始化Echarts，然后获取对应的地图JSON数据。地图配置中需指定`map`属性为地图名称。最后，注册地图数据并应用配置。示例代码展示了具体实现步骤。

摘要由CSDN通过智能技术生成

与echarts渲染其他数据类似：

首先：初始化echarts

   this.myChart = this.$e.init(this.$el);

其次：找到地图的json数据

地图数据

再次，地图的配置信息（配置项中的 map: "yangzhou", 要和地图的数据的名字匹配）

        this.chartOption = { 
            // backgroundColor: "rgba(0, 27, 36, 0.3)",
            tooltip: {
                show: true,
                trigger: "item",
                alwaysShowContent: false,
                backgroundColor: "#0C121C",
                borderColor: "rgba(0, 0, 0, 0.16);",
                hideDelay: 100,
                triggerOn: "mousemove",
                enterable: true,
                textStyle: {
                    color: "#DADADA",
                    fontSize: "12",
                    width: 20,
                    height: 30,
                    overflow: "break",
                },
                showDelay: 100,
                formatter: function (params) {
                    if (typeof params.value[2] === "undefined") {
                        return params.name + " : " + params.value.toFixed(1);
                    } else if (params.value[2] === 0) {
                        return params.name;
                    } else {
                        return params.name + " : " + params.value[2].toFixed(1);
                    }
                },
            },
            geo: {
                map: "yangzhou",
                label: {
                    // 通常状态下的样式
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    // 鼠标放上去的样式
                    emphasis: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                // 地图区域的样式设置
                itemStyle: {
                    normal: {
                        borderColor: "rgba(147, 235, 248, 1)",
                        borderWidth: 1,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        shadowColor: "rgba(128, 217, 248, 1)",
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10,
                    },
                    // 鼠标放上去高亮的样式
                    emphasis: {
                        areaColor: "#389BB7",
                        borderWidth: 1,
                    },
                },
            },
            series: [
                {
                    type: "map",
                    map: "yangzhou",
                    // left: 'center',
                    // top: 'middle',
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: fal