vue中动态渲染echarts地图（svg）

weixin_48401572

已于 2024-01-24 00:23:20 修改

阅读量1.7k

点赞数 12

文章标签： vue.js 前端 javascript 前端框架

于 2024-01-24 00:17:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48401572/article/details/135730284

版权

本文介绍了如何在Vue应用中使用ECharts库，包括注册自定义SVG地图、动态获取和渲染地理坐标数据，以及使用keyframeAnimation和path动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先查看官网示例

2.在vue中使用

2.1注册自己的svg,

在methods,新建一个函数

.....
//导入自己的svg
 import senor from "@/assets/images/holeSenor.svg";
....
  createECharts() {

            let chartDom = document.getElementById("main");

            let myChart = echarts.init(chartDom);

            let option;

            const that = this;


           //重点注册
            $.get(senor, function (svg) {

                // 向 echarts 注册 SVG 字符串或解析过的 SVG DOM

                echarts.registerMap("senor", { svg: svg });

                option = {

                  //自己配置相应信息，查考官网

                };

                myChart.setOption(option);

            });

      },

2.2 根据左坐标信息，去渲染svg

 //官网参考代码
option = {
    tooltip: {},
    geo: {
      tooltip: {
        show: true
      },
      map: 'iceland_svg',
      roam: true
    },
    series: {
      type: 'custom',
      coordinateSystem: 'geo',
      geoIndex: 0,
      zlevel: 1,
      //坐标点位
      data: [
        [488.2358421078053, 459.70913833075736, ],
        [770.3415644319939, 757.9672194986475,],
        [1180.0329284196291, 743.6141808346214, ],
        [894.03790632245, 1188.1985153835008, ],
        [1372.98925630313, 477.3839988649537,],
        [1378.62251255796, 935.6708486282843,]
      ],
     // 渲染部分
      renderItem(params, api) {}}
    }
  };

但是我们需要动态去接受坐标，从而去渲染svg,故需在data中定义一个数组，去动态接受，完整代码如下：

<template>
    <div id="main"></div>
</template>
  
<script>
import { getHolePosition, } from "@/api/visualization";
import $ from 'jquery';
import * as echarts from 'echarts';
import senor from "@/assets/images/holeSenor.svg";

export default {
    data() {
        return {
            dataRef: [] // 用于存储孔位信息的数组
        };
    },
    methods: {
        getmap() {
            getHolePosition().then((res) => {
                this.dataRef = res.data
                this.$nextTick(() => {
                    this.createECharts();
                })
            });
        },
        createECharts() {
            let chartDom = document.getElementById("main");
            let myChart = echarts.init(chartDom);
            let option;
            const that = this;

            $.get(senor, function (svg) {
                // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
                echarts.registerMap("senor", { svg: svg });
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            let formattedText =
                                '<b>X:</b> ' + params.value[0] +
                                '<b>,</b> ' +
                                '<b>Y:</b> ' + params.value[1] +
                                '<br>' +
                                '<b>设备名称:</b> ' + params.value[2];

                            return formattedText;
                        }
                    },
                    geo: {
                        tooltip: {

                            show: true
                        },

                        map: 'senor',
                        roam: true,
                    },
                    series: {
                        type: 'custom',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        zlevel: 1,
                        encode: {
                            tooltip: [0, 1, 2]
                        },

                        data: that.dataRef,
                        renderItem(params, api) {
                            const coord = api.coord([
                                api.value(0, params.dataIndex) / 100,
                                api.value(1, params.dataIndex) / 100
                            ]);

                            const circles = [];
                            for (let i = 0; i < 5; i++) {
                                circles.push({
                                    type: 'circle',
                                    shape: {
                                        cx: 0,
                                        cy: 0,
                                        r: 30
                                    },
                                    style: {
                                        stroke: 'red',
                                        fill: 'none',
                                        lineWidth: 2
                                    },
                                    // Ripple animation
                                    keyframeAnimation: {
                                        duration: 4000,
                                        loop: true,
                                        delay: (-i / 4) * 4000,
                                        keyframes: [
                                            {
                                                percent: 0,
                                                scaleX: 0,
                                                scaleY: 0,
                                                style: {
                                                    opacity: 1
                                                }
                                            },
                                            {
                                                percent: 1,
                                                scaleX: 1,
                                                scaleY: 0.4,
                                                style: {
                                                    opacity: 0
                                                }
                                            }
                                        ]
                                    }
                                });
                            }
                            return {
                                type: 'group',
                                x: coord[0],
                                y: coord[1],
                                children: [
                                    ...circles,
                                    {
                                        type: 'path',
                                        shape: {
                                            d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',
                                            x: -10,
                                            y: -35,
                                            width: 20,
                                            height: 40
                                        },
                                        style: {
                                            fill: 'red'
                                        },
                                        // Jump animation.
                                        keyframeAnimation: {
                                            duration: 1000,
                                            loop: true,
                                            delay: Math.random() * 1000,
                                            keyframes: [
                                                {
                                                    y: -10,
                                                    percent: 0.5,
                                                    easing: 'cubicOut'
                                                },
                                                {
                                                    y: 0,
                                                    percent: 1,
                                                    easing: 'bounceOut'
                                                }
                                            ]
                                        }
                                    }
                                ]
                            };
                        }
                    },

                };
                myChart.setOption(option);
            });

        },

    },
    mounted() {
        this.getmap();
    }
};
</script>
<style scoped>
#main {
    position: absolute;
    top: 17%;
    left: 15%;
    width: 70%;
    height: 70%;
    background-color: rgba(0, 0, 0, 0);
}
</style>

这里有个容易错误的地方，函数层级嵌套太多，this指向可能会出现问题，故在这个函数里用that接受了this,再使用this.什么时，就替换成that.,即可