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

相关推荐

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

    2024-04-03 23:30:02       5 阅读
  2. Vue3 实现图片的帧动画方案分享

    2024-04-03 23:30:02       34 阅读
  3. Vue3实现图片懒加载

    2024-04-03 23:30:02       4 阅读
  4. vue3使用过渡动画transition

    2024-04-03 23:30:02       11 阅读

最近更新

  1. day6-arm

    2024-04-03 23:30:02       0 阅读
  2. go下载依赖时超时timeout

    2024-04-03 23:30:02       0 阅读
  3. Ubuntu22.04.4 - MySQL8 - 笔记

    2024-04-03 23:30:02       0 阅读
  4. 如何管理一个团队,因为有些人他不听我的话?

    2024-04-03 23:30:02       0 阅读
  5. C++实战篇(一)——自旋锁的使用

    2024-04-03 23:30:02       0 阅读
  6. pinpoint接入及接入tomcat

    2024-04-03 23:30:02       0 阅读
  7. Git的SSH密钥配置

    2024-04-03 23:30:02       0 阅读

热门阅读

  1. 初识人工智能---------自然语言处理&&词袋模型

    2024-04-03 23:30:02       6 阅读
  2. MySQL学习笔记(持续更行ing)

    2024-04-03 23:30:02       8 阅读
  3. C++从入门到精通——nullptr

    2024-04-03 23:30:02       6 阅读
  4. 大厂HashMap源码面试

    2024-04-03 23:30:02       5 阅读
  5. Linux进程状态

    2024-04-03 23:30:02       4 阅读
  6. 力扣--哈希表+滑动子块--串联所有单词子串

    2024-04-03 23:30:02       4 阅读
  7. MySQL两表联查之分组成绩第几问题

    2024-04-03 23:30:02       4 阅读
  8. Redis面试题15道

    2024-04-03 23:30:02       3 阅读