echarts 力向导图_关系图_知识图谱

最新推荐文章于 2024-06-04 20:57:27 发布
最新推荐文章于 2024-06-04 20:57:27 发布
阅读量700 收藏
点赞数
文章标签： echarts echarts 力向图 echarts 关系图 echarts 知识图谱 echarts Graph echarts 关系图表 知识图谱可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aibujin/article/details/134147640
版权

Echarts 常用各类图表模板配置

注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

图标模板目录

一、力向导图

echarts 项目可视化、echarts 力向导图、echarts 关系图、echarts 知识图谱、ecahrts 地图、ecahrts 地图 josn 文件、地图json免费下载、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画

option = {
  title: {
    text: '知识图谱'
  },
  series: [
    {
      type: 'graph',
      layout: 'force',
      symbolSize: 58,
      draggable: true,
      roam: true,
      focusNodeAdjacency: true,
      categories: [
        {
          name: '公司',
          itemStyle: {
            color: '#006acc'
          }
        },
        {
          name: '董事',
          itemStyle: {
            color: '#ff7d18'
          }
        }
      ],
      edgeSymbolSize: [10, 10],
      edgeSymbol: ['circle', 'arrow'],
      edgeLabel: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 20
          },
          formatter(x) {
            return x.data.name;
          }
        }
      },
      label: {
        show: true,
        formatter(param) {
          if (param.name == '浏览器有限公司') {
            return '自定义名称';
          } else {
            return param.name;
          }
        }
      },
      force: {
        repulsion: 2000,
        edgeLength: 120
      },
      data: [
        {
          name: '操作系统集团',
          category: 0,
          symbolSize: 80,
          itemStyle: {
            color: '#006acc',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: '浏览器有限公司',
          category: 0,
          symbolSize: 80,
          itemStyle: {
            normal: {
              color: '#49CCFF88',
              borderColor: '#49CCFF',
              borderWidth: 2,
              shadowBlur: 10,
              shadowColor: '#49CCFF'
            }
          },
          label: {
            textStyle: {
              color: '#000'
            }
          }
        },
        {
          name: 'HTML科技',
          category: 0,
          symbolSize: 80,
          itemStyle: {
            color: '#006acc',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'JavaScript科技',
          category: 0,
          symbolSize: 80,
          itemStyle: {
            color: '#006acc',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'CSS科技',
          category: 0,
          symbolSize: 80,
          itemStyle: {
            color: '#006acc',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'Chrome',
          category: 1,
          itemStyle: {
            color: '#ff7d18',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'IE',
          category: 1,
          itemStyle: {
            color: '#ff7d18',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'Firefox',
          category: 1,
          itemStyle: {
            color: '#ff7d18',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        },
        {
          name: 'Safari',
          category: 1,
          itemStyle: {
            color: '#ff7d18',
            normal: {
              borderColor: '#82dffe',
              borderWidth: 4,
              shadowBlur: 10,
              shadowColor: '#04f2a7'
            }
          }
        }
      ],
      links: [
        {
          source: '浏览器有限公司',
          target: '操作系统集团',
          name: '参股',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#ff7d18'
          }
        },
        {
          source: 'HTML科技',
          target: '浏览器有限公司',
          name: '参股',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#ff7d18'
          }
        },
        {
          source: 'CSS科技',
          target: '浏览器有限公司',
          name: '参股',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#ff7d18'
          }
        },
        {
          source: 'JavaScript科技',
          target: '浏览器有限公司',
          name: '参股',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#ff7d18'
          }
        },
        {
          source: 'Chrome',
          target: '浏览器有限公司',
          name: '董事',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#006acc'
          }
        },
        {
          source: 'IE',
          target: '浏览器有限公司',
          name: '董事',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#006acc'
          }
        },
        {
          source: 'Firefox',
          target: '浏览器有限公司',
          name: '董事',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#006acc'
          }
        },
        {
          source: 'Safari',
          target: '浏览器有限公司',
          name: '董事',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#006acc'
          }
        },
        {
          source: 'Chrome',
          target: 'JavaScript科技',
          name: '法人',
          label: {
            align: 'center',
            fontSize: 12
          },
          lineStyle: {
            color: '#10a050'
          }
        }
      ]
    }
  ]
};

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

六、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

七、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

八、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

九、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

十、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十一、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

十二、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

十三、地图

echarts 地图，自定义提示框；

文章链接：https://blog.csdn.net/aibujin/article/details/130532911?spm=1001.2014.3001.5501

十四、地图 json 免费下载

  1. 全省份 json 下载：https://mp.csdn.net/mp_download/manage/download/UpDetailed?spm=3001.5299

  2. 阿里数据可视化平台下载：http://datav.aliyun.com/portal/school/atlas/area_selector

