【echarts区域地图】

背景：我们在制作大屏的时候，经常会使用到echarts制作各种图表，饼图，柱状图，折线图。有时候也会用到地图的交互，使大屏效果看起来更加高级。

我们要完成上面的效果需要准备什么呢？
首先是需要我们待绘制地图的json。这里我们以成都新都区为例。

接下来就是开始渲染地图了。
map.view

<div ref="mapContainer" style="width: 100%; height: 100%"></div>
import xinduMap from "@/assets/mapJson/xindu.json";

initMap() {
  const mapContainer = this.$refs.mapContainer;
  const chart = echarts.init(mapContainer);
  // 注册地图
  echarts.registerMap("xinduDistrict", xinduMap);
  // 设置地图选项
  const option = {
    tooltip: {
      trigger: "item", // 提示框触发类型
    },
    itemStyle: {
      areaColor: {
        type: "linear-gradient",
        x: 0,
        y: 1500,
        x2: 1000,
        y2: 0,
        colorStops: [
          {
            offset: 0.5,
            color: "rgba(73, 145, 218,0)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(99, 142, 199,1)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      emphasis: {
        show: false,
        areaColor: "#389BB7",
      },
      borderColor: "rgba(104, 208, 255, .4)",
      borderWidth: 1,
      shadowColor: "rgba(66, 129, 193, .5)",
      shadowOffsetX: 1,
      shadowOffsetY: 10,
      shadowBlur: 1,
    },
    series: [
      {
        selectedMode: false,
        itemStyle: {
          // 地图区块的样式
          normal: {
            areaColor: "#3E587F", // 地图底色，这里设置为浅灰色
            borderColor: "#9CA7BA", // 边界线颜色
            borderWidth: 1, // 边界线宽度
          },
        },
         emphasis: {
          // focus: "self", //突出选中的区域 其它区域谈化效果
          itemStyle: {
            opacity: 0.5,
            borderColor: "#fff",
            borderWidth: "2",
            areaColor: "#52A6F2",
          },
        },
        name: "新都区地图",
        type: "map",
        map: "xinduDistrict", // 使用注册的地图名称
        roam: false, // 是否开启鼠标缩放和平移漫游
        label: {
          show: true, // 是否显示标签
          color: "#9CA7BA", // 标签颜色
        },
        markPoint: {
          symbol: "circle",
          data: [
            {
              name: "大丰街道",
              coord: [104.053, 30.765],
              value: "地图标点1",
              type: 1,
            },
            {
              name: "新繁镇",
              coord: [104.0, 30.89],
              value: "地图标点2",
              type: 2,
            },
            {
              name: "新都镇",
              coord: [104.174, 30.8],
              value: "地图标点3",
              type: 1,
            },
          ],
        },
      },
    ],
  };
  let _this = this;
  // 使用配置项和数据显示图表
  chart.setOption(option);
  chart.on("click", function (params) {
    if (params.componentType === "markPoint") {
     // 地图标点的点击事件交互
    }
  });
},

原文地址：https://blog.csdn.net/weixin_45101949/article/details/140603026

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！