echarts 中国地图

1. 代码

echarts版本 5.3.2

<template>
  <div class="china-echart-container">
    <div ref="chinaEchart"></div>
  </div>
</template>

<script>
import './china'

export default {
  name: 'ChinaEchart',
  mounted() {
    const myChart = this.$echarts.init(this.$refs.chinaEchart)
    myChart.setOption(this.initOption())

    window.onresize = function() {
      myChart.resize()
    }
  },
  methods: {
    initOption() {
      return {
        title: {
          text: '中国地图',
          subtext: '', // 副标题
          y: '5%',
          x:'center'
        },
        tooltip: {
          trigger: "item",
          formatter(params) {
            const { name, value } = params.data

            return `<p style="margin: 0">
              ${name}:  ${value}
            </p>`
          }
        },
        visualMap: { // 视觉映射组件，左侧导航图标
          x: 'left',
          y: 'center',
          splitList: [
            { start: 500, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 200, end: 300 },
            { start: 100, end: 200 },
            { start: 0, end: 100 }
          ],
          color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
        },
        series: [
          {
            type: 'map',
            map: 'china',
            left: '20%',
            label: {
              show: true
            },
            data: [
              { name: '北京', value: '100' },
              { name: '天津', value: this.randomData() },
              { name: '上海', value: this.randomData() },
              { name: '重庆', value: this.randomData() },
              { name: '河北', value: this.randomData() },
              { name: '河南', value: this.randomData() },
              { name: '云南', value: this.randomData() },
              { name: '辽宁', value: this.randomData() },
              { name: '黑龙江', value: this.randomData() },
              { name: '湖南', value: this.randomData() },
              { name: '安徽', value: this.randomData() },
              { name: '山东', value: this.randomData() },
              { name: '新疆', value: this.randomData() },
              { name: '江苏', value: this.randomData() }, 
              { name: '浙江', value: this.randomData() },
              { name: '江西', value: this.randomData() },
              { name: '湖北', value: this.randomData() },
              { name: '广西', value: this.randomData() },
              { name: '甘肃', value: this.randomData() },
              { name: '山西', value: this.randomData() },
              { name: '内蒙古', value: this.randomData() },
              { name: '陕西', value: this.randomData() },
              { name: '吉林', value: this.randomData() },
              { name: '福建', value: this.randomData() },
              { name: '贵州', value: this.randomData() },
              { name: '广东', value: this.randomData() },
              { name: '青海', value: this.randomData() },
              { name: '西藏', value: this.randomData() },
              { name: '四川', value: this.randomData() },
              { name: '宁夏', value: this.randomData() },
              { name: '海南', value: this.randomData() },
              { name: '台湾', value: this.randomData() },
              { name: '香港', value: this.randomData() },
              { name: '澳门', value: this.randomData() }
            ]
          }
        ]
      }
    },
    randomData() {
      return Math.round(Math.random() * 600)
    }
  }
}
</script>

<style scoped lang="scss">
  .china-echart-container {
    > div {
      width: 600px;
      height: 430px;
    }
  }
</style>

2. 效果展示

3. 参考文章

• echarts显示中国地图