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,有 ...
随机推荐
- System.InvalidOperationException: The binary operator NotEqual is not defined for the types 'Microsoft.EntityFrameworkCore.Storage.ValueBuffer' and 'Microsoft.EntityFrameworkCore.Storage.ValueBuffer'.
.netcore 2.1使用左表连接时报错,原因是对数据库中实体 DateTimeOffset date做查询判断时,将数据库中date转为string进行了判断,这样判断是错误的,并且效率低,应该是 ...
- SuperMap iDesktop .NET 10i制图技巧-----如何贴图
当我们在没有模型数据的情况下,我们只能通过造白膜来模拟三维建筑了,但是光秃秃的建筑物显然缺乏代入感,因此需要贴图来给场景润色,本文介绍如何给道路贴图和如何给白膜贴图 道路贴图: 1.打开二维道路数据 ...
- cesium 实现风场图效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Android 音视频技术之录音获取实时音量
一.实时音量相关基础知识 说到获取音量,大家首先想到的应该就是分贝(dB),分贝是一个相对单位(是一个比值,是一个数值,是一个纯计数方法). 在音频领域dB度量的是声音的强度,其计算的公式如下: 在上 ...
- CODING 敏捷看板全新上线,助力研发管理可视化升级
在服务企业研发团队的过程中,我们发现不少团队碰到了类似的问题: 团队成员声称完成了自己的大部分任务,但团队实际交付的需求却寥寥无几? 由于某些问题导致工序一直处于等待状态,怎么识别和处理这些延迟? 成 ...
- 元类, pymysql
元类, pymysql 一.元类 自定义元类 ''' 1.什么是元类? - 类的类就是type,其实type就是元类 2.元类的作用? 3.如何创建元类以及使用? ''' # # 1.一切皆对象 # ...
- 关于css布局的记录(一) --table和flex布局
1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...
- IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...
- mysql不等于判断时,空值过滤问题
产生根源 比如我们有三条数据,对应的列名是delete_flag,对应的数据是'normal','delete',null. 此时我们查所有不等于delete的记录,我们期望的是两条记录 normal ...
- CSS学习笔记-过渡模块
过渡模块: 1.过渡三要素 1.1必须要有属性发生变化 1.2必须告诉系统哪个属性需要执行过渡效果 1.3必须告诉系统过渡效果持续时长 2.格式: ...