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 中國地圖的使用詳解，希望對大家有所幫助！