[Echart]图谱中的富文本标签

[Echart]图谱中的富文本标签

series-graph.links.label.rich
在这里插入图片描述

option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      // layout: 'force',
      symbolSize: 50,
      roam: true,
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: [
        {
          name: 'Node 1',
          x: 300,
          y: 300
        },
        {
          name: 'Node 2',
          x: 800,
          y: 300
        },
        {
          name: 'Node 3',
          x: 550,
          y: 100
        },
        {
          name: 'Node 4',
          x: 550,
          y: 500
        }
      ],
      // links: [],
      links: [
        {
          source: 0,
          target: 0,
          symbolSize: [5, 20],
          label: {
            show: true,
            formatter: [
              '{a|这段文本采用样式a}'
            ].join('\n'),
            rich: {
              a: {
                width: 6,
                fontSize: 14,
                fontWeight: 700,
                padding: [0, 0, 175, 0],
                backgroundColor: {
                  image:
                    'data:image/png;base64,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'
                }
              }
            }
          },
          lineStyle: {
            width: 5,
            curveness: 0.2
          }
        },
        {
          source: 'Node 2',
          target: 'Node 1',
          label: {
            show: true
          },
          lineStyle: {
            curveness: 0.2
          }
        },
        {
          source: 'Node 1',
          target: 'Node 3'
        },
        {
          source: 'Node 2',
          target: 'Node 3'
        },
        {
          source: 'Node 2',
          target: 'Node 4'
        },
        {
          source: 'Node 1',
          target: 'Node 4'
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 2,
        curveness: 0
      }
    }
  ]
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/433343.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C及C++每日练习(2)

1.选择: 1.使用printf函数打印一个double类型的数据,要求:输出为10进制,输出左对齐30个字符,4位精度。以下哪个选项是正确的? A.%-30.4e B.%4.30e C.%-30.4f D.%-4.30 在上一篇文章中,提到了…

社科院与杜兰大学金融管理硕士——精心准备,只为那一刻的刚刚好

我们每个人都是夜空中独一无二的那颗星,静静地照耀,期待着照亮自己的宇宙。我们的每一步前行,都像是星尘累积,汇聚成璀璨的光轨,照亮未来的道路。正如我们现在努力申请的社科院与杜兰大学金融管理硕士项目,…

深圳/广州/厦门/上海/宁波/义乌2024最新跨境电商展计划表发布!

全国各城市2024年跨境电商年度效果好的跨境展会排期表来了,具体展会活动议程根据组委会实际公示结果为准。 励佳展览(上海)有限公司是一家专业组织、代理国内跨境电商行业展会会展公司,励佳展览拥有高素质的员工队伍,广泛的客户资源&#xf…

香港媒体发稿:【超值1元港媒发稿套餐】推广技巧-华媒舍

在当今竞争激烈的市场中,品牌的推广是企业取得成功的关键。众多的宣传渠道中,香港媒体发稿无疑是一种高效的品牌推广方式。本文将为您介绍《超值1元港媒发稿套餐》的各个组成部分,以及它如何帮助您实现品牌的腾飞。 1. 1元套餐的优势 1元港媒…

田宏斌:以人为本的听力健康管理实践经验 | 演讲嘉宾公布

一、助辅听器材Ⅲ分论坛 助辅听器材Ⅲ分论坛将于3月28日同期举办! 听力贯穿人的一生,听觉在生命的各个阶段都是至关重要的功能,听力问题一旦出现,会严重影响生活质量。助辅听器材能有效提高生活品质。在这里,我们将分享…

逆变器专题(15)-弱电网下的LCL逆变器控制以及谐振峰问题(2)

相应仿真原件请移步资源下载 LCL滤波器 LCL滤波器因其本身为一个二阶系统,其本身就会引发谐振,导致相应谐振频率处的增益得到放大,进而产生谐波等问题;另一方面,在弱电网下,逆变器会与电网阻抗发生耦合&am…

IP劫持的危害及应对策略

随着互联网的发展,网络安全问题日益凸显,其中IP劫持作为一种常见的网络攻击手段,对个人和企业的信息安全造成了严重的威胁。IP数据云将分析IP劫持的危害,并提出相应的应对策略。 IP地址查询:IP数据云 - 免费IP地址查询…

多张gif怎么拼接?三步教你在线拼接gif

