RuralDatabase/apps/web/components/section/china-map.vue

<script setup lang="ts">
import type { EChartsType } from 'echarts'

const mapName = 'china'

const info = useInfoStore()
const option = shallowRef({
  tooltip: {
    // show: false,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    // show: true,
    right: '10%',
    top: 5,
    bottom: '10%',
    left: '10%',
  },
  geo: [

    {
      show: true,
      map: mapName,
      zoom: 1.0,
      layoutCenter: ['50%', '50%'],
      layoutSize: '100%',

      label: {
        // 静态的时候展示样式
        show: false, // 是否显示地图省份得名称
        color: '#fff',
        fontSize: 12,
        fontFamily: 'Arial',
      },

      blur: {
        label: { show: true, color: '#000' },
      },
      roam: false, // 是否开启鼠标滚轮缩放
      itemStyle: {
        label: {
          show: true,
          color: '#fff',
        },
        color: '#fff',
        borderColor: '#32CBE0',
        borderWidth: 1.5,
        areaColor: {
          type: 'linear-gradient',
          x: 0,
          y: 1000,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0.5,
              color: '#0D59C100', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#53C9C7', // 100% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
      },
      emphasis: {
        label: {
          show: true,
          color: '#fff',
        },
        borderWidth: 3,
        borderColor: 'rgba(255, 230, 175,0.8)',
        shadowColor: 'rgba(255, 230, 175,0.5)',
        shadowBlur: 30,
        textStyle: {
          color: '#fff',
          fontSize: 12,
          backgroundColor: 'transparent',
        },
        areaColor: linearColor('#1cfbfe', '#3348e7'),
      },
    },
  ],
  series: [
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 4,
      itemStyle: {
        color: '#ffffff', // 圆点的颜色
        shadowBlur: 1,
        shadowColor: '#333',
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        extraCssText: 'z-index:100;color:#fff;',
        confine: true, // 是否将 tooltip 框限制在图表的区域内

        formatter(params: any) {
          console.log(params)
          // 根据业务自己拓展要显示的内容
          return `<div style="box-shadow: 0 0 10px #00000083; padding: 10px; position: absolute; top: 0; left:0;  border-radius: 4px; border: 1px solid #0479ff; background: linear-gradient(to bottom,  #0739a7 0%,#174ba0ef 100%);z-index:1000">
                    <div style='color:#ee9803; font-size: 18px;'><b>TEST</b></div>
                  </div>`
        },
      },

      label: {
        show: true,
        color: '#fff',
        position: [10, 10],
        textShadowColor: 'black',
        textShadowBlur: 4,
        formatter(obj: any) {
          return obj.name
        },
      },
      zlevel: 12,
      data: info.data.map(i => ({
        name: i.name,
        value: i.value,
      })),
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        brushType: 'fill',
      },
      // symbolSize(val: any) {
      //   const value = val[2]
      //   if (value < max)
      //     return 15

      //   return 20
      // },
      showEffectOn: 'render', // 加载完毕显示特效
      itemStyle: {
        color: '#FEBE13', // 圆点的颜色
        shadowBlur: 10,
        shadowColor: '#333',
      },
      zlevel: 6,
      data: info.data.map(i => ({
        name: i.name,
        value: i.value,
      })),
    },
    // {
    //   type: 'custom',
    //   geoIndex: 0,
    //   coordinateSystem: 'geo',
    //   renderItem(params: any, api: any) {
    //     // console.log(params);

    //     // 具体实现自定义图标的方法
    //     return {
    //       type: 'image',
    //       style: {
    //         height: 50,
    //         image: serverSvg, // 自定义的图片地址
    //         x:
    //             api.coord([
    //               [...map.values()][params.dataIndex].value[0],
    //               [...map.values()][params.dataIndex].value[1],
    //             ])[0] - 16, // 数据的设置
    //         y:
    //             api.coord([
    //               [...map.values()][params.dataIndex].value[0],
    //               [...map.values()][params.dataIndex].value[1],
    //             ])[1] - 64,
    //       },
    //     }
    //   },
    //   zlevel: 10,
    //   data: [...map.values()].filter(i => !!i.DataCenterList.length),
    // },
  ],
})

const china = ref<{
  chart: EChartsType
  chartEle: HTMLDivElement
}>()

let timer: any

onMounted(() => {
  console.log(info.data[1].name)
  const datalen = info.data.length
  let count = 0
  timer && clearInterval(timer)
  timer = setInterval(() => {
    console.log(china.value?.chart)

    china.value?.chart.dispatchAction({
      type: 'downplay',
    })

    china.value?.chart.dispatchAction({
      type: 'highlight',
      dataIndex: count,
    })

    china.value?.chart.dispatchAction({
      type: 'showTip',
      dataIndex: count,
    })

    count++
    count = count % datalen
    info.setShow(count)
  }, 3000)
})

onDeactivated(() => {
  clearInterval(timer)
})

effect(() => {
  console.log(china.value?.chart)
})
</script>

<template>
  <ClientOnly fallback-tag="div" fallback="Loading comments...">
    <Chart
      ref="china" class="chart" :options="option"
    />
  </ClientOnly>
</template>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>