欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

echarts关系图圆心颜色渐变

程序员文章站 2022-05-03 12:07:37
let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 动画更新变化时间 animationEasingUpdate: 'quinticInOut', // 动画缓动效果 series: [ { typ ......
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);