Vue-Echarts中国地图使用详解

一、基础概念

Echarts 是由百度开源的一个数据可视化库，可以通过简单的配置实现动态可交互的数据展示。 Vue-Echarts 是 对 Echarts 的封装，使得在 Vue 项目中更加方便地使用 Echarts。

地图是 Echarts 中的一个重要模块，而中国地图是其中一个经典的实例。在 Vue 中使用中国地图需要引入 Vue-Echarts 和中国地图相关的 Javascript 文件。

二、配置基本选项

在 Vue 中使用 Echarts，需要在 vue 模板中引入 vue-echarts 组件，并传入 options 配置项，该配置项将对图表进行基础设置。可以在 options 中设置图表的主题、颜色、标题、图例等信息。

<template>
  <div class="map-container">
    <vue-echarts
      :options="options"
      :autoresize="true"
      :notMerge="true"
      :lazyUpdate="true"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import china from 'echarts/map/json/province/shanghai.json';
import 'echarts/map/js/china.js';
import 'echarts/extension/bmap/bmap.js';
import 'echarts-gl';
import i18n from '@/locale';

export default {
  name: 'Map',
  components: {
    'chart': ()=>import('echarts')
  },
  data: () => ({
    options: {
      title: {
        text: i18n.t('map_title'),
        left: 'center',
        top: '2%',
        textStyle: {
          color: '#fff',
          fontSize: 18,
          fontWeight: '400',
          fontFamily: 'MicrosoftYaHei',
          lineHeight: 1.2
        }
      },
      geo: {
        map: 'china',
        roam: true,
        selectedMode: 'single',
        label: {
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#323c48',
            borderColor: '#566f8a'
          },
          emphasis: {
            areaColor: '#2a333d',
            borderColor: '#566f8a'
          }
        }
      },
      series: [{
        type: 'map',
        map: 'china',
        roam: false,
        name: '',
        data: []
      }]
    }
  }),
  mounted() {
    echarts.registerMap('china', china);
  }
};
</script>

三、设置地图数据

在 Vue 中使用 Vue-Echarts 进行地图数据设置，需要引入 echarts 的数据格式。下面为例子中传入的数据格式，使用数组形式表示不同省份的数据值：

  {
    name: '北京',
    value: 0
  },
  {
    name: '天津',
    value: 0
  },
  {
    name: '上海',
    value: 0
  },
  {
    name: '重庆',
    value: 0
  },
  {
    name: '河北',
    value: 0
  },
  {
    name: '河南',
    value: 0
  }
  // etc.

四、使用自定义样式

在 Echarts 中设置样式可以使用 itemStyle 来进行设置，这可以帮助我们实现地图的个性化定制，比如调整颜色、边框、阴影等。下面是一个例子，设置了不同省份的颜色、边框、标签等样式。

 {
    name: '北京',
    value: 0,
    itemStyle: {
      areaColor: '#2a7bff',
      borderColor: '#fff',
      borderWidth: 1,
      shadowColor: '#fff',
      shadowBlur: 10,
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }
  },
  {
    name: '河北',
    value: 0,
    itemStyle: {
      areaColor: '#e24f48',
      borderColor: '#fff',
      borderWidth: 1,
      shadowColor: '#fff',
      shadowBlur: 10,
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }
  },
  {
    name: '河南',
    value: 0,
    itemStyle: {
      areaColor: '#8dc63f',
      borderColor: '#fff',
      borderWidth: 1,
      shadowColor: '#fff',
      shadowBlur: 10,
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }
  }

五、实现点击事件

在使用 Vue-Echarts 时，可以通过自定义事件来实现地图的点击事件。下面是一个例子，当用户点击某个省份时，把该省份的数据传给后端，并进行页面跳转。

  mounted() {
    const chart = this.$refs.chart.echartsInstance;
    const self = this;
    chart.on('click', (params) => {
      self.$router.push({ name: 'province', params: { provinceName: params.name } });
    });
  }

六、实现省市联动

在中国地图中，每个省份下可能有多个城市，需要通过省市的联动来展示每个省份的具体数据。可以在 Echarts 中使用 series 属性，来设置多个不同的 series 来呈现不同的数据。下面是一个例子，展示了浙江省的所有城市。

  {
    name: '杭州市',
    value: 0
  },
  {
    name: '宁波市',
    value: 0
  },
  {
    name: '温州市',
    value: 0
  },
  {
    name: '嘉兴市',
    value: 0
  },
  {
    name: '湖州市',
    value: 0
  },
  {
    name: '绍兴市',
    value: 0
  },
  {
    name: '金华市',
    value: 0
  },
  {
    name: '衢州市',
    value: 0
  },
  {
    name: '舟山市',
    value: 0
  },
  {
    name: '台州市',
    value: 0
  },
  {
    name: '丽水市',
    value: 0
  }

七、设置地图背景图

Echarts 中使用 BMap 进行地图渲染，可以使用 BMap 组件来设置百度地图的背景图片。下面是一个设置地图背景图的例子，使用了在百度坐标系统下的 x、y 坐标信息。

  bmap: {
    center: [120.13066322374, 30.240018034923],
    zoom: 14,
    roam: true,
    mapStyle: {
      styleJson: [
        {
          'featureType': 'land',
          'elementType': 'geometry',
          'stylers': {
            'color': '#212121'
          }
        },
        // ...
      ]
    },
    scaleControl: {
      'show': false
    }
  },

以上就是 Vue-Echarts 中国地图的使用详解，希望对大家有所帮助！