[JavaScript知识库]echarts 渲染中国地图

<template>
  <div id="china_map_box" class='com-page'>
      <div id="china_map" class='com-chart' ref='map_ref'></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import china from 'echarts/map/js/china'
// import sichuan from 'echarts/map/js/province/sichuan'
// import anhui from 'echarts/map/js/province/anhui'

export default {
  name: "china_map",
  data() {
    return {
      chartInstance: null,
      selected : 'china',
      //定义全国省份的数组
      provinces : ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'],
      provincesText : ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
    };
  },
  created() {
      
  },
  mounted() {
    this.initChart(this.selected)
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    // this.updateChart()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed: {},
  watch: {},
  methods: {
    initChart(param) {
      this.chartInstance = echarts.init(document.getElementById('china_map'))
      this.chartInstance.setOption({
            geo: {
            // map: 'china' | '四川'
            // 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
            map: param,
            roam: true, // 设置允许缩放以及拖动的效果
            },
            tooltip: {
                trigger: 'item',
                // triggerOn: 'click',
                formatter: function (arg) {
                    return arg.name+"敏感信息："+arg.value+" 条";
                }
            },
            visualMap: {
                min: 0,
                max: 200,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },series: [
            {
                name: '中国地图',
                type: 'map',
                mapType: 'china', // 自定义扩展图表类型
                label: {
                    show: true
                },
                data: [
                    {name: '新疆', value: 20057.34},
                    {name: '江西', value: 15477.48},
                    {name: '湖南', value: 0},
                    
                    
                ],
             
            }
        ]
                
      })
    },
    screenAdapter() {
      const titleFontSize = document.getElementById('china_map').offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
  }
}
</script>