vue eachrts 地图

vue + echarts 地图下钻功能

史上最菜开发

93人浏览 · 2023-05-18 10:14:07

史上最菜开发 · 2023-05-18 10:14:07 发布

这个算是转载的文章吧，转自：https://blog.csdn.net/SkelleBest/article/details/121204097
然后加上我自己的一些注释和理解，相似度99%，这个版本是vue 2.6 + 和 eachrts 5.4.2版本的使用

echarts地图制作
离线地图下载地址https://datav.aliyun.com/tools/atlas/index.html
echarts文档地址https://echarts.apache.org/zh/option.html

直接上**.vue**文件的代码（目前没有动态数据，都是写死的数据）
确实是可以点击的代码，而且是可以地图下钻

<template>
  <div class="china-map">
    <div ref="charts" id="mapChart" style="width: 100%; height: 100vh"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getMap } from "../../utils/mapUtils.js";
export default {
  name: "china-map",
  components: {},
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
      // 监听图表容器的大小并改变图表大小
      var myChart = echarts.init(document.getElementById("mapChart"));
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
  },
  mounted() {},
  methods: {
    initCharts() {
      // const charts = echarts.init(this.$refs["charts"]);
      const charts = echarts.init(document.getElementById("mapChart"));

      const option = {
        // graphic 是原生图形元素组件。
        graphic: [
          {
            // 水印类型
            type: "text",
            // 相对于容器的位置
            left: "10%",
            top: "10%",
            // 样式设置
            style: {
              // 文本内容
              text: "中国",
              // 字体粗细、大小、字体
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              // 字体颜色
              fill: "#fff",
            },
            // 点击事件
            onclick: () => {
              const [grahpName, graphJson] = getMap("中国");
              const index = option.graphic.findIndex(
                (i) => i.style.text === "中国"
              );
              // 点击元素之后的所有元素全部删除
              option.graphic.splice(index + 1);
              // 很多操作重复了，你可以将公共部分抽离出来
              option.geo.map = mapName;
              echarts.registerMap(grahpName, graphJson);
              charts.setOption(option, true);
            },
          },
        ],
        // 背景颜色
        backgroundColor: "#404a59",
        // 提示浮窗样式
        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(params) {
            return `地区：${params.name}</br>数值：${params.value[2]}`;
          },
        },
        // 地图配置
        geo: {
          map: "china",
          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: 0,
            },
          },
        },
        series: [
          // {
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbol: "pin",
          //   legendHoverLink: true,
          //   symbolSize: [60, 60],
          //   // 这里渲染标志里的内容以及样式
          //   label: {
          //     show: true,
          //     formatter(value) {
          //       return value.data.value[2];
          //     },
          //     color: "#fff",
          //   },
          //   // 标志的样式
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(255,0,0,.7)",
          //       shadowBlur: 2,
          //       shadowColor: "D8BC37",
          //     },
          //   },
          //   // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
          //   // 至于如何展示，完全是靠上面的formatter来自己定义的
          //   data: [
          //     { name: "西藏", value: [91.23, 29.5, 2333] },
          //     { name: "黑龙江", value: [128.03, 47.01, 1007] },
          //   ],
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   zlevel: 1,
          // },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              period: 10,
              scale: 10,
              brushType: "fill",
            },

            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "rgba(255, 235, 59, .7)",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
            data: [
              { name: "西藏", value: [91.23, 29.5, 2333] },
              { name: "黑龙江", value: [128.03, 47.01, 1007] },
            ],
          },
        ],
      };

      // 传入name默认显示第一次显示的地图
      const [mapName, mapJson] = getMap("中国");
      option.geo.map = mapName;

      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap(mapName, mapJson);
      charts.setOption(option);

      // 防止graph里频繁添加click事件，在添加click事件之前先全部清空掉。
      charts.off();
      charts.on("click", ({ name }) => {
        // 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击
        const index = option.graphic.findIndex((i) => i.style.text === name);
        if (!name || index !== -1) return;
        const [mapName, mapJson] = getMap(name);
        // 这里做一个判断，如果说没有改省、市、区的下钻数据，就不在执行后面的操作
        if (!mapName && !mapJson) return this.$message.warning("暂无该数据");
        option.geo.zoom = 0.8;
        option.geo.map = mapName;
        // 为了重新定位，这里使用了length
        const idx = option.graphic.length + 1;
        option.graphic.push({
          type: "text",
          left: `${idx * 10}%`,
          top: "10%",
          style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#fff",
          },
          onclick: () => {
            // 利用函数的作用域，可以直接拿上面的name来用
            const [grahpName, graphJson] = getMap(name);
            const index = option.graphic.findIndex(
              (i) => i.style.text === name
            );
            // 点击元素之后的所有元素全部删除
            option.graphic.splice(index + 1);
            // 很多操作重复了，你可以将公共部分抽离出来
            option.geo.map = mapName;
            echarts.registerMap(grahpName, graphJson);
            charts.setOption(option, true);
          },
        });
        echarts.registerMap(mapName, mapJson);
        charts.setOption(option, true);
      });
    },
  },
};
</script>

