vue2.0+echarts实现多省份地图加双柱状图展示（保姆级教程）_echarts 中国地图么给省份加个柱状图-CSDN博客

首先放效果图
在这里插入图片描述

实现思路大致是：

使用echarts绘制出地图

把获取到的数据和省份坐标对应上

开始之前我默认您已成功下载和导入相关插件

第一步

打开 地图选择器网站 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6
在这里插入图片描述
鼠标点击你想要的省份然后在右边根据需要看是否勾选（包含子区域），如果勾选了就会有市地区级的坐标，我这个项目是不需要的，所以不勾选，然后根据需要点击第三行------其他类型点击下载保存你会得到该省份的 .json文件，然后依次下载需要的省份json文件

第二步

打开GEOJSON.IO网站 https://geojson.io/#map=2/0/20
该网站可以上传多个省份JSON，并且会在右边显示合并后的JSON文件，直接保存即可。
在这里插入图片描述

因为我的地图里是不需要展示
海南的四大群岛，所以需要手动删除该处的地理坐标，不然它会占很大的位置你的省份地图就会很小很小
最后，基于合并后的多省份JSON，需要在内容开头加上 var name= 即可，其中name可以自行命名，并将该文件保存为multiprovinces.js.
在这里插入图片描述
记得导出去啊宝子们！!
到目前为止，准备工作做完了，恭喜我们吧哈哈哈哈哈~

第三步绘制省份地图

有了省份js文件，接下来就生成一个.vue文件然后引入你的multiprovinces.js

<div>
  <div id="main" class="earth_right"></div>
</div>
<script>
  import * as echarts from 'echarts'
  import myProvince from '@/assets/js/multiprovinces.js'
  import to from '@/utils/to'
  export default {
     
     
     data () {
     
     
           return {
     
     
            myChart: null,
            qualityMap:[],
            centerData: {
     
     }, // 柱状图中心点的位置
           }
       },
     created () {
     
     
 
           var arr = myProvince.features
           arr.length > 0 && arr.forEach((item, index) => {
     
     
             var obj = {
     
     }
             this.centerData[item.properties.name] = item.properties.center
           })
       },
     methods: {
     
     
       //  绘制地图
     async getEarth () {
     
     
      var _this = this
      var mapChatDate = myProvince// 使用multiprovinces.js中的变量
      echarts.registerMap('myProvince', mapChatDate)
      this.myChart = echarts.init(document.getElementById('main'))
 
     const option = {
     
     
       legend: {
     
     
         show: true,
         orient: 'vertical' /* 标签文字垂直 */,
         right: '10%',
         top: '10%', // 居中展示
         align: 'left'