echart基礎地圖寫法

1.引入中國地圖的json（具體哪裏整來的，我已經忘記了）；

2.註冊進echarts

// 註冊區域地圖
import china from '@/utils/china.json';
echarts.registerMap('china', china);

3.寫進組件　

<template>
     <div ref="mapEchart" class="mapChart" ></div>
</template>
<style lang="less" scoped>
  .mapChart{
      width: 100%;
      height: 240px;
  }
</style>
<script>


export default {
  name: '',
  data() {
    return {
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      function randomData() {
        return Math.round(Math.random() * 500);
      }
      // 繪製圖表
      const optionMap = {
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [''],
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: '10%',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          color: ['#0b50b9', '#c3e2f4'],
        },
        selectedMode: 'single',
        series: [
          {
            name: '',
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              { name: '北京', value: randomData() },
              { name: '天津', value: randomData() },
              { name: '上海', value: randomData() },
              { name: '重慶', value: randomData() },
              { name: '河北', value: randomData() },
              { name: '河南', value: randomData() },
              { name: '雲南', value: randomData() },
              { name: '遼寧', value: randomData() },
              { name: '黑龍江', value: randomData() },
              { name: '湖南', value: randomData() },
              { name: '安徽', value: randomData() },
              { name: '山東', value: randomData() },
              { name: '新疆', value: randomData() },
              { name: '江蘇', value: randomData() },
              { name: '浙江', value: randomData() },
              { name: '江西', value: randomData() },
              { name: '湖北', value: randomData() },
              { name: '廣西', value: randomData() },
              { name: '甘肅', value: randomData() },
              { name: '山西', value: randomData() },
              { name: '內蒙古', value: randomData() },
              { name: '陝西', value: randomData() },
              { name: '吉林', value: randomData() },
              { name: '福建', value: randomData() },
              { name: '貴州', value: randomData() },
              { name: '廣東', value: randomData() },
              { name: '青海', value: randomData() },
              { name: '西藏', value: randomData() },
              { name: '四川', value: randomData() },
              { name: '寧夏', value: randomData() },
              { name: '海南', value: randomData() },
              { name: '臺灣', value: randomData() },
              { name: '香港', value: randomData() },
              { name: '澳門', value: randomData() },
            ],
          },
        ],
      };
      const myChart = this.$echarts.init(this.$refs.mapEchart);
      myChart.setOption(optionMap);
    },
  },
};
</script>

<style>

</style>