<style scoped lang="less">
.china-map {
  background-image: url("../../assets/img/bgImg.png");
  background-size: 100% 100%;
}
</style>

js 文件的代码

import china from "../assets/js/map/zhongguo.json";

import guangdong from "../assets/js/map/guangdong.json";

import guangzhou from '../assets/js/map/广州市.json'
import shenzhen from '../assets/js/map/深圳市.json'
import zhuhai from '../assets/js/map/珠海市.json'
import zhongshan from '../assets/js/map/中山市.json'
import dongguan from '../assets/js/map/东莞市.json'
import yunfu from '../assets/js/map/云浮市.json'
import foshan from '../assets/js/map/佛山市.json'
import jiangmen from '../assets/js/map/江门市.json'
import huizhou from '../assets/js/map/惠州市.json'
import zhanjiang from '../assets/js/map/湛江市.json'
import qingyuan from '../assets/js/map/清远市.json'
import yangjiang from '../assets/js/map/阳江市.json'
import shaoguan from '../assets/js/map/韶关市.json'
import maoming from '../assets/js/map/茂名市.json'
import jieyang from '../assets/js/map/揭阳市.json'
import meizhou from '../assets/js/map/梅州市.json'
import shantou from '../assets/js/map/汕头市.json'
import shanwei from '../assets/js/map/汕尾市.json'
import chaozhou from '../assets/js/map/潮州市.json'
import heyuan from '../assets/js/map/河源市.json'
import zhaoqing from '../assets/js/map/肇庆市.json'

import yuexiu from '../assets/js/map/越秀区.json'
import huangpu from '../assets/js/map/黄埔区.json'
import conghua from '../assets/js/map/从化区.json'
import nansha from '../assets/js/map/南沙区.json'
import zengcheng from '../assets/js/map/增城区.json'
import tianhe from '../assets/js/map/天河区.json'
import haizhu from '../assets/js/map/海珠区.json'
import panyu from '../assets/js/map/番禺区.json'
import baiyun from '../assets/js/map/白云区.json'
import huadu from '../assets/js/map/花都区.json'
import liwan from '../assets/js/map/荔湾区.json'

const mapDict = {
  中国: "china",
  广东省: "guangdong",
  广州市: 'guangzhou',
  深圳市: 'shenzhen',
  珠海市: 'zhuhai',
  中山市: 'zhongshan',
  东莞市: 'dongguan',
  云浮市: 'yunfu',
  佛山市: 'foshan',
  江门市: 'jiangmen',
  惠州市: 'huizhou',
  湛江市: 'zhanjiang',
  清远市: 'qingyuan',
  阳江市: 'yangjiang',
  韶关市: 'shaoguan',
  茂名市: 'maoming',
  揭阳市: 'jieyang',
  梅州市: 'meizhou',
  汕头市: 'shantou',
  汕尾市: 'shanwei',
  潮州市: 'chaozhou',
  河源市: 'heyuan',
  肇庆市: 'zhaoqing',
  越秀区: 'yuexiu',
  黄埔区: 'huangpu',
  从化区: 'conghua',
  南沙区: 'nansha',
  增城区: 'zengcheng',
  天河区: 'tianhe',
  海珠区: 'haizhu',
  番禺区: 'panyu',
  白云区: 'baiyun',
  花都区: 'huadu',
  荔湾区: 'liwan',
}

const mapData = {
  china,
  guangdong,
  guangzhou,
  shenzhen,
  zhuhai,
  zhongshan,
  dongguan,
  yunfu,
  foshan,
  jiangmen,
  huizhou,
  zhanjiang,
  qingyuan,
  yangjiang,
  shaoguan,
  maoming,
  jieyang,
  meizhou,
  shantou,
  shanwei,
  chaozhou,
  heyuan,
  zhaoqing,
  yuexiu,
  huangpu,
  conghua,
  nansha,
  zengcheng,
  tianhe,
  haizhu,
  panyu,
  baiyun,
  huadu,
  liwan,
}

export function getMap(mapName) {
  const cityName = mapDict[mapName];
  if (cityName) {
    return [cityName, mapData[cityName]];
  }
  return [null, null];
 // return ['中国', china];  // 第一次不传的话，默认是中国地图,一开始想这么写的，但是好像有点Bug，点击中国的时候，返回不了中国地图，然后就没这么写了
}

上图片效果
在这里插入图片描述