2023.3.21

<template>
  <div>
   <!-- <div @click="goBack()">返回</div> -->
    <div ref="chart" style="width: 1500px;height:700px;margin: auto;"></div>
  </div>
</template>

<script>
import {mapData} from "../assets/mapData.js"
export default {
  name: 'province',
  data () {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      option: {
        title: {
          text: '',
          top: '8%',
          left: '8%',
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
            color: '#b6d7ff'
          }
        },
        tooltip: {
          padding: 0,
          //   backgroundColor: "transparent",
          // 数据格式化
          formatter: function (params, callback) {
            return params.name + '：' + params.value
          }
        },
        legend: {
          orient: 'vertical',
          top: '9%',
          left: '5%',
          icon: 'circle',
          data: [],
          selectedMode: 'single',
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: '#b6d7ff',
          textStyle: {
            color: '#ec808d',
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15]
          }
        },
        visualMap: {
          min: 0,
          max: 500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
          inRange: {
            color: ['#e0ffff', 'blue'] // 取值范围的颜色
          },
          show: false // 图注
        },
        geo: {
          map: '',
          roam: false, // 不开启缩放和平移
          zoom: 1, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: 10,
              color: '#000'
            },
            emphasis: {
              show: true,
              color: 'blue',
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: 'skyblue', // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
        //   left: '5%',
        //   right: '5%',
        //   top: '5%',
        //   bottom: '5%'
        },
        series: [
          {
            name: '年度总项目数据查询',
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: []
          }
        ],
        provinceJSON: {},
        provinceName: ''
      }
    }
  },
  mounted () {
    
    const provinceName = this.$route.query.provinceName
    const province = this.$route.query.province
    this.provinceName = provinceName
    this.provinceJSON = require('../assets/Province/' + provinceName)
    this.option.geo.map = province
    this.echartObj = this.$echarts.init(this.$refs.chart);
    this.$echarts.registerMap(province, this.provinceJSON)
    //this.$echarts.registerMap(province, mapData)
    this.echartObj.setOption(this.option);
    window.addEventListener('resize', () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize()
      }
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
  }
}
</script>