echarts关系图圆心颜色渐变
let option = {
backgroundColor: '#1a4377',
animationDurationUpdate: 1500, // 动画更新变化时间
animationEasingUpdate: 'quinticInOut', // 动画缓动效果
series: [
{
type: 'graph', // 选择关系图
layout: 'force', // 'none'无部局,需要自己添加坐标,'circular'环形布局,'force'引导布局,出来的效果随机
force:{
repulsion: 1000, // 节点间的斥力
edgeLength: 50 // 两节点间距离,受斥力影响
},
roam: true,
label: { // 节点中字的全局样式
normal: {
show: true,
color: '#fff'
}
},
itemStyle: { // 节点圆圈的全局样式
normal: {
// borderColor: '#fff',
// borderWidth: 1,
// shadowBlur: 1,
// shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
focusNodeAdjacency: true, // 鼠标悬浮一个节点时突出与它有关系的节点,淡化其它无关系的节点
data: [ // 各个节点数据
{
id: 'a1',
name: '校园大数据',
symbolSize: 120, // 决定各个节点大小
draggable: true, // 可拖拽
category: 0, // 节点间分类
itemStyle: { // 各圆圈自定义样式
normal: {
borderColor: '#b457ff',
borderWidth: 1,
shadowBlur: 20,
shadowColor: '#b457ff',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [ // 由中心向四周渐变
{
offset: 0,
color: "rgba(180, 87, 255, 0.1)"
},
{
offset: 1,
color: "rgba(180, 87, 255, 1)"
}
]),
}
}
},
{
id: '2',
name: '舆情大数据',
symbolSize: 100,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(4, 242, 164, 0.1)"
},
{
offset: 1,
color: "rgba(4, 242, 164, 1)"
}
]),
}
},
category: 1,
},
{
id: '3',
name: '用户分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(4, 242, 164, 0.1)"
},
{
offset: 1,
color: "rgba(4, 242, 164, 1)"
}
]),
}
},
},
{
id: '4',
name: '话题分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(4, 242, 164, 0.1)"
},
{
offset: 1,
color: "rgba(4, 242, 164, 1)"
}
]),
}
},
},
{
id: '5',
name: '评论分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(4, 242, 164, 0.1)"
},
{
offset: 1,
color: "rgba(4, 242, 164, 1)"
}
]),
}
},
},
{
id: '6',
name: '图书馆分析',
symbolSize:100,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#82dffe',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(130, 223, 254, 0.1)"
},
{
offset: 1,
color: "rgba(130, 223, 254, 1)"
}
]),
}
},
},
{
id: '7',
name: '借阅分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#82dffe',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(130, 223, 254, 0.1)"
},
{
offset: 1,
color: "rgba(130, 223, 254, 1)"
}
]),
}
},
},
{
id: '8',
name: '借阅排行',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#82dffe',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(130, 223, 254, 0.1)"
},
{
offset: 1,
color: "rgba(130, 223, 254, 1)"
}
]),
}
},
category: 2,
},
{
id: '9',
name: '图书收录',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#82dffe',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(130, 223, 254, 0.1)"
},
{
offset: 1,
color: "rgba(130, 223, 254, 1)"
}
]),
}
},
category: 2,
},
{
id: '10',
name: '图书分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 1,
shadowBlur: 10,
shadowColor: '#82dffe',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
{
offset: 0,
color: "rgba(130, 223, 254, 0.1)"
},
{
offset: 1,
color: "rgba(130, 223, 254, 1)"
}
]),
}
},
}],
links: [ // 各个节点间的关系,可传id或name,这里选择的id
{
source: 'a1',
target: '2'
},
{
source: '2',
target: '3',
},
{
source: '2',
target: '4',
},
{
source: '2',
target: '5',
},
{
source: 'a1',
target: '6',
},
{
source: '6',
target: '10',
},
{
source: '6',
target: '7',
},
{
source: '6',
target: '8',
},
{
source: '6',
target: '9'
}
],
lineStyle: { // 连线的样式
normal: {
opacity: 0.9,
width: 1,
curveness: 0 // 线的弯曲程度,0代表直线,数值越大越弯
}
}
}
]
};
let myChart = echarts.init(document.getElementById('relate'));
myChart.setOption(option);
echarts关系图圆心颜色渐变的更多相关文章
- echarts折线图上下颜色渐变样式
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...
- hadoop下生成echarts关系图
数据 O700 O2833 O700 O331 O700 O3425 O700 O350 O700 O3516 O700 O3826 读取文件类 public class FileReadFromHd ...
- Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
- Echarts 关系图 添加点击事件
/*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...
- Echarts——关系图(人民的名义为例,简化)源码
参考博文:https://www.cnblogs.com/emrys5/p/echart-relationship-map.html <!DOCTYPE html> <html> ...
- echarts 关系图graph force布局 拖动节点并固定不返回原点
myChart.on('mouseup',function(params){var option=myChart.getOption();option.series[0].nodes[params.d ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- 前端 | 使用 ECharts 绘制关系图
0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
随机推荐
- 一起学Vue之样式绑定
在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Aery的UE4 C++游戏开发之旅(3)蓝图
目录 蓝图 蓝图命名规范 蓝图优化 暴露C++至蓝图 暴露C++类 暴露C++属性 暴露C++函数 暴露C++结构体/枚举 暴露C++接口 蓝图和C++的结合方案 使用继承重写蓝图 使用组合重写蓝图 ...
- 从无到有通过IDEA搭建SpringBoot项目
本人第一次写博客希望记录当下,努力成为IT界中的清流,写的不好多多包涵. SpringBoot是由Pivotal团队在2013年开始研发.2014年4月发布第一个版本的全新开源的轻量级框架.它基于Sp ...
- C#中转换运算符explicit、implicit、operator、volatile研究
C#中的这个几个关键字:explicit.implicit与operator,估计好多人的用不上,什么情况,这是什么?字面解释:explicit:清楚明白的;易于理解的;(说话)清晰的,明确的;直言的 ...
- pycharm查看函数用法,参数信息的设置方法
在编写python程序时,常常会遇到一些不太常见的函数,有时候又不想去百度,那么,使用pycharm设置快速显示函数的参数和用法,这个方法十分快捷方便. step1. file -> setti ...
- centos7上安装jdk1.8
我这里是使用的jdk1.8:由于vmware上的字体太小,所以我使用xShell链接linux系统进行操作的. 准备工作:使用xftp链接linux系统:然后创建个包将linux版本的jdk上传上去: ...
- docker chromium/chrome: error while loading shared libraries: libXcursor.so.2: cannot open shared object file: No such file or directory
在运行 pyppeteer 的时候,因为依赖浏览器,出现上述情况. 解决办法: 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误.原因一般有两个, 一个是操作系统里确实没有包含 ...
- 怎么将DWG转PDF?分享一个在线转换方法
了解CAD的朋友们都知道,在使用CAD制图软件绘制图纸的时候,默认的CAD图纸保存格式就是为DWG格式.但是DWG格式的文件不能够直接进行打开查看,就需要将DWG转PDF格式.那具体要怎么来进行操作呢 ...
- Android 监听手机锁屏的工具类
自定义 ScreenListener package com.example.teagardenhd.Listener; import android.content.BroadcastReceive ...