vue Echarts 地图 组件使用实例

链接: 提取码: rxk6

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import map from './map.json'
import {FontChart} from "./utils";

export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      status: '',
      datas: []
    }
  },
  watch: {},
  mounted() {
    this.drawechartmap()
  },
  methods: {
    drawechartmap() {
      var that = this
      window.addEventListener('resize', this.drawechartmap)
      var myChart = this.$echarts.init(this.$refs.echarts)
      this.$echarts.registerMap('china', map)
      var data = that.datas
      var option = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '辆'
            } else {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '辆'
            }
          }
        },
        visualMap: {
          right: '3%',
          left: '3%',
          bottom: '5',
          showLabel: true,
          align: 'auto',
          height: '20%',
          orient: 'vertical',
          itemWidth: FontChart(10),
          width: '70%',
          itemHeight: FontChart(10),
          textStyle: {
            color: 'rgba(167, 194, 240, 1)',
            fontSize: FontChart(12)
          },
          pieces: [{
            gt: 1000,
            label: '≥1000辆',
            color: 'rgba(0, 164, 219, 1)'
          }, {
            gt: 500,
            lt: 900,
            label: '500-900辆',
            color: 'rgba(51, 204, 255, 1)'
          }, {
            gt: 100,
            lt: 499,
            label: '100-499辆',
            color: 'rgba(83, 212, 255, 1)'
          }, {
            gt: 10,
            lt: 99,
            label: '10-99辆',
            color: 'rgba(149, 229, 255, 1)'
          }, {
            gt: 0,
            lt: 9,
            label: '1-9辆',
            color: 'rgba(204, 242, 255, 1)'
          }],
          show: true
        },
        geo: {
          map: 'china',
          zoom: 1,
          top: 0,
          label: {
            normal: {
              show: false,
              color: '#000000'
            },
            emphasis: {
              show: false,
              color: '#292929'
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#8EE2FF'
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            map: 'china',
            top: 0,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: data
          }
        ]
      }
      myChart.resize()
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}
</style>