echarts地图

最新推荐文章于 2023-11-17 15:31:15 发布
今天吃了嘛o
最新推荐文章于 2023-11-17 15:31:15 发布
阅读量122
点赞数
文章标签： echarts javascript
本文链接：https://blog.csdn.net/weixin_45535843/article/details/130180796
版权
 //地图
    getMapInfo() {
      let chinaStatistics = this.$echarts.init(document.getElementById("map"));
      let options = {
        visualMap: {
          show: false,
          left: 30,
          bottom: 40,
          showLabel: true,
          // 设置数值颜色
          pieces: [
            {
              gte: 1000,
              label: ">= 1000",
              color: "#5475f5",
            },
            {
              gte: 700,
              lt: 999,
              label: "700 - 999",
              color: "#e6ac53",
            },
            {
              gte: 500,
              lt: 699,
              label: "500 - 699",
              color: "#9feaa5",
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#85daef",
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#74e2ca",
            },
            {
              lt: 10,
              label: "<10",
              color: "#9fb5ea",
            },
          ],
        },
        // 鼠标悬浮显示文字
        tooltip: {
          trigger: "item",
          formatter: (data) => {
            return `<h3 style="padding:0;margin:0">${data.data.name}</h3><br /> 
                    充电桩数${data.data.value[0]}<br />
                    充电桩种类个数${data.data.value[1]}<br />
                    新能源汽车数量${data.data.value[2]}<br />`;
          },
          data: this.dataList,
        },
        geo: {
          tooltip: {
            show: true,
          },
          roam: true,
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1.2,
          top: 50,
          layoutSize: "100%", //保持地图宽高比
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#F3F3F3",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              areaColor: "#1955a4",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
          // 这里是重点！！！不显示南海诸岛
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        series: [
          {
            name: "成果预览",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
          // 散点图，可以在标记地点闪动
          // {
          //   name: "在地图中显示散点图",
          //   type: "scatter",
          //   coordinateSystem: "geo", //设置坐标系为 geo
          //   symbolSize: function (params) {
          //     return (params[2] / 100) * 15 + 5;
          //   },
          //   encode: {
          //     tooltip: 2,
          //   },
          //   data: [
          //     //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
          //     {
          //       name: "北京",
          //       value: [116.41995, 40.18994, 100],
          //       itemStyle: {
          //         color: "#CD0000",
          //         normal: {
          //           color: "#CD0000",
          //           shadowBlur: 10,
          //           shadowColor: "#CD0000",
          //         },
          //       },
          //     },
          //     {
          //       name: "郑州",
          //       value: [113.665412, 34.757975, 100],
          //       itemStyle: {
          //         color: "#CD0000",
          //         normal: {
          //           color: "#CD0000",
          //           shadowBlur: 10,
          //           shadowColor: "#CD0000",
          //         },
          //       },
          //     },
          //     {
          //       name: "广州",
          //       value: [113.26453, 23.155008, 100],
          //       itemStyle: {
          //         color: "#CD0000",
          //         normal: {
          //           color: "#CD0000",
          //           shadowBlur: 10,
          //           shadowColor: "#CD0000",
          //         },
          //       },
          //     },
          //   ],
          // },
          // {
          //   name: "在地图中显示散点图",
          //   type: "effectScatter",
          //   coordinateSystem: "geo", //设置坐标系为 geo
          //   symbolSize: function (params) {
          //     return (params[2] / 100) * 15 + 5;
          //   },
          //   encode: {
          //     tooltip: 2,
          //   },
          //   itemStyle: {
          //     color: "#b02a02",
          //   },
          //   data: [
          //     //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
          //     {
          //       name: "北京",
          //       value: [116.41995, 40.18994, 80],
          //       itemStyle: {
          //         color: "#b02a02",
          //       },
          //     },
          //     {
          //       name: "郑州",
          //       value: [113.665412, 34.757975, 80],
          //       itemStyle: {
          //         color: "#b02a02",
          //       },
          //     },
          //     {
          //       name: "广州",
          //       value: [113.26453, 23.155008, 80],
          //       itemStyle: {
          //         color: "#b02a02",
          //       },
          //     },
          //   ],
          // },
        ],
      };
      chinaStatistics.setOption(options);
      window.addEventListener("resize", function () {
        chinaStatistics.resize();
      });
    },