备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

vue + echarts实现中国地图省份下钻联动

2022-06-20 1270
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 🎈最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图📈，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结，也给大家分享一下在vue中echarts地图的使用，以及如何实现省市下钻联动📝

image.png

说在前面

🎈最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图📈，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结，也给大家分享一下在vue中echarts地图的使用，以及如何实现省市下钻联动📝

jyeontu-vue-demo - Google Chrome 2022_4_4 16_43_37 00_00_00-00_00_30.gif

体验

http://jyeontu.xyz/JDemo/#/china

引入echarts

npm下载

npm install echarts

cdn引入

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
></script>

引入中国地图china.js

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
></script>

配置中国地图

定义一个div来作为地图的载体

render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main",
      },
      style: {
        height: "450px",
        width:'600px',
        margin: 'auto'
      },
    });
},

设置各省份的值

  • 定义省份数据
data() {
    return {
      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京"},
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南"},
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南"},
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西"},
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾"},
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" },
      ],
    };
  },
  • 随机给各省份赋值
let dataList = this.dataList;
for(let i = 0; i < dataList.length; i++){
    dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}

鼠标悬浮展示

option中的tooltip可以设置鼠标悬浮在省份上的数据显示

// 鼠标悬浮提示框
series: [
  {
    name: "省份",
    type: "map",
    geoIndex: 0,
    data: this.dataList,
  },
],
tooltip: {
  //数据格式化
  formatter: function(params, callback) {
    return (
      params.seriesName + "<br />" + params.name + "：" + params.value
    );
  },
},

如下图为鼠标悬浮在广东上的数据提示👇
1649063133(1).png

visualMap图注配置数值映射

在min和max中，数值越大，区域颜色越深。

visualMap: {
    min: 0, //最小值
    max: 1000, //最大值
    left: "left", //位于地图左边
    top: "bottom",//位于地图下方
    text: ["高", "低"], //取值范围的文字
    inRange: {
        color: ["#e0ffff", "blue"], //取值范围的颜色
    },
    show: true, //图注
},

geo地图绘制

geo: {
  map: "china", //引入地图数据
  roam: false, //不开启缩放和平移
  zoom: 1, //视角缩放比例
  label: {
    normal: {
      show: true,
      fontSize: "10",
      color: "rgba(0,0,0,0.7)",
    },
  },
  itemStyle: {
    normal: {
      borderColor: "rgba(0, 0, 0, 0.2)",
    },
    emphasis: { //高亮的显示设置
      areaColor: "skyblue", //鼠标选择区域颜色
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      shadowBlur: 20,
      borderWidth: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)",
    },
  },
},

省份区域点击事件

可以通过该点击事件实现省份下钻联动，点击跳转到省级地图页面，省级地图页面根据传入参数渲染不同的省份地图数据即可，具体实现后面会讲到。

myChart.on("click", function(params) {
    if(!params.data.ename){
      alert('暂无' + params.name + '地图数据');
      return;
    }
    _this.$router.push({
      path: "/province",
      query: { provinceName: params.data.ename, province: params.name },
    });
});

完整代码

<script>
export default {
  render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main",
      },
      style: {
        height: "450px",
        width:'600px',
        margin: 'auto'
      },
    });
  },
  data() {
    return {
      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京"},
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南"},
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南"},
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西"},
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾"},
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" },
      ],
    };
  },
  methods: {
    initEchart() {
      let dataList = this.dataList;
      for(let i = 0; i < dataList.length; i++){
        dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
      }
      const _this = this;
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          //数据格式化
          formatter: function(params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"], //取值范围的颜色
          },
          show: true, //图注
        },
        geo: {
          map: "china", //引入地图数据
          roam: false, //不开启缩放和平移
          zoom: 1, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: { //高亮的显示设置
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function(params) {
        if(!params.data.ename){
          alert('暂无' + params.name + '地图数据');
          return;
        }
        _this.$router.push({
          path: "/province",
          query: { provinceName: params.data.ename, province: params.name },
        });
      });
    },
  },
  mounted() {
    this.initEchart();
  },
};
</script>

展示效果

image.png

配置省级地图

前面通过中国地图的省份区域点击事件跳转到省级地图页面，并传递对应参数，在省级地图页面可以根据参入参数来渲染不同的地图数据。

引入省份地图资源

如下图，省份地图资源的js版数据和json版数据我都已经放在源码中，这里我使用的是json版数据，有需要的同学可以直接去下载。\
1649064049(1).png

编写简单页面

返回按钮+省级地图。

<div>
    <div @click="goBack()">返回</div>
    <div :id="id" class="o-echarts"></div>
</div>

地图配置

与前面中国地图的配置规则是一样的，按需配置即可

