ebiz-h5/src/views/ebiz/goodStart/BusinessMap.vue

<template>
  <div class="relative">
    <div class="china-map" id="guangxi"></div>
    <img class="absolute top5 left15 m-logo" src="@/assets/images/goodStart/logo.png" alt="" />
    <img class="absolute bottom25 left10 m-tuli" src="@/assets/images/goodStart/tuli.png" alt="" />
    <div class="absolute bottom5 left10 m-time">
      <p class="fwb minfs" style="color: #c01212">开门红业务地图</p>
      <p class="minfs01" style="color: #333">数据截止时间：{{ date }}</p>
    </div>
    <img class="absolute bottom5 right10 m-tubiao" src="@/assets/images/goodStart/tubiao.png" alt="" />
  </div>
</template>
<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.rate.js"></script>
<script src="js/map/js/province/guangxi.js"></script> -->
<script>
import { getMapDataList } from '@/api/ebiz/goodStart'
import utils from '@/assets/js/utils/date-utils'

export default {
  name: 'list',
  data() {
    return {
      date: ''
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.date = utils.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
      const result = await getMapDataList({})
      if (result.result === '0') {
        let data = result.content
        data.forEach((item) => {
          item.value = item.rate
        })
        this.showMapFunc(data)
      } else {
        this.$toast(result.resultMessage)
      }
    },
    showMapFunc(data) {
      let Echart = window.echarts.init(document.querySelector(`#guangxi`))
      let option = {
        backgroundColor: '#FFECC3',
        title: {
          text: '',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          // 利用formatter来自定义tooltip展示的数据
          formatter: function (params) {
            var myseries = option.series[0]
            var res = ''
            for (var i = 0; i < myseries.data.length; i++) {
              if (myseries.data[i].name == params.name) {
                res += myseries.data[i].comName + '</br>'
                res += '承保期交' + ' : ' + myseries.data[i].sum + '万元</br>'
                res += '目标达成率' + ' : ' + myseries.data[i].rate + '%</br>'
              }
            }
            return res
          }
        },
        //左侧小导航图标 0-25 26-50 51-75 76-100
        visualMap: {
          rate: 0,
          max: 100,
          text: ['高', '低'],
          show: false,
          pieces: [
            // pieces 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于)
            { gte: 0, lt: 25, color: '#FFBDBD' },
            { gte: 25, lt: 50, color: '#FF7B7B' },
            { gte: 50, lt: 75, color: '#F75252' },
            { gte: 75, lt: 100, color: '#EE2020' },
            { gte: 100, color: '#B61616' },
          ]
          // inRange: {
          //   color: ['lightskyblue', 'yellow', 'orange','red']
          // }
        },
        //配置属性
        series: [
          {
            name: '报名人数',
            type: 'map',
            zoom: 1.2, //设置地图大小，这里是关键，一定要放在 series中
            roam: 'scale', //支持拖拽缩放,设置为false,开启为true,缩放 roam设置为'scale'，拖拽roam设置为'move'
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1, //缩放最小大小
              max: 6 //缩放最大大小
            },
            //因2022年地图中加入贵州分公司，但是贵州分公司只有贵州省的数据，没市级数据，所以修改了guangxi.js,把china.js中的贵州放到了guangxi.js里
            mapType: '广西贵州省', //需要注意：省份中应使用汉字即如 ‘mapType:"广西"’
            label: {
              //文本设置（Echarts其他图表都有这样的设置，值得多看）
              normal: {
                show: true, //显示市区标签
                textStyle: { color: '#c71585' } //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: '#800080' }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, //区域边框宽度
                borderColor: '#009fe8', //区域边框颜色
                areaColor: '#ffefd5' //区域颜色
              },
              emphasis: {
                show: true,
                borderWidth: 0.5,
                borderColor: '#4b0082',
                areaColor: '#FFC93B' //选中区域块颜色
              }
            },
            data: data  //数据
            // data: [
            //   { name: '南宁市', comName: '南寧分公司', sum: '1', rate: '2', value: 0 },
            //   { name: '玉林市', comName: '南寧分公司', sum: '1', rate: '2', value: 25 },
            //   { name: '桂林市', comName: '南寧分公司', sum: '1', rate: '2', value: 26 },
            //   { name: '柳州市', comName: '南寧分公司', sum: '1', rate: '2', value: 50 },
            //   { name: '河池市', comName: '南寧分公司', sum: '1', rate: '2', value: 51 },
            //   { name: '贺州市', comName: '南寧分公司', sum: '1', rate: '2', value: 75 },
            //   { name: '梧州市', comName: '南寧分公司', sum: '1', rate: '2', value: 76 },
            //   { name: '百色市', comName: '南寧分公司', sum: '1', rate: '2', value: 100 }
            // ] 
          }
        ]
      }
      // 加载绘制Echarts图形
      Echart.setOption(option)
      window.addEventListener('resize', function () {
        Echart.resize() //不加会出现高度为0
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.china-map {
  width: 100%;
  height: 100vh;
}
.m-logo {
  width: 40px;
  height: 15px;
}
.m-tuli {
  width: 38px;
  height: 72px;
}
.m-tubiao {
  width: 36px;
  height: 54px;
}
.minfs {
  font-size: 1.6vw !important;
}
.minfs01 {
  font-size: 1.4vw !important;
}
</style>