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

一个橙子pro

已于 2024-04-02 15:23:29 修改

阅读量460

点赞数 4

文章标签： echarts 前端 javascript

于 2024-04-02 15:22:11 首次发布

本文链接：https://blog.csdn.net/a942242856/article/details/137271362

版权

本文介绍了如何在React项目中通过howuse库结合ECharts创建了一个展示陕西省渭南市地图的散点图，展示了如何加载自定义geoJson数据并设置图表选项。

摘要由CSDN通过智能技术生成

安装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>