echart+DataV实现地图的切换

最新推荐文章于 2024-12-05 10:25:56 发布

番茄炒西红柿炒圣女果

最新推荐文章于 2024-12-05 10:25:56 发布

阅读量913

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript echarts 开发语言

本文链接：https://blog.youkuaiyun.com/hxiaobaicai/article/details/128575683

该文详细介绍了如何在阿里云DataV中利用Echarts进行地图的初始化和交互设置，包括导入JSON文件，注册地图，设置地图的显示和选中模式，以及响应单击和双击事件来切换不同级别的地理区域展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备工作

在阿里云的DataV中下载需要的地图json文件
地址：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddkUHa9E

开始开发

引入json文件

import * as echarts from "echarts";
import ningxia from "../assets/json/宁夏回族自治区.json";
import shizuishan from "../assets/json/石嘴山市.json";
import yinchuan from "../assets/json/银川市.json";
import wuzhong from "../assets/json/吴忠市.json";
import zhongwei from "../assets/json/中卫市.json";
import guyuan from "../assets/json/固原市.json";

初始化地图

  data() {
    return {
      mapData: "",
      cityData: [
        { 石嘴山市: shizuishan },
        { 银川市: yinchuan },
        { 吴忠市: wuzhong },
        { 中卫市: zhongwei },
        { 固原市: guyuan },
      ],
    };
  },

 initEchart() {
      // 注册地图
      echarts.registerMap("ningxia", ningxia); // 如果是js引入就不需要这一行了
      var myChart = echarts.init(document.getElementById("mapChart"));
      window.mapChart = myChart;
      // this.mapData = ningxia.features;
      // 初始化
      myChart.setOption({
        tooltip: {
          show: false,
        },
        geo: {
          show: true,
          map: "ningxia",
          selectedMode: "single",
          zoom: 1,
          roam: false,
          label: {
            normal: {
              show: false, // 省份名展示
              color: "#FFF",
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#0093E2",
              borderColor: "#2FB5FA",
              borderWidth: 2,
              shadowColor: "#01273F",
              shadowOffsetX: 0,
              shadowOffsetY: 10,
            },
            emphasis: {
              areaColor: "#2C7FD6",
            },
          },
        },
        series: [
          {
            name: "light",
            zlevel: 30,
            type: "effectScatter",
            coordinateSystem: "geo",
            data: null,
            symbolSize: function (val) {
              return val ? val[2] / 10 : 0;
            },
            symbolOffset: ["-100%", "0"],
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5,
            },
            hoverAnimation: true,
            itemStyle: {
              color: "#fff",
              shadowBlur: 2,
              shadowColor: "#333",
            },
          },
          {
            type: "map",
            zlevel: 20,
            //注册的大地图
            map: "ningxia",
            roam: false,
            zoom: 1,
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#0B58BA",
                borderColor: "#2FB5FA",
                borderWidth: 2,
              },
              emphasis: {
                areaColor: "#2C7FD6",
              },
            },
            data: null,
          },
          {
            name: "scatter",
            zlevel: 30,
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "rect",
            symbolSize: function (value, params) {
              return [params.name.length * 16.67, 18];
            },
            data: null,
            itemStyle: {
              normal: {
                color: "transparent",
                // color: '#fff'
              },
            },
            label: {
              normal: {
                formatter: function (params) {
                  const name = "m." + params.name;
                  if (this.$t(name).startsWith("m.")) {
                    return params.name;
                  }
                  return this.$t(name);
                }.bind(this),
                show: false,
                fontSize: 18,
                color: "#fff",
                fontWeight: 550,
              },
              emphasis: {
                show: false,
                fontSize: 20,
                color: "#00DFFF",
              },
            },
          },
        ],
      });
      // 单击
      myChart.on("click", (params) => {
        let _this = this;
        let cityArr = _this.cityData.filter((item) => item[params.name]);
        let cityName = cityArr[0][params.name];
        //注册点击进入的小地图
        echarts.registerMap(`${cityName}`, cityName);
        myChart.setOption({
          geo: {
            show: true,
            map: `${cityName}`,
            selectedMode: "single",
            zoom: 1,
            roam: false,
          },
          series: [
            {
              name: "light",
              zlevel: 30,
              type: "effectScatter",
              coordinateSystem: "geo",
            },
            {
              type: "map",
              zlevel: 20,
              //注册的小地图
              map: `${cityName}`,
              roam: false,
              zoom: 1,
              showLegendSymbol: false, // 存在legend时显示
              data: null,
            },
            {
              name: "scatter",
              zlevel: 30,
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "rect",
              data: null,
            },
          ],
        });
        // }, 1000);
      });
      // 双击返回大地图
      myChart.on("dblclick", () => {
        myChart.setOption({
          geo: {
            show: true,
            map: "ningxia",
            selectedMode: "single",
            zoom: 1,
            roam: false,
          },
          series: [
            {
              name: "light",
              zlevel: 30,
              type: "effectScatter",
              coordinateSystem: "geo",
            },
            {
              type: "map",
              zlevel: 20,
              map: "ningxia",
              roam: false,
              zoom: 1,
              showLegendSymbol: false, // 存在legend时显示
              data: null,
            },
            {
              name: "scatter",
              zlevel: 30,
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "rect",
              data: null,
            },
          ],
        });
      });
    },

（完结）