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,有 ...
随机推荐
- JPA中实现双向一对多的关联关系
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
- Redis简单命令(部分示例代码)
一.redis文件夹下的可执行文件(文章尾部有示例代码) 可执行文件 作用 redis-server 启动redis redis-cli redis命令行工具 redis-benchmark 基准测试 ...
- React每隔0.2s颜色变淡 之生命周期 ,componentDidMount表示组件已经挂载
05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
- 【30天自制操作系统】day03:读写磁盘
软盘 80个柱面,2个磁头,18个扇区 每个扇区 512 字节,共 1440 KB 读磁盘汇编 读取 10 个柱面到 0x0820 内存位置 ;读取磁盘 MOV AX,0x0820 MOV ES,AX ...
- 【30天自制操作系统】day02:寄存器和Makefile
基本寄存器 AX(accumulator):累加寄存器 CX(counter):计数寄存器 DX(data):数据寄存器 BX(base):基址寄存器 SP(stack pointer):栈指针寄存器 ...
- 【zabbix告警监控】配置zabbix监控nginx服务
zabbix监控nginx,nginx需要添加--with-http_stub_status模块 使用zabbix监控nginx,首先nginx需要配置开启ngx_status.但是我这边nginx安 ...
- mysql-两种方式安装
一.数据库版本 MySQL 常见版本 MySQL Community Server 社区版本,开源免费,但不提供官方技术支持. MySQL Enterprise Edition 企业版本,需付费,可以 ...
- 如何修改PhpStorm快捷键
- 利用zabbix API 统计一段时间内监控项的均值和峰值
#coding:utf-8 #给定主机IP获取一段时间内cpu的均值和峰值并写入文件(txt,可以跑完后直接把后缀名改为csv以表格形式打开):需要指定IP文件 import requests imp ...
- English:Day-to-day 1015
device session stroll pants & trousers gist deep depth diameter D radius R merge ..