option: {
    title: {
      text: '',
      top: '8%',
      left: '8%',
      textStyle: {
        fontSize: 14,
        fontWeight: 300,
        color: '#b6d7ff'
      }
    },
    tooltip: {
      padding: 0,
      // 数据格式化
      formatter: function (params, callback) {
        return params.name + '：' + params.value
      }
    },
    legend: {
      orient: 'vertical',
      top: '9%',
      left: '5%',
      icon: 'circle',
      data: [],
      selectedMode: 'single',
      selected: {},
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 30,
      inactiveColor: '#b6d7ff',
      textStyle: {
        color: '#ec808d',
        fontSize: 14,
        fontWeight: 300,
        padding: [0, 0, 0, 15]
      }
    },
    visualMap: {
      min: 0,
      max: 500,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 取值范围的文字
      inRange: {
        color: ['#e0ffff', 'blue'] // 取值范围的颜色
      },
      show: true // 图注
    },
    geo: {
      map: '',
      roam: false, // 不开启缩放和平移
      zoom: 0.6, // 视角缩放比例
      label: {
        normal: {
          show: true,
          fontSize: 10,
          color: '#000'
        },
        emphasis: {
          show: true,
          color: 'blue',
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: 'skyblue', // 鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      left: '5%',
      right: '5%',
      top: '5%',
      bottom: '5%'
    },
    series: [
      {
        name: '年度总项目数据查询',
        type: 'map',
        geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
        data: []
      }
    ],
    provinceJSON: {},
    provinceName: ''
  }

根据参数配置不同地图数据

const provinceName = this.$route.query.provinceName
const province = this.$route.query.province
this.provinceName = provinceName
this.provinceJSON = require('../../utils/省份数据/json(省份)/' + provinceName)
this.option.geo.map = province
this.echartObj = echarts.init(document.getElementById(this.id))
echarts.registerMap(province, this.provinceJSON)
this.echartObj.setOption(this.option);
window.addEventListener('resize', () => {
  if (this.echartObj && this.echartObj.resize) {
    this.echartObj.resize()
  }
})

完整代码

<template>
  <div>
    <div @click="goBack()">返回</div>
    <div :id="id" class="o-echarts"></div>
  </div>
</template>

<script>
export default {
  name: 'province',
  data () {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      option: {
        title: {
          text: '',
          top: '8%',
          left: '8%',
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
            color: '#b6d7ff'
          }
        },
        tooltip: {
          padding: 0,
          //   backgroundColor: "transparent",
          // 数据格式化
          formatter: function (params, callback) {
            return params.name + '：' + params.value
          }
        },
        legend: {
          orient: 'vertical',
          top: '9%',
          left: '5%',
          icon: 'circle',
          data: [],
          selectedMode: 'single',
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: '#b6d7ff',
          textStyle: {
            color: '#ec808d',
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15]
          }
        },
        visualMap: {
          min: 0,
          max: 500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
          inRange: {
            color: ['#e0ffff', 'blue'] // 取值范围的颜色
          },
          show: true // 图注
        },
        geo: {
          map: '',
          roam: false, // 不开启缩放和平移
          zoom: 0.6, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: 10,
              color: '#000'
            },
            emphasis: {
              show: true,
              color: 'blue',
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: 'skyblue', // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%'
        },
        series: [
          {
            name: '年度总项目数据查询',
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: []
          }
        ],
        provinceJSON: {},
        provinceName: ''
      }
    }
  },
  mounted () {
    const provinceName = this.$route.query.provinceName
    const province = this.$route.query.province
    this.provinceName = provinceName
    this.provinceJSON = require('../../utils/省份数据/json(省份)/' + provinceName)
    this.option.geo.map = province
    this.echartObj = echarts.init(document.getElementById(this.id))
    echarts.registerMap(province, this.provinceJSON)
    this.echartObj.setOption(this.option);
    window.addEventListener('resize', () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize()
      }
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
  }
}
</script>
<style lang="scss">
.o-echarts {
  height: 400px;
  width: 600px;
  margin: auto;
}
</style>

源码地址

Gitee: https://gitee.com/zheng_yongtao/jyeontu-vue-demo.git

说在后面

🎉这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。
文章标签：
JavaScript
前端开发
定位技术
CDN
算法
数据格式
JSON
关键词：
vue ECharts下钻
ECharts联动
ECharts vue
ECharts地图
VUE.js地图
JYeontu
目录
相关文章
JYeontu
|
2月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
JYeontu
59 0
海风极客
|
3月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
海风极客
24 0
前端技术栈
|
3月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
前端技术栈
145 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
无妄的罪
|
4月前
|
JavaScript 容器
vue echarts图表自适应屏幕变化
vue echarts图表自适应屏幕变化
无妄的罪
63 0
凤囚凰丶
|
JavaScript 数据格式
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
凤囚凰丶
2039 0
凤囚凰丶
|
JavaScript 数据格式
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
凤囚凰丶
6304 0
SarPro
|
7天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
SarPro
34 3
微芒不朽
|
2天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
微芒不朽
13 0
微芒不朽
|
2天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
微芒不朽
12 0
微芒不朽
|
2天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
微芒不朽
7 0

热门文章

最新文章

  • 1
    Spring Boot整合 mybatisplus（后端） Vue+echarts+Element UI+axios（前端）---前后端项目实例demo
  • 2
    vue3快速上手
  • 3
    【统计图】Echarts实现多条折线图渐变堆叠效果
  • 4
    Vue3——Router4教程(小满版本)（二）
  • 5
    VUE获取上月、当月、前几月等等问题
  • 6
    vue利用级联选择器实现全国省市区乡村五级菜单联动
  • 7
    Vue3项目中使用vue-router
  • 8
    Vue.js学习详细课程系列--共32节（1 / 6）
  • 9
    echarts 横纵分割线颜色透明度
  • 10
    vue实现下拉列表远程搜索示例（根据关键词模糊搜索）
  • 1
    在vue中，怎样理解 Vue 的单向数据流？
    20
  • 2
    在vue中，Class 与 Style 如何动态绑定？
    16
  • 3
    在vue中，v-show 与 v-if 有什么区别？
    22
  • 4
    在vue中，如何实现SPA单页面应用的路由管理？
    20
  • 5
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    35
  • 6
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    41
  • 7
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    34
  • 8
    如何进行 Vue 项目的构建和部署？
    47
  • 9
    Vue.js中的diff算法：让虚拟DOM更高效
    36
  • 10
    Vue.js 深度解析：模板编译原理与过程
    43

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4