tnbapp/src/views/map/ChartMap.vue

<template>
  <div ref="chartsDOM" style="width: 1080px;height:960px;" />
</template>

<script>
import * as echarts from 'echarts'
import { getChartGeoJson } from '@/api/chart'
// import chinaData from '@/assets/json/china_full.json'
// import sichuanData from '@/assets/json/sichuan_level3.json'

export default {
  name: 'ChartMap',
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    // 初始化统计图对象
    this.myChart = echarts.init(this.$refs['chartsDOM'])
    // this.initChart1()
    // this.initChart2()
  },
  created() {
    document.title = 'ChartMap'
  },
  methods: {
    initChart1() {
      // 显示 loading 动画
      this.myChart.showLoading()
      const areaCode = 0
      getChartGeoJson(areaCode).then(resp => {
        if (resp.code === 0) {
          var mapData1 = resp.data
        }
      })

      var mapName = 'sichuan'
      var mapData = {}

      // mapName = 'china'
      // mapData = chinaData

      var dataList = this.getDataList(mapData, 1000)
      var chartOption = this.getChartOption1(mapName, dataList)
      // 注册地图(地图数据来自本地或后端的 geojson 格式数据)
      echarts.registerMap(mapName, mapData)
      this.myChart.setOption(chartOption)

      // 得到数据并绘制地图后关闭 loading 动画
      this.myChart.hideLoading()
    },
    initChart2() {
      // 显示 loading 动画
      this.myChart.showLoading()
      var mapName1 = 'sichuan'
      var mapData1 = {}
      // mapData1 = sichuanData
      var dataList1 = this.getDataList(mapData1, 500000)
      var chartOption1 = this.getChartOption2(mapName1, dataList1)

      echarts.registerMap(mapName1, mapData1)
      this.myChart.setOption(chartOption1)

      // 得到数据并绘制地图后关闭 loading 动画
      this.myChart.hideLoading()
    },
    getDataList(mapData, base) {
      var dataList = []
      for (const item of mapData['features']) {
        var name = item['properties']['name']
        var value = this.randomData(base)
        dataList.push({ name: name, value: value })
      }

      return dataList
    },
    randomData(base) {
      // var base = 1000
      return Math.ceil(Math.random() * base)
    },
    getChartOption1(mapName, dataList) {
      return {
        backgroundColor: '#FFFFFF',
        title: {
          text: '全国数据',
          subtext: '各省市区显示',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // 左侧小导航图标
        visualMap: {
          show: true,
          x: 'left',
          y: 'center',
          splitList: [
            { start: 800, end: 1000 },
            { start: 600, end: 800 },
            { start: 400, end: 600 },
            { start: 200, end: 400 },
            { start: 100, end: 200 },
            { start: 0, end: 100 }
          ],
          color: [
            '#5475f5',
            '#9feaa5',
            '#85daef',
            '#74e2ca',
            '#e6ac53',
            '#9fb5ea'
          ]
        },
        // 配置属性
        series: [{
          name: '全国数据',
          type: 'map',
          map: mapName,
          roam: true,
          label: {
            show: false
          },
          data: dataList // 数据
        }]
      }
    },
    getChartOption2(mapName, dataList) {
      return {
        visualMap: {
          min: 0,
          max: 300000,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        title: {
          text: '四川各市统计图'
        },
        tooltip: {},
        series: [
          {
            name: '四川地图',
            type: 'map',
            map: mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            roam: true, // 可放大缩小拖拽
            label: {
              show: true // 地图上显示地区名字
            },
            data: dataList
          }
        ]
      }
    },
    onRefresh() {
      this.initChart1()
    }
  }
}
</script>

<style>
</style>