ECharts 中国地图 vue

<template>
  <div>
    <div id="china_map_box">
      <div id="china_map" style="height: 600px; width: 700px;"></div>
    </div>
  </div>
</template>

<script>
import echarts from \'echarts\'
import \'echarts/map/js/china.js\'

export default {
  name: \'MapComponent\',
  mixins: [],
  props: {
    value: {
      type: String,
      default: \'\'
    }
  },
  components: {},
  data () {
    return {
      // echart 配制option
      options: {
        tooltip: {
          triggerOn: \'mousemove\', // mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: \'#409eff\',
          backgroundColor: \'rgba(255,255,255,0.7)\',
          textStyle: {
            color: \'#000000\',
            fontSize: 12
          },
          formatter: function (e, t, n) {
            let data = e.data
            // 模拟数据
            data.specialImportant = Math.random() * 1000 | 0
            data.import = Math.random() * 1000 | 0
            data.compare = Math.random() * 1000 | 0
            data.common = Math.random() * 1000 | 0
            data.specail = Math.random() * 1000 | 0

            let context = `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                   <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
               </div>
            `
            return context
          }
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 1000,
              label: \'>= 1000\',
              color: \'#1C8DFF\'
            },
            {
              gte: 500,
              lt: 999,
              label: \'500 - 999\',
              color: \'#51A8FF\'
            },
            {
              gte: 100,
              lt: 499,
              label: \'100 - 499\',
              color: \'#82C0FF\'
            },
            {
              gte: 10,
              lt: 99,
              label: \'10 - 99\',
              color: \'#AAD5ee\'
            },
            {
              lt: 10,
              label: \'<10\',
              color: \'#AAD5FF\'
            }
          ]
        },
        geo: {
          map: \'china\',
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 30,
          label: {
            normal: {
              show: true,
              fontSize: \'12\',
              color: \'rgba(0,0,0,0.7)\'
            }
          },
          itemStyle: {
            normal: {
              // shadowBlur: 50,
              // shadowColor: \'rgba(0, 0, 0, 0.2)\',
              borderColor: \'rgba(255, 255, 255, 0.2)\'
              // borderColor: \'#ffffff\'
            },
            emphasis: {
              areaColor: \'#f2d5ad\',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: \'突发事件\',
            type: \'map\',
            geoIndex: 0,
            data: []
          }
        ]
      },
      // echart data
      dataList: [
        {
          name: \'南海诸岛\',
          value: 100,
          eventTotal: 100,
          specialImportant: 10,
          import: 10,
          compare: 10,
          common: 40,
          specail: 20
        },
        {
          name: \'北京\',
          value: 540
        },
        {
          name: \'天津\',
          value: 130
        },
        {
          name: \'上海\',
          value: 400
        },
        {
          name: \'重庆\',
          value: 750
        },
        {
          name: \'河北\',
          value: 130
        },
        {
          name: \'河南\',
          value: 830
        },
        {
          name: \'云南\',
          value: 110
        },
        {
          name: \'辽宁\',
          value: 19
        },
        {
          name: \'黑龙江\',
          value: 150
        },
        {
          name: \'湖南\',
          value: 690
        },
        {
          name: \'安徽\',
          value: 60
        },
        {
          name: \'山东\',
          value: 39
        },
        {
          name: \'新疆\',
          value: 4
        },
        {
          name: \'江苏\',
          value: 31
        },
        {
          name: \'浙江\',
          value: 104
        },
        {
          name: \'江西\',
          value: 36
        },
        {
          name: \'湖北\',
          value: 52
        },
        {
          name: \'广西\',
          value: 33
        },
        {
          name: \'甘肃\',
          value: 7
        },
        {
          name: \'山西\',
          value: 5
        },
        {
          name: \'内蒙古\',
          value: 778
        },
        {
          name: \'陕西\',
          value: 22
        },
        {
          name: \'吉林\',
          value: 4
        },
        {
          name: \'福建\',
          value: 18
        },
        {
          name: \'贵州\',
          value: 5
        },
        {
          name: \'广东\',
          value: 98
        },
        {
          name: \'青海\',
          value: 1
        },
        {
          name: \'西藏\',
          value: 0
        },
        {
          name: \'四川\',
          value: 44
        },
        {
          name: \'宁夏\',
          value: 4
        },
        {
          name: \'海南\',
          value: 22
        },
        {
          name: \'台湾\',
          value: 3
        },
        {
          name: \'香港\',
          value: 5
        },
        {
          name: \'澳门\',
          value: 555
        }
      ],
      innerValue: \'\'
    }
  },
  watch: {
    value (val) {
      this.innerValue = val
    }
  },
  computed: {},
  methods: {
    // 初始化中国地图
    initEchartMap () {
      let mapDiv = document.getElementById(\'china_map\')
      let myChart = echarts.init(mapDiv)
      myChart.setOption(this.options)
    },
    // 修改echart配制
    setEchartOption () {
      this.options.series[0][\'data\'] = this.dataList
    }
    // onChange (item) {
    //    this.(\'input\', item ? item.value : undefined)
    // },
  },
  filters: {},
  created () {
    this.setEchartOption()
  },
  activated () { },
  mounted () {
    this.$nextTick(() => {
      this.initEchartMap()
    })
  },
  beforeUpdate () { },
  beforeDestroy () { }
}
</script>

<style lang="less">
  #china_map .tooltip_style {
    line-height: 1.7;
    overflow: hidden;
  }

  #china_map .tooltip_left {
    float: left;
  }

  #china_map .tooltip_right {
    float: right;
  }
</style>