vue echarts地图

下载地图文件:

DataV.GeoAtlas地理小工具系列

范围选择器右侧行政区划范围中输入需要选择的省份或地市,选择自己想要的数据格式,这里选择了geojson格式,点右侧的蓝色按钮复制到浏览器地址栏中,打开的geojson文件内容右键另存为json文件即可。

实现代码:

javascript 复制代码
init() {
      // 画布初始化
      if (myChart) {
        myChart.dispose(); // 销毁实例
      }
      let mapDom = document.getElementById("map");
      myChart = echarts.init(mapDom);
      // 隐藏数据刷新动画
      myChart.hideLoading();
      // 注册可用的地图
      echarts.registerMap("jiangsu", jiangsuJson);
      let option = {
        tooltip: {
          triggerOn: "mousemove", // 鼠标移动时触发
        },
        visualMap: {
          show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
          type: "continuous", // 类型为连续型视觉映射
          range: [0, 100], // 定义数据范围,不同数值大小显示为不同的颜色
          calculable: false, // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
          inRange: {
            // 定义在选中范围中的视觉元素
            color: ["#00ffff", "#f36a00"]
          },
        },
        // 地理坐标系组件
        geo: {
          map: "jiangsu",
          aspectScale: 0.75, //长宽比
          zoom: 1.2,
          roam: false, // 滚轮 放大缩小
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: {
                // 默认区块颜色
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BFFFDD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF", // 100% 处的颜色
                  },
                ],
              },
              shadowColor: "#FFFFFF", // 青色
              shadowBlur: 0,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            id: "map",
            type: "map", // 图表类型
            map: "jiangsu", // 已注册的地图
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#333",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#ece8ef",
                },
              },
            },
            select: {
              // 选中状态下的多边形和标签样式
              itemStyle: {
                borderColor: "#E167F5",
                borderWidth: 1,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3AD7FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0FE017", // 100% 处的颜色
                    },
                  ],
                },
              },
              label: {
                color: "#ece8ef",
              },
            },
            itemStyle: {
              // 地图区域的多边形 图形样式
              normal: {
                borderColor: "#0FE017",
                borderWidth: 0.4,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#DFFBFD", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                },
              },
              emphasis: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#D7FFA3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#70FE01", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#1F567E",
                borderWidth: 1,
                shadowColor: "rgba(150, 225, 245, 0.7)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
            animation: false,
            data: [
              { name: '南京', value: 9 },
              { name: '宿迁', value: 12 },
            ],
          },
        ],
      };
      // 将配置应用到地图上
      myChart.setOption(option);
      document.getElementById("map").removeEventListener;
      window.addEventListener("resize", () => {
        myChart.resize();
      });
}
相关推荐
小宋10215 分钟前
实现Excel文件和其他文件导出为压缩包,并导入
java·javascript·excel·etl
码喽哈哈哈5 分钟前
day01
前端·javascript·html
mubeibeinv37 分钟前
分页/列表分页
java·前端·javascript
林太白42 分钟前
js属性-IntersectionObserver
前端·javascript
爱吃羊的老虎1 小时前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
GISer_Jing2 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii2 小时前
工作中可以用到的前端小知识(不定时更新)
javascript
bpmf_fff2 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
计算机学姐2 小时前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
工业互联网专业3 小时前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计