echart旭日图_echart旭日图
echart旭日图
.m-main{margin: 200px;width: 150px;height:150px;}
let myChart = echarts.init(document.getElementById('main'));
let data = [];
let net = ['内网', '外网'];
let level = ['高危', '中危', '低危', '信息'];
let sum = 0;
let itemStyle = [
[{
color: '#ab7550',
itemStyle: [{
color: '#ab7550'
}, {
color: '#825d44'
}]
},
{
color: '#614838',
itemStyle: [{
color: '#523c2e'
}, {
color: '#4e3d32'
}]
}
],
[{
color: '#3b3933',
itemStyle: [{
color: '#414028'
}, {
color: '#3b3933'
}]
},
{
color: '#605f42',
itemStyle: [{
color: '#5f5e41'
}, {
color: '#56564c'
}]
}
]
];
for (let i = 0; i < 50; i++) {
let temp = {};
temp.net = Math.random() > 0.3 ? 0 : 1;
temp.level = Math.floor(Math.random() * 3.9);
temp.msg = '信息' + i;
temp.num = parseInt(Math.random() * 20 + 1, 10);
sum += temp.num;
data.push(temp);
}
for (let i = 0; i < data.length; i++) {
data[i].parsent = ((data[i].num / sum) * 100).toFixed(2) + '%';
}
let formatData = [{
info: {
net: '外网',
num: 0,
parsent: '100%'
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#292929'
}, {
offset: 1,
color: '#e08849'
}],
globalCoord: false
}
},
children: [{
info: {
net: '外网',
level: '高危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '外网',
level: '中危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '外网',
level: '低危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '外网',
level: '信息',
num: 0,
parsent: '100%'
},
children: []
}
]
}, {
info: {
net: '内网',
num: 0,
parsent: '100%'
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#605F42'
}, {
offset: 1,
color: '#292929'
}],
globalCoord: false
}
},
children: [{
info: {
net: '内网',
level: '高危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '内网',
level: '中危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '内网',
level: '低危',
num: 0,
parsent: '100%'
},
children: []
},
{
info: {
net: '内网',
level: '信息',
num: 0,
parsent: '100%'
},
children: []
}
]
}];
for (let i = 0; i < data.length; i++) {
let temp = {};
temp = Object.assign({}, data[i]);
temp.net = net[data[i].net];
temp.level = level[data[i].level];
formatData[data[i].net].children[data[i].level].children.push({
info: temp,
value: data[i].num,
});
}
for (let i = 0; i < formatData.length; i++) {
let isFirst = true;
let numLevel_1 = 0;
for (let j = 0; j < formatData[i].children.length; j++) {
if (formatData[i].children[j].children.length > 0) {
let index = isFirst ? 0 : 1;
formatData[i].children[j].itemStyle = itemStyle[i][index];
let isFirst2 = true;
let numLevel_2 = 0;
for (let z = 0; z < formatData[i].children[j].children.length; z++) {
let index2 = isFirst2 ? 0 : 1;
formatData[i].children[j].children[z].itemStyle = itemStyle[i][index].itemStyle[index2];
let num = formatData[i].children[j].children[z].info.num;
numLevel_2 += num;
isFirst2 = !isFirst2;
}
formatData[i].children[j].info.num = numLevel_2;
formatData[i].children[j].info.parsent = (numLevel_2 / sum * 100).toFixed(2) + '%';
numLevel_1 += numLevel_2;
isFirst = !isFirst;
}
}
formatData[i].info.num = numLevel_1;
formatData[i].info.parsent = (numLevel_1 / sum * 100).toFixed(2) + '%';
}
let option = {
grid: {
top: '0',
left: '0',
right: '0',
bottom: '0',
containLabel: false
},
tooltip: {
show: true,
formatter: function(params, ticket, callback) {
let net = params.data.info.net;
let level = params.data.info.level ? '·' + params.data.info.level : '';
let msg = params.data.info.msg ? '·' +params.data.info.msg : '';
let num = params.data.info.num;
let parent = params.data.info.parsent;
var text = net + level + msg;
return `
`;
}
},
series: {
radius: ['20%', '100%'],
type: 'sunburst',
nodeClick: false,
itemStyle: {
borderWidth: 1
},
animationDurationUpdate: 0,
emphasis: {
itemStyle: {
opacity: 0.8
}
},
sort: null,
data: formatData
}
};
myChart.setOption(option);
echart旭日图_echart旭日图相关推荐
- echart旭日图_ECharts 旭日图
ECharts 旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. ECharts 创 ...
- echart旭日图_旭日图(echarts)
旭日图 var dataL1 = []; var dataL2 = []; var data1 = []; for (var i = 0; i <= 60; i++) { dataL1.push ...
- echart旭日图_150Echarts - 旭日图(Sunburst Label Rotate)
效果图 源代码 ECharts // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main') ...
- css transparent张鑫旭,张鑫旭css世界学习心得一
目前大概只看了width,height这一部分的介绍,感觉明悟了一点之前关于布局的疑惑. 1. 关于display:block block属性具有最具代表性的流动性,天生默认宽度为父盒子的100%.流 ...
- echart高级使用_Echart使用总结
水监测图表.gif 1.项目中用到的一些属性 const options = { grid: {// 柱状图位置 top: '15px', left: '0', right: '0', bottom: ...
- “新产业50人论坛”之钱旭红院士:量子思维与创新发展
10月23日,由中关村发展集团主办,中关村产业研究院承办的"新产业50人论坛"上,华东师范大学校长.中国工程院院士钱旭红发表了<量子思维与创新发展>主题演讲. 量子前哨 ...
- 【金猿人物展】MobTech袤博科技CEO兰旭:大数据应用应“懂行”又“懂数”
兰旭 本文由MobTech袤博科技CEO兰旭撰写并投递参与"数据猿年度金猿策划活动--2021大数据产业趋势人物榜单及奖项"评选. 数据智能产业创新服务媒体 --聚焦数智 · 改变 ...
- 纪念刘旭:操纵记忆的先行者
纪念刘旭:操纵记忆的先行者 刘旭 复旦 美国西北大学刘旭 刘旭西北大学 刘旭复旦大学 刘旭博士 悼念刘旭 刘徐师兄 刘旭MIT 刘旭 利根川进 丁丁Dynasty 发表于 2015-03-10 ...
- 在蓝旭工作室学习的总结
在蓝旭工作室学习的总结 为什么来蓝旭 学习方面 待在工作室一个月以来的感受 怎么学习的 为什么来蓝旭 来蓝旭的真是一段因缘际会, 由于去年的时候,有些自身的原因,错过了加入工作室的机会, 然后这个一直 ...
最新文章
- .NET Core容器化@Docker
- 前端获取当前url路径
- Linux中fdisk对应的c函数,linux下fdisk命令实战案例之详解
- jmeter压力测试_如何使用Jmeter进行压力测试?这篇入门讲解拿去不谢!
- 初识exe程序反汇编小感
- C#实现外部图片的拖拽到应用程序的简单功能,附全部源码,供有需要的参考...
- 荆楚理工学院计算机科学专业,荆楚理工学院计算机科学与技术专业2016年在湖北理科高考录取最低分数线...
- 最新前端中高级面试题
- 一个linux下g++使用的 makefile 模板
- 跟我一起写大虾网(第0天)
- 同类型的免费下载软件中, JDownloader的功能比FreeRapid Downloader功能要强很多
- DOTween 使用方法
- 什么是王道?什么是王道中的王道?
- chrome不跟随系统分辨率
- 2020年12月中国编程语言排行榜 - Java地位岌岌可危
- Win10 设置默认语言
- Photoshop CC 2019软件安装教程
- 【PS】图片背景透明化
- 聚丙烯酸(PAA)修饰纳米Fe3O4四氧化三铁粒子|CNTs/Fe3O4/TiO2纳米复合材料(齐岳)
- python访问陌生人qq空间_使用Python+Selenium模拟登录QQ空间