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,有 ...
随机推荐
- c++-多态小案例
多态小案例 C面向接口编程和C多态 函数类型语法基础 函数指针做函数参数(回调函数)思想剖析 函数指针做函数参数两种用法(正向调用.反向调用) 纯虚函数 抽象类 抽象类基本概念 抽象类在多继承中的应用 ...
- MongoDB(五):更新文档、删除文档
1. 更新文档 MongoDB的uptade()和save()方法用于将集合中的文档更新.update()方法更新现有文档中的值,而save()方法是传递文档数据替换现有文档.从3.2版本开始,Mon ...
- JavaWeb中实现通过邮箱找回密码
在开发JavaWeb项目中,利用邮箱帮用户找回密码.效果展示: 需要一个发送邮件的jar包 : javax.mail .jar1.JSP页面(设置邮箱输入框) HTML: <p >请输 ...
- SpringSession 独立使用
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- Beeline里面执行hive脚本 函数nvl2()与replace()报错
Beeline里面执行hive脚本函数nvl2()与replace()报错 写脚本的时候是在impala里面执行的,都正常,但是转换为调度的时候是在beeline里面执行的 就会有问题了. 详情如下: ...
- 关于java基础、多线程、JavaWeb基础、数据库、SSM、Springboot技术汇总
作者 : Stanley 罗昊 本人自行总结,纯手打,有疑问请在评论区留言 [转载请注明出处和署名,谢谢!] 一.java基础 1.多态有哪些体现形式? 重写.重载 2. Overriding的是什么 ...
- 挑选(pick)
挑选(pick) 1s/128MB [题目背景] NOIP2017 马上就要到了,丁爷爷想要从他的小朋友里挑选出一些厉害的来参加NOIP. [题目描述] 丁爷爷共有 n 个小朋友,按编号 1 . . ...
- Git实战指南----跟着haibiscuit学Git(第七篇)
笔名: haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...
- 拥抱自动化,CODING 2.0 持续集成全新上线
在文章开始前,做一个小调查,在您的软件项目中集成一行新代码平均需要花多长时间? 15 分钟 一小时 半天 一天及以上 注意这里的集成是指将源码放在一起,并验证源码可以作为一个一致.运行可靠的软件的过程 ...
- TCP服务端
出处: https://blog.csdn.net/DGH2430284817/article/details/86653294问题描述: 在用socket的通信中,经常会出现这种情况,客 ...