vue3 + howuse， 实现echarts symbol使用 gif 动画图片

安装howuse

npm i howuse

代码如下

  <div style="height: 600px;">
    <how-map-chart :option="option" v-if="mapVisible" :config="{ renderer: 'svg' }" :use="ScatterChart" />
  </div>
  <script lang="ts" setup>
import { EChartsOption } from 'echarts';
import { ScatterChart } from 'echarts/charts';
import { HowMapChart, useGeoJsonMap } from 'howuse/echarts';
import weinanJson from '@/assets/610500_full.json';
import testGif from './test.gif';

const mapVisible = ref(false) // 控制地图显示时间，等待地图注册成功再显示，防止无意义报错
const option: EChartsOption = {
  color: ["red"],
  title: {
    text: '陕西省渭南市',
  },
  tooltip: {
    trigger: 'item',
    showDelay: 0,
    transitionDuration: 0.2
  },
  xAxis: {
    show: false,
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(121,121,121,0.3)',
        //color:'red'
      },
    },
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'category',
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(121,121,121,0.3)',
        //color:'red'
      },
    },
    axisLabel: {
      show: false,
    },
  },
  geo: {
    map: 'weinan',
    aspectScale: 0.98,
    show: true,
    roam: false,
    height: '100%',
    label: {
      show: false,
    },
    itemStyle: {
      areaColor: '#b0c7f6',
      borderColor: '#ffffff',
      shadowColor: '#1773c3',
      shadowBlur: 0,
    },
  },
  series: [
    {
      name: 'weinan',
      type: "scatter",
      coordinateSystem: 'geo',
      symbol: `image://${testGif}`,
      symbolSize: 100,
      label: {
        show: true,
        formatter: function (p) {
          // @ts-ignore
          return p.data.name;
        },
      },
      data: [
        {
          name: '白水',
          label: {
            show: true,
          },
          value: [109.594309, 35.177291],
        },
      ]
    }
  ]
};

useGeoJsonMap({ type: 'custom', data: weinanJson, name: "weinan" }).then(() => {
  mapVisible.value = true
}) // name 是必传条件
</script>

效果

https://howuse.netlify.app/#/chart

拉到页面最后

参考

https://github.com/biancangming/howuse