GIF拼图常用于制作表情包、动态海报、广告宣传等场景。它可以将多个图像或动画元素组合在一起,形成一个有趣、生动的动画效果,吸引观众的注意力,并传达特定的信息或情感。要将多个GIF动图拼接在一张图像上,要使用适合的gif动画图片…

奥壹科技推出婚恋相亲系统免费软件,旨在扶持创业者降低行业入门门槛

(广州, 2024年3月6日星期三) - 随着婚恋市场的日益增长,奥壹科技宣布推出其旗下奥壹云相亲系统的全新免费版(OEyun Free V1.0)。该公司表示,该举措旨在通过降低创业门槛,为有意进入婚恋行业的创业者及小型企业提供支持,从而进一步…

Java继承与多态:深入理解继承、组合和多态的精髓!

Java继承与多态:深入理解继承、组合和多态的精髓! 引言 欢迎来到这篇关于Java继承与多态的博客!在Java编程中,继承与多态是两个非常重要的概念,它们为我们构建灵活而高效的代码提供了强大的支持。本文将深入探讨Java继…

2024年冲刺年薪40w,Android岗面试

一个程序员,如果不想35 岁被淘汰,请把它当成一种信仰! 25岁,一个北漂程序员,入职三年,Android中级工程师,月薪15k,965的工作经常干成996,比起老家的同龄人,我…

校招中的“熟悉linux操作系统”一般是指达到什么程度?

校招中的“熟悉linux操作系统”一般是指达到什么程度? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家&am…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:PanGesture)

拖动手势事件,当滑动的最小距离超过设定的最小值时触发拖动手势事件。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 接口 PanGesture(value?: { fingers?: number; direction?: PanDir…

three.js如何实现简易3D机房?(二)模型加载的过渡动画

接上一篇: three.js如何实现简易3D机房?(一)基础准备-下:http://t.csdnimg.cn/TTI1P 目录 六、自定义过渡动画 1.过渡动画组件 2.模型加载时使用 根据模型大小,可以自定义模型加载的过渡动画效果&am…

修改表中某个字段等于另一个字段减去 2 小时的 SQL

需求:将表中到达时间按照客户要求改为比赛时间的提前 N 小时,具体如下: 表结构 update contestSchedule SET mainRefereeArrivalTimeDATE_FORMAT(CONCAT(2024-03-04 ,gameTime)- INTERVAL 2 HOUR, %H:%i), assistantRefereeArrivalTimeDAT…

算法沉淀——贪心算法一(leetcode真题剖析)

算法沉淀——贪心算法一 01.柠檬水找零02.将数组和减半的最少操作次数03.最大数04.摆动序列 贪心算法(Greedy Algorithm)是一种基于贪心策略的优化算法,它通常用于求解最优化问题,每一步都选择当前状态下的最优解,以期…

动动嘴就能搞研发?百度Comate带你0门槛玩转代码

3月1日,百度旗下智能代码助手Baidu Comate 又添两大重磅能力:“Comate ” 开放平台、AutoWork “私人研发助理”,为行业首家免费开放试用。本次发布,Baidu Comate 将更加贴合软件研发现场,通过易用的研发平台、丰富的插…

Docker的安装跟基础使用一篇文章包会

目录 国内源安装新版本 1、清理环境 2、配置docker yum源 3、安装启动 4、启动Docker服务 5、修改docker数据存放位置 6、配置加速器 现在我们已经完成了docker的安装和初始配置。以下为基本测试使用 自带源安装的版本太低 docker官方源安装的话速度太慢了 所以本篇文…

2023年算法OOA-DBSCAN聚类

2023年算法OOA-DBSCAN聚类 鱼鹰优化算法(Osprey optimization algorithm,OOA)由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出,其模拟鱼鹰的捕食行为。鱼鹰是鹰形目、鹗科、鹗属的仅有的一种中型猛禽。 DBSCAN聚类算法&#x…

RLNNA-DBSCAN聚类

RLNNA-DBSCAN聚类 RLNNA算法(基于强化学习的神经网络优化算法)是一种性能较佳的优化算法。DBSCAN聚类算法(密度聚类算法)是一种基于密度的聚类算法,其主要思想是通过寻找样本点周围的密度可达关系来聚类数据。 使用RL…