在这里插入图片描述
3. https://geojson.cn/

aibujin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 力导向图
触不到的颜色是否叫彩虹的博客
02-27 7384
首先放上大佬文章链接： http://blog.csdn.net/u010430471/article/details/52955131 https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html 1、数据 在echarts3的力向图里面主要有两种数据，一种为节点（node）数据，一种为节点与节点之间的关系边（link...
使用Echarts绘制力导向图
锐意工作室
10-31 6504
文章目录使用Echarts绘制力导向图前言参考文档绘制力导向图扩展阅读 使用Echarts绘制力导向图 前言 本文介绍了在VS Code中使用百度Echarts来绘制力导向图（Force-directred graph）。 参考文档 [5分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts) https...
echars力引导关系图
qq_45234177的博客
08-02 769
【代码】echars力引导关系图。
ECharts 图形化看板 模板（简单实用）
最新发布
qq_65142821的博客
06-04 691
select: {name: "商品展示",},},
echarts 力导向关系图
qq_40295815的博客
03-04 1603
option = { title: { text: '' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', label: { normal: { show: true, ...
echarts3.2.3力导向图示例
10-28
由于echarts3与echarts2.x存在很大的不同，这里利用百度开源的echarts3.2.3做了一个的力导向图网络关系示例,详细做法可以参考我的博客文章。
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
04-12
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
AUTODRIV.rar_VC 向导_向导_向导程序
09-23
标题中的“AUTODRIV.rar_VC 向导_向导_向导程序”指的是一个使用Microsoft Visual C++ 6.0（简称VC++6.0）编写的自动化向导程序。这个程序可能是一个模板或者框架，旨在帮助开发者快速构建自定义的向导应用。向导...
VC.DLL.image.360.rotation.rar_dll图片_vc 图片 旋转
09-23
在Visual Studio中创建一个新的DLL工程，选择“Win32控制台应用程序”，然后在向导中选择“动态库（DLL）”作为项目类型。这样，Visual Studio会生成必要的项目模板和配置。 接下来是实现360度旋转的核心算法。图片...
Xiaodao.rar_VC 向导
09-23
标题中的“Xiaodao.rar_VC 向导”暗示了这是一个关于使用Visual C++（简称VC++）开发的向导程序。在编程领域，向导通常是指帮助开发者快速完成特定任务的一系列步骤或自动化工具。这可能是一个简单的教程或者示例...
Twido固件装载向导V3.2_CN
03-18
介绍了关于Twido固件装载向导V3.2_CN的详细说明，提供PLC的技术资料的下载。
Echarts 关系图
01-04
Echarts 关系图，支持关键点显示及提示框提示。。。。。。。。。。。。。。
dbtsing.zip_图形/文字识别_曲线 拟合
07-14
曲线拟合向导 Matlab 程序 Curve fitting guide Matlab
Echarts关系图-力引导布局
nieji3057的博客
03-27 3074
转自：https://www.cnblogs.com/warcraft/p/7251001.html 需要做一个树形图，可以查看各个人员的关系。 可伸缩的力引导图-失败 刚开始，打算做一个可展开和伸缩的，搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠。 这里放上前辈的代码 /** 这段代码来自 http://blog.csdn.n...
Echarts3可伸展力导向图
夏栀的博客
11-26 717
Echarts3可伸展力导向图   最近知识图谱项目的需要，使用Echarts3开发了可伸展力导向图前端代码，现分享如下：   主要功能：图谱web端可视化；支持用户交互。 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title>...
echarts拓扑图(graph，力导向布局图)
热门推荐
星空月零的博客
06-14 1万+
echarts链接：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解：https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html 代码： jsp： <script type="text/javascript" src="http://echa...
echarts graph（关系图），force（力引导布局），circular（环形布局）
桂秋拾貳
03-21 1310
echarts graph类型 关系图，文章内我展示了数据结构，option的内容，以及成品展示，希望可以帮助到大家学习或工作当中用到
使用百度Echarts制作力导向图
weixin_30780649的博客
09-11 419
最近项目需求制作一个力导向图来展示企业的画像等关系信息，故想到了百度Echarts的关系图，在这使用Echarts3.0版本来实现。先上效果图，再看代吗 哎，本来想整个工程扔出来，发现好像没地方上传附件，所以就先附上部分重要代码，节点的参数大部分封装在后台代码中，前端js只负责配置参数以及调用后台获取对应的节点以及关系线。你也可以所有节点和线的数据都在js中构造也是可以的。 //C#代码 ...
Neo4J - ECharts力导向图
weixin_51146503的博客
04-02 1694
知识图谱有多种可视化形式，在此以力导向图作为可视化形式。对比了D3、neovis.js和ECharts，选择了开箱即用就很优美且定制化程度较高的ECharts。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值