echarts关系图圆心颜色渐变
程序员文章站
2022-08-08 14:50:20
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); 下一篇： Mvc导入