echarts map展示省内城市数据的分布

以下已山东省为例，展示山东省内各个城市的数据（如销售量等）分布
展示效果如下：

图1.jpg

首先终端执行以下命令，下载安装echarts

npm install echarts --save

然后在阿里云 DataV - 数据可视化平台
中下载所需城市的json数据，例如山东省，下载完后重命名为shandong.json

在需要展示地图的页面中导入echarts，然后调用
template

<template>
  <div>
    <div id="canvas"></div>
  </div>
</template>

script

 <script>
  import * as echarts from 'echarts'
  import shandongjson from './shandong.json'
  export default{
    name:'mapPage',
    data(){
      return{
      }
    },
    mounted() {
      this.initMap()
    },
    methods:{
      initMap(){
          console.log(shandongjson,'--shandongjson');
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('canvas'));
          // 绘制图表
          //在echarts中注册名为山东的地图名称,与series[0].mapType 对应
          echarts.registerMap('山东', shandongjson);
          myChart.setOption({
            title: {
              text: 'ECharts 地图展示'
            },
            tooltip: {},
             visualMap: {
                    min: 800,
                    max: 50000,
                    zoom: 0.8,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                     left: "80%",
                    itemWidth: 15, //图形的宽度，即长条的宽度。
                    itemHeight: 60, //图形的高度，即长条的高度。
                    inRange: {
                      color: ['lightskyblue', 'yellow', 'orangered']
                    }
                  },
            series: [
              {
                name: '销量',
                type: 'map',
                mapType:'山东',
                zoom:1.1,//放大地图
                label: {
                  show: true
                },
                data: [//mock数据其中name属性对应GeoJson中features[].properties.name，很多时候后端返回的name名称和GeoJson的name名称不一致，可以使用nameMap来解决，也可以后端修改name后返回
                  {name:'济南市',value:20056 },
                  {name:'青岛市',value: 15477},
                  {name:'威海市',value: 31686},
                  {name:'烟台市',value: 6992},
                  {name:'潍坊市',value: 44045},
                  {name:'淄博市',value: 55204},
                  {name:'日照市',value: 21900},
                  {name:'临沂市',value: 4918},
                  {name:'济宁市',value: 2227},
                  {name:'枣庄市',value: 2180},
                  {name:'菏泽市',value: 9173},
                  {name:'聊城市',value: 5881},
                  {name:'泰安市',value: 805},
                  {name:'德州市',value: 2000},
                  {name:'滨州市',value: 6000},
                  {name:'东营市',value: 12100},
                  ],
              }
            ]
          });
      }
    }
  }
</script>

style

<style scoped="scoped">
  #canvas{
    width: 96%;
    margin-left: 2%;
    height: 600px;
}
</style>

如果地图中不想展示城市名称，可以将series中label--》show设置为false

图2.jpg