vue中使用echart绘制地图

需要引入的配置文件：china.json

一、简单的页面绘制

1.下载所需要的插件并引入

// 下载echart的插件
npm install echarts --save
// 在vue文件中引入
import * as echarts from "echarts";

2.在页面中引入配置文件

// 就是上面显示的配置文件
import china from "@/utils/mapJson.json";

具体的代码设置：

<template>
  <div class="map">
    <div id="map"></div>
  </div>
</template>

<script>
import china from "@/utils/mapJson.json";
import * as echarts from "echarts";
export default {

  name: '',

  props: {},

  components: {},

  data () {
    return {}
  },

  computed: {},

  watch: {},
  created () { },

  methods: {
    init () {
       this.$echarts.registerMap("china", china);
       let chart = echarts.init(document.getElementById('map'))
       chart.setOption({
        geo: {
          map: 'china',
          itemStyle: {
            normal: {
              areaColor: '#4d9af8', // 地图默认状态下的样式
              borderColor: '#111' // 地图区域边框的颜色
            },
            emphasis: {
              areaColor: '#b0cdee' // 鼠标滑过高亮显示的颜色
            }
          }
        },
        tooltip: {
          trigger: 'item',
        },
        series: [

        ]
      })
    }
  },

  mounted () {
    this.init()
  },
}
</script> 

<style scoped lang="less">
.map {
  width: 100%;
  height: 100%;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>

二、根据数据给地图添加颜色

1. 可以根据后端返回的数据进行修改

export const mapData = [
  { name: '新疆', count: 10 },
  { name: '西藏', count: 20 },
  { name: '内蒙古', count: 10 },
  { name: '青海', count: 20 },
  { name: '四川', count: 60 },
  { name: '黑龙江', count: 30 },
  { name: '甘肃', count: 90 },
  { name: '云南', count: 40 },
  { name: '广西', count: 70 },
  { name: '湖南', count: 500 },
  { name: '陕西', count: 100 },
  { name: '广东', count: 20 },
  { name: '吉林', count: 30 },
  { name: '河北', count: 40 },
  { name: '湖北', count: 50 },
  { name: '贵州', count: 60 },
  { name: '山东', count: 70 },
  { name: '江西', count: 80 },
  { name: '河南', count: 90 },
  { name: '辽宁', count: 100 },
  { name: '山西', count: 110 },
  { name: '安徽', count: 100 },
  { name: '福建', count: 90 },
  { name: '浙江', count: 80 },
  { name: '江苏', count: 70 },
  { name: '重庆', count: 60 },
  { name: '宁夏', count: 50 },
  { name: '海南', count: 40 },
  { name: '台湾', count: 30 },
  { name: '北京', count: 20 },
  { name: '天津', count: 10 },
  { name: '上海', count: 100 },
  { name: '香港', count: 110 },
  { name: '澳门', count: 90 },
]

2. 具体代码

<template>
  <div class="map">
    <div id="maps"></div>
  </div>
</template>

<script>
// 上述引入的配置文件
import china from "@/utils/mapJson.json";
// 引入一个含 mapData 的数据文件。
import { mapData } from './echartMap'

import * as echarts from "echarts";
export default {

  name: '',

  props: {},

  components: {},

  data () {
    return {
      mapData
    }
  },

  computed: {},

  watch: {},
  created () { },

  methods: {
    init () {
      // 将自定义的地图数据注册到 ECharts 中,
      this.$echarts.registerMap("china", china);
      let chart = echarts.init(document.getElementById('maps'));
      chart.setOption({
        tooltip: { // 设置提示框
          trigger: 'item',
        },
        visualMap: {
          show: true, // 是否显示视觉映射组件
          x: 'left',
          y: 'bottom',
          // 使用分段型
          type: 'piecewise',
          // itemWidth: '20', // 设置图例的宽
          // itemHeight: '20', // 设置图例的高
          itemSymbol:'circle', //'circle'---圆形, 'rect'---矩形, 'roundRect'---圆角矩形, 'triangle'---三角形, 'diamond'---菱形, 'pin'---大头针形状, 'arrow'---箭头形状, 'none'
          // 指定分段数据
          pieces: [
          	  //gt: 大于
		 	 //gte: 大于等于
			//lte: 小于等于
            { gt: 100, color: '#ecbd3c', label: "此处自定义" }, // 大于10的值使用这个颜色
            { gte: 80, lte: 100, color: '#f3a033', label: '此处自定义 高' }, // 在8到10之间的值使用这个颜色
            { gte: 50, lte: 80, color: '#f36033', label: '此处自定义 中' }, // 在5到8之间的值使用这个颜色
            { gte: 30, lte: 50, color: '#c9f333', label: '此处自定义 低' }, // 在3到5之间的值使用这个颜色
            { lte: 30, color: '#59f333', label: '此处自定义' } // 小于等于3的值使用这个颜色
          ],
          // 是否启用拖拽以重新定位 visualMap 组件
          calculable: true,
          // // 是否为分段型展示
          // orient: 'horizontal' // 默认为垂直展示，可改为水平
        },
        series: [{
          name: '中国',
          type: 'map',// 设置图表类型,
          mapType: 'china',// 指定使用的地图类型
          selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
          itemStyle: {
            normal: {
              label: {
                show: false,//默认是否显示省份名称
              },
              areaStyle: {
                color: '#f3f3f3',//默认的地图板块颜色
              },
              borderWidth: 1,
              borderColor: '#e1e1e1',
            },
            emphasis: {
              label: {
                show: true,//选中状态是否显示省份名称
              },
              areaStyle: {
                color: '#90c31d',//选中状态的地图板块颜色
              },
            },
          },
          data: mapData.map(item => ({
            name: item.name,
            value: item.count
          }))
        }]
      })
      chart.on('click', (params) => {
        console.log(params, '****')
      })
    }
  },

  mounted () {
    this.init()
  },
}
</script> 

<style scoped lang="less">
.map {
  width: 100%;
  height: 100%;
  #maps {
    width: 100%;
    height: 100%;
    color: #59f333;
  }
}
</style>