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>