echart-关系图 echarts-gl（兼职合作私信）

赵不困888（合作私信）

已于 2024-03-28 10:17:31 修改

阅读量391

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2024-03-27 16:45:55 首次发布

本文链接：https://blog.csdn.net/zzzzzzzzjy/article/details/137082051

版权

我需要做这样的效果

安装npm install echarts-gl@1.1.0 --save 【重启】

mian.js----import "echarts-gl"; //echarts 3D插件

版本要注意，不如会不兼容报错echarts和echarts-gl版本问题 & echarts多版本共存-CSDN博客

贴代码如下

<template>
    <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
// import "echarts-gl";
export default {
    name: 'FlowChart',
    data() {
        return {
            chart: null,
            nodes: [
                { name: '111.111.122.1(质量检测)', x: 300, y: 300 },
                { name: '111.111.122.1(接收平台)', x: 400, y: 300 },
                { name: '111.111.122.1(四项能力、模型)', x: 500, y: 300 },
                { name: '111.111.122.1(解析平台)', x: 600, y: 300 },
                { name: '111.111.122.1(测试服务器)', x: 200, y: 300 },
                {
                    name: 'Server', x: 430, y: 100
                    //   itemStyle: {  
                    //     color: 'blue'  
                    //   }, 
                    //    // 启用拖拽  
                    //    draggable: true  
                }
            ],
            links: [
                { source: '111.111.122.1(质量检测)', target: 'Server' },
                { source: '111.111.122.1(接收平台)', target: 'Server' },
                { source: '111.111.122.1(四项能力、模型)', target: 'Server' },
                { source: '111.111.122.1(解析平台)', target: 'Server' },
                { source: '111.111.122.1(测试服务器)', target: 'Server' }
            ]
        };
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart);
            this.setOption();
        },
        setOption() {
            const option = {
                tooltip: {
                    trigger: 'item', // 触发类型，默认数据触发，可选为：'item'、'axis'  
                    formatter: '{b}' // 提示框浮层内容格式  
                },
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        //   coordinateSystem: "cartesian2d",
                        layout: 'none',
                        symbolSize: 50,
                        nodeScaleRatio: true, // 允许节点缩放
                        roam: true,
                        label: {
                            show: true
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                        },
                        data: this.nodes.map(node => ({
                            name: node.name,
                            // x: Math.random() * 800, // 初始位置随机生成  
                            // y: Math.random() * 600,  
                            x:node.x, // 初始位置随机生成  
                            y: node.y,  
                            draggable: true, // 开启节点拖拽  
                            itemStyle: { // 设置节点样式  
                                color: '#1993e8' // 设置为蓝色  
                            }
                        })),
                        links: this.links.map(link => ({
                            source: link.source,
                            target: link.target,
                            lineStyle: {
                                normal: {
                                    curveness: 0.2 // 线条弯曲程度  
                                }
                            }
                        })),
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0,
                            color: '#c2c8d5' //连接线的颜色
                        }
                    },
                    {
                        type: "lines",
                        //   coordinateSystem: "cartesian2d",
                        z: 1,
                        animationEasing: "linear",
                        clip: false,
                        effect: {
                            show: true,
                            smooth: true,
                            trailLength: 0,
                            symbol: "arrow",
                            color: "#1690e7",
                            symbolSize: 12,
                            period: 4,
                            //特效动画的时间
                            loop: true
                        },
                        lineStyle: {
                            curveness: 0,
                            color: '#c2c8d5',
                            opacity: 0.6,
                            width: 1,
                            type: "solid"
                        },
                    }
                ]
            };
            this.chart.setOption(option);
        }
    }
};
</script>

<style scoped>
/* 在这里可以添加一些样式，例如设置图表容器的宽度和高度 */
</style>

{

type: "lines",

// coordinateSystem: "cartesian2d",

z: 1,

animationEasing: "linear",

clip: false,

effect: {

show: true,

smooth: true,

trailLength: 0,

symbol: "arrow",

color: "#1690e7",

symbolSize: 12,

period: 4,

//特效动画的时间

loop: true

},

lineStyle: {

curveness: 0,

color: '#c2c8d5',

opacity: 0.6,

width: 1,

type: "solid"

},

}这里好像没有生效因为我想要一个动画效果