大屏echarts示例——中国地图

最近做了几个大屏，有很多echarts图表，挑重要的记录一下：

1. 中国地图

首先要找一个json文件，包含中国地区内所有地方的经纬度和名称等，初始化地图的时候需要

echarts.registerMap("china", { geoJSON: city });

这里的city就是我的json文件。在上方引入即可

import city from "./city";

这里我把它放在和大屏index同目录下了，注意引入时的路径

然后就可以画出地图了，

 echarts.registerMap("china", { geoJSON: city });
      if (!this.mapChart) {
        this.mapChart = echarts.init(this.$refs["map"]); //map是div元素的ref名称
      }
      let option = {
        tooltip: {
          trigger: "item",
          show: false,
        },
        geo: {
          show: true,
          map: "china",
          roam: true,
          zoom: 1.55,
          center: [106.83531246, 37.0267395887],    
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 1, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            roam: true,
            animation: false,
            data: [],
          },
        
        ],
      };
      this.mapChart.setOption(option);

 然后是地图样式相关的一些配置：

地图是否支持拖动和缩放：

在geo中加入roam属性即可。

option中加入tooltip可以在鼠标悬浮到某个区域的时候弹出标签

tooltip: {
          trigger: "item",
          show: true,
        },

geo对象中设置label，省份名称显示的样式

 label: {
            normal: {
              show: true,
              color: "rgb(249, 249, 249)", //省份标签字体颜色
              formatter: (p) => {
                switch (p.name) {
                  case "内蒙古自治区":
                    p.name = "内蒙古";
                    break;
                  case "西藏自治区":
                    p.name = "西藏";
                    break;
                  case "新疆维吾尔自治区":
                    p.name = "新疆";
                    break;
                  case "宁夏回族自治区":
                    p.name = "宁夏";
                    break;
                  case "广西壮族自治区":
                    p.name = "广西";
                    break;
                  case "香港特别行政区":
                    p.name = "香港";
                    break;
                  case "澳门特别行政区":
                    p.name = "澳门";
                    break;
                }
                return p.name;
              },
            },
          },

效果：

隐藏掉右下方的“南海诸岛”： 在geo中加入如下代码设置regions

//隐藏南海诸岛
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],

 设置每一个省份的区域内样式，在geo中加入如下代码设置itemStyle

itemStyle: {
            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: 0,
            },
          },

地图上显示一些点标记：在series中额外加入点标记对象

  {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 3,
            label: {
              show: false,
            },
            symbolSize: 14,
            data: this.piontData,
          },

这里面的pointData是一个数组，从接口拿到的点标记数据放里面，数据元素可以携带它的自定义属性，id，type，devName等都是自定义，以免后面需要这些属性值

this.piontData.push({
              name: ele.devId,
              id: ele.id,
              type: ele.deviceType,
              devName: ele.devName || ele.collectionName,
              value: [parseFloat(gpsArr[0]), parseFloat(gpsArr[1])],
              itemStyle: {
                color: color,
                opacity: 1,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 1,
              },
            });

上面的itemstyle是点标记的样式，这里由于要求给不同类设备显示不同颜色标记，color做了一些判断。

给点标记加tooltip：

这个tooltip得加到series里面，点标记对应的对象中，前提是option下面也要加tooltip且trigger=item，否则点标记的tooltip不会显示

  let option = {
        tooltip: {
          trigger: "item",
          show: false,
        },
...
...
}

  {
            tooltip: {
              show: true,
              formatter: function (params) {
                let html = "";
                let bgColor = "";
                if (params.data.type < 2)
                  bgColor =
                    "linear-gradient(0deg,rgba(10,74,39,0.6),rgba(102,253,181,0.6),rgba(10,74,39,0.6))";
                else if (params.data.type < 4)
                  bgColor =
                    "linear-gradient(0deg,rgba(97,40,14,0.6),rgba(255,159,116,0.6),rgba(97,40,14,0.6))";
                else
                  bgColor =
                    "linear-gradient(0deg,rgba(99,92,14,0.6),rgba(255,235,48,0.6),rgba(99,92,14,0.6))";
                html += `<div style="color: #fff;font-size: 16px;padding:2px 6px;
                border-radius: 12px;
                background: ${bgColor};                      
                      ">
                        <div>
                          <div>${params.data.devName}</div>
                        </div>
                      </div>`;
                return html;
              },
              textStyle: {
                color: "#fff",
              },
              padding: 0,
              backgroundColor: "transparent",
              extraCssText: "border-radius: 12px",
            },
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 3,
            label: {
              show: false,
            },
            symbolSize: 14,
            data: this.piontData,
          },

这里由于设计的标签样式有点复杂，所以用了html元素，简单点的样式，可以直接按照文档那些属性配置一下就可以了

效果：

 给点标记添加单击事件：初始化之前添加

 echarts.registerMap("china", { geoJSON: city });
      if (!this.mapChart) {
        this.mapChart = echarts.init(this.$refs["map"]);
        this.mapChart.off("click");
        this.mapChart.on("click", (params) => {
          if (params.seriesType === "scatter") {
            console.log("click", params, this.diaType);
            ...
            ...
          }
        });
      }
    
      this.mapChart.setOption(option);

给地图添加热力发散标记：在series中再额外加入一个对象 它的 type: “effectScatter”,

  series: [
          {
            type: "map",
            map: "china",
            ...
            ...
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 3,
            label: {
              show: false,
            },
            symbolSize: 14,
            data: this.piontData,
          },
          {
            name: "报警散点",
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              brushType: "fill",
            },
            itemStyle: {
              normal: {
                color: "#F4E925",
                shadowBlur: 20,
                shadowColor: "#333",
              },
            },
            data: this.effectedData,
            symbolSize: 20,
            showEffectOn: "render", //加载完毕显示特效
          },
        ],

代码007普通

打赏 收藏 海报 链接