echarts 地图制作 自定义标点

echarts 地图制作

echarts  geo 地图，以绘制浙江省地图为案例（没有下转）

浙江省数据获取 json 地址：https://datav.aliyun.com/portal/school/atlas/area_selector

 点击需要省份地图，下载坐标
目录下新建一个zhengjiang.js文件

代码片段

<template>
  <div class="content">
    <div
      ref="charts"
      :style="{ width: styleList.width, height: styleList.height }"
    ></div>
  </div>
</template>
<script>
引入echarts 和 创建好的坐标文件
import * as echarts from "echarts";
import zjData from "../../assets/js/zhejiang";
 
export default {
  props: ["styleList"],  // 根据不同地图的需求传入不同的值
  data() {
    return {
    };
  },
  created() {
    this.$nextTick(() => {
        this.initCharts();
    });
  },
  watch: {},
  methods: {
    initCharts() {
      const that = this;
      const charts = echarts.init(this.$refs["charts"]);
      const option = {
        // 背景颜色
        backgroundColor: "#081629",
        // 提示浮窗样式
        // 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,
        // },
        // 地图配置
        geo: {
          map: "zj",
          roam: this.styleList.isRoam, //关闭拖拽
          zoom: this.styleList.zoom || 1.2,  // 缩放的大小
          left: this.styleList.left,  // 地图的位置
          top: this.styleList.top, // 地图的位置
          center:
            this.styleList.content.length > 0
              ? this.styleList.content
              : [122.99, 29.1],  // 地图的中心点
          label: {
            // 通常状态下的样式
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: "#2cc7f5",
              borderColor: "#081629", //地图区域的边框
              borderWidth: 0.6,
              // 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", //effectScatter
            coordinateSystem: "geo",
            // effectType: "ripple",
            // showEffectOn: "render",
            // rippleEffect: {
            //   period: 10,
            //   scale: 10,
            //   brushType: "fill",
            // },
 
            symbol: `image://${this.styleList.url}`, // 自定义散点样式
            symbolSize: this.styleList.urlSize,  // 散点大小
            hoverAnimation: true,
            itemStyle: {
              normal: {
               
              },
            },
            zlevel: 1,
            data: that.styleList.mapData,  // 散点数据
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("zj", zjData);
 
      charts.setOption(option);
 
      鼠标移入事件
      charts.off("mousemove");
     
      charts.on("mousemove", (params) => {
     
      });
        鼠标移出事件
       charts.off("mouseout");
 
       charts.on("mouseout", (params) => {
       });
    },
  
  },
};
</script>复制

传入地图组件数据

 styleList: {
        width: "100%",
        height: "950px",
        mapData: [],
        url: require("../../assets/img/trade/address1.png"),
        urlSize: [11, 11],
        isRoam: false,  // 缩放大小
        left: "0",
        top: "20%",
        zoom: 3,
        content: [121.0, 28.72],
},复制