echarts 旭日图_ECHARTS

echarts 旭日图_ECHARTS旭日图旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。引入相关文件旭日图是ECharts4.0新增的图表类型,需要引入完整版的echarts.min.js最简单的旭日图创建旭日图需要在series配置项中声明类型为‘sunburst’的系列,并且以树形结构声明其d…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

旭日图

旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。

引入相关文件

旭日图是 ECharts 4.0 新增的图表类型,需要引入完整版的 echarts.min.js

最简单的旭日图

创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列,并且以树形结构声明其 data:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>最简单的旭日图</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { 
 series: { 
 type: 'sunburst', data: [{ 
 name: 'A', value: 10, children: [{ 
 value: 3, name: 'Aa' }, { 
 value: 5, name: 'Ab' }] }, { 
 name: 'B', children: [{ 
 name: 'Ba', value: 4 }, { 
 name: 'Bb', value: 2 }] }, { 
 name: 'C', value: 3 }] } }; myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述

颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色,其余层则与其父元素同色。在旭日图中,扇形块的颜色有以下三种设置方式:

  • 在 series.data.itemStyle 中设置每个扇形块的样式;
  • 在 series.levels.itemStyle 中设置每一层的样式;
  • 在 series.itemStyle 中设置整个旭日图的样式。

上述三者的优先级是从高到低的,也就是说,配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置。

下面,我们将整体的颜色设为灰色 ‘#aaa’,将最内层的颜色设为蓝色 ‘blue’,将 Aa、B 这两块设为红色 ‘red’。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色等样式调整</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { 
 series: { 
 type: 'sunburst', data: [{ 
 name: 'A', value: 10, children: [{ 
 value: 3, name: 'Aa', itemStyle: { 
 color: 'red' } }, { 
 value: 5, name: 'Ab' }] }, { 
 name: 'B', children: [{ 
 name: 'Ba', value: 4 }, { 
 name: 'Bb', value: 2 }], itemStyle: { 
 color: 'red' } }, { 
 name: 'C', value: 3 }], itemStyle: { 
 color: '#aaa' }, levels: [{ 
 // 留给数据下钻的节点属性 }, { 
 itemStyle: { 
 color: 'blue' } }] } }; myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述

按层配置样式

旭日图是一种有层次的结构,为了方便同一层样式的配置,我们提供了 levels 配置项。它是一个数组,其中的第 0 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。

例如,假设我们没有数据下钻功能,并且希望将最内层的扇形块的颜色设为红色,文字设为蓝色,可以这样设置:

series: {
// ...
levels: [
{
// 留给数据下钻点的空白配置
},
{
// 最靠内测的第一层
itemStyle: {
color: 'red'
},
label: {
color: 'blue'
}
},
{
// 第二层 ...
}
]
}

在实际使用的过程中,你会发现按层配置样式是一个很常用的功能,能够很大程度上提高配置的效率。

数据下钻

旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,便于进一步了解该数据的细节。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>最简单的旭日图</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var data = [{ 
 name: 'Grandpa', children: [{ 
 name: 'Uncle Leo', value: 15, children: [{ 
 name: 'Cousin Jack', value: 2 }, { 
 name: 'Cousin Mary', value: 5, children: [{ 
 name: 'Jackson', value: 2 }] }, { 
 name: 'Cousin Ben', value: 4 }] }, { 
 name: 'Father', value: 10, children: [{ 
 name: 'Me', value: 5 }, { 
 name: 'Brother Peter', value: 1 }] }] }, { 
 name: 'Nancy', children: [{ 
 name: 'Uncle Nike', children: [{ 
 name: 'Cousin Betty', value: 1 }, { 
 name: 'Cousin Jenny', value: 2 }] }] }]; option = { 
 series: { 
 type: 'sunburst', // highlightPolicy: 'ancestor', data: data, radius: [0, '90%'], label: { 
 rotate: 'radial' } } }; myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述

高亮相关扇形块

旭日图支持鼠标移动到某扇形块时,高亮相关数据块的操作,可以通过设置 highlightPolicy,包括以下几种高亮方式:

  • descendant’(默认值):高亮鼠标移动所在扇形块与其后代元素;
  • ancestor’:高亮鼠标所在扇形块与其祖先元素;
  • self’:仅高亮鼠标所在扇形块;
  • none’:不会淡化(downplay)其他元素。

上面提到的“高亮”,对于鼠标所在的扇形块,会使用 emphasis 样式;对于其他相关扇形块,则会使用 highlight 样式。通过这种方式,可以很方便地实现突出显示相关数据的需求。

具体来说,对于配置项:

itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}

highlightPolicydescendantancestor的效果分别为:

descendant

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色等样式调整</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); option = { 
 silent: true, series: { 
 radius: ['15%', '95%'], center: ['50%', '60%'], type: 'sunburst', sort: null, highlightPolicy: 'descendant', data: [{ 
 value: 10, children: [{ 
 name: 'target', value: 4, children: [{ 
 value: 2, children: [{ 
 value: 1 }] }, { 
 value: 1 }, { 
 value: 0.5 }] }, { 
 value: 2 }] }, { 
 value: 4, children: [{ 
 children: [{ 
 value: 2 }] }] }], label: { 
 normal: { 
 rotate: 'none', color: '#fff' } }, levels: [], itemStyle: { 
 color: 'yellow', borderWidth: 2 }, emphasis: { 
 itemStyle: { 
 color: 'red' } }, highlight: { 
 itemStyle: { 
 color: 'orange' } }, downplay: { 
 itemStyle: { 
 color: '#ccc' } } } }; setTimeout(function () { 
 myChart.dispatchAction({ 
 type: 'sunburstHighlight', targetNodeId: 'target' }); }); myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述

ancestor

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ancestor</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); option = { 
 silent: true, series: { 
 radius: ['15%', '95%'], center: ['50%', '60%'], type: 'sunburst', sort: null, highlightPolicy: 'descendant', data: [{ 
 value: 10, children: [{ 
 name: 'target', value: 4, children: [{ 
 value: 2, children: [{ 
 value: 1 }] }, { 
 value: 1 }, { 
 value: 0.5 }] }, { 
 value: 2 }] }, { 
 value: 4, children: [{ 
 children: [{ 
 value: 2 }] }] }], label: { 
 normal: { 
 rotate: 'none', color: '#fff' } }, levels: [], itemStyle: { 
 color: 'yellow', borderWidth: 2 }, emphasis: { 
 itemStyle: { 
 color: 'red' } }, highlight: { 
 itemStyle: { 
 color: 'orange' } }, downplay: { 
 itemStyle: { 
 color: '#ccc' } } } }; setTimeout(function () { 
 myChart.dispatchAction({ 
 type: 'sunburstHighlight', targetNodeId: 'target' }); }); myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述

复杂的旭日图

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ancestor</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:600px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555']; var bgColor = '#2E2733'; var itemStyle = { 
 star5: { 
 color: colors[0] }, star4: { 
 color: colors[1] }, star3: { 
 color: colors[2] }, star2: { 
 color: colors[3] } }; var data = [{ 
 name: '虚构', itemStyle: { 
 color: colors[1] }, children: [{ 
 name: '小说', children: [{ 
 name: '5☆', children: [{ 
 name: '疼' }, { 
 name: '慈悲' }, { 
 name: '楼下的房客' }] }, { 
 name: '4☆', children: [{ 
 name: '虚无的十字架' }, { 
 name: '无声告白' }, { 
 name: '童年的终结' }] }, { 
 name: '3☆', children: [{ 
 name: '疯癫老人日记' }] }] }, { 
 name: '其他', children: [{ 
 name: '5☆', children: [{ 
 name: '纳博科夫短篇小说全集' }] }, { 
 name: '4☆', children: [{ 
 name: '安魂曲' }, { 
 name: '人生拼图版' }] }, { 
 name: '3☆', children: [{ 
 name: '比起爱你,我更需要你' }] }] }] }, { 
 name: '非虚构', itemStyle: { 
 color: colors[2] }, children: [{ 
 name: '设计', children: [{ 
 name: '5☆', children: [{ 
 name: '无界面交互' }] }, { 
 name: '4☆', children: [{ 
 name: '数字绘图的光照与渲染技术' }, { 
 name: '日本建筑解剖书' }] }, { 
 name: '3☆', children: [{ 
 name: '奇幻世界艺术\n&RPG地图绘制讲座' }] }] }, { 
 name: '社科', children: [{ 
 name: '5☆', children: [{ 
 name: '痛点' }] }, { 
 name: '4☆', children: [{ 
 name: '卓有成效的管理者' }, { 
 name: '进化' }, { 
 name: '后物欲时代的来临', }] }, { 
 name: '3☆', children: [{ 
 name: '疯癫与文明' }] }] }, { 
 name: '心理', children: [{ 
 name: '5☆', children: [{ 
 name: '我们时代的神经症人格' }] }, { 
 name: '4☆', children: [{ 
 name: '皮格马利翁效应' }, { 
 name: '受伤的人' }] }, { 
 name: '3☆', }, { 
 name: '2☆', children: [{ 
 name: '迷恋' }] }] }, { 
 name: '居家', children: [{ 
 name: '4☆', children: [{ 
 name: '把房子住成家' }, { 
 name: '只过必要生活' }, { 
 name: '北欧简约风格' }] }] }, { 
 name: '绘本', children: [{ 
 name: '5☆', children: [{ 
 name: '设计诗' }] }, { 
 name: '4☆', children: [{ 
 name: '假如生活糊弄了你' }, { 
 name: '博物学家的神秘动物图鉴' }] }, { 
 name: '3☆', children: [{ 
 name: '方向' }] }] }, { 
 name: '哲学', children: [{ 
 name: '4☆', children: [{ 
 name: '人生的智慧' }] }] }, { 
 name: '技术', children: [{ 
 name: '5☆', children: [{ 
 name: '代码整洁之道' }] }, { 
 name: '4☆', children: [{ 
 name: 'Three.js 开发指南' }] }] }] }]; for (var j = 0; j < data.length; ++j) { 
 var level1 = data[j].children; for (var i = 0; i < level1.length; ++i) { 
 var block = level1[i].children; var bookScore = []; var bookScoreId; for (var star = 0; star < block.length; ++star) { 
 var style = (function (name) { 
 switch (name) { 
 case '5☆': bookScoreId = 0; return itemStyle.star5; case '4☆': bookScoreId = 1; return itemStyle.star4; case '3☆': bookScoreId = 2; return itemStyle.star3; case '2☆': bookScoreId = 3; return itemStyle.star2; } })(block[star].name); block[star].label = { 
 color: style.color, downplay: { 
 opacity: 0.5 } }; if (block[star].children) { 
 style = { 
 opacity: 1, color: style.color }; block[star].children.forEach(function (book) { 
 book.value = 1; book.itemStyle = style; book.label = { 
 color: style.color }; var value = 1; if (bookScoreId === 0 || bookScoreId === 3) { 
 value = 5; } if (bookScore[bookScoreId]) { 
 bookScore[bookScoreId].value += value; } else { 
 bookScore[bookScoreId] = { 
 color: colors[bookScoreId], value: value }; } }); } } level1[i].itemStyle = { 
 color: data[j].itemStyle.color }; } } option = { 
 backgroundColor: bgColor, color: colors, series: [{ 
 type: 'sunburst', center: ['50%', '48%'], data: data, sort: function (a, b) { 
 if (a.depth === 1) { 
 return b.getValue() - a.getValue(); } else { 
 return a.dataIndex - b.dataIndex; } }, label: { 
 rotate: 'radial', color: bgColor }, itemStyle: { 
 borderColor: bgColor, borderWidth: 2 }, levels: [{ 
}, { 
 r0: 0, r: 40, label: { 
 rotate: 0 } }, { 
 r0: 40, r: 105 }, { 
 r0: 115, r: 140, itemStyle: { 
 shadowBlur: 2, shadowColor: colors[2], color: 'transparent' }, label: { 
 rotate: 'tangential', fontSize: 10, color: colors[0] } }, { 
 r0: 140, r: 145, itemStyle: { 
 shadowBlur: 80, shadowColor: colors[0] }, label: { 
 position: 'outside', textShadowBlur: 5, textShadowColor: '#333', }, downplay: { 
 label: { 
 opacity: 0.5 } } }] }] }; myChart.setOption(option); </script>
</body>
</html>

在这里插入图片描述


欢迎查看我的github博客:Welcome To Ryan’s Home


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189321.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • js 二维数组转Json数组「建议收藏」

    js 二维数组转Json数组「建议收藏」jsonFormat(dataset){//dataset是一个对象,dataset.source是一个二维数组constdata=dataset.sourceconsttableColumns=dataset.source[0]letdatajson={}varjsonresult=[]f…

  • mysql数据库入门

    在很多地方都有人提到MySQL这个数据,之前没有接触过的mysql数据库的童鞋们可以跟我一起走进mysql的世界。http://hovertree.com/menu/mysql/安装我就不多说了,

    2021年12月23日
  • python 0xff_正在解压缩“0xff”与“\xff”[通俗易懂]

    python 0xff_正在解压缩“0xff”与“\xff”[通俗易懂]我试图用wave库从wave文件中读取二进制数据。数据以’\x0f\x06\x0a…’的形式读取和报告,我想把十六进制数转换成整数(你知道,以10为基数)。我把这些字符当作十六进制字符来处理,但我并没有把这些字符当作十六进制字符来处理。在importwaveimportstructpath=”C:\\directory\\file.wav”file=wave.open(path,’r’)dat…

  • android 定时器

    android 定时器在Android开发中,定时器一般有以下3种实现方法:一、采用Handler与线程的sleep(long)方法二、采用Handler的postDelayed(Runnable,long)方法三、采用Handler与timer及TimerTask结合的方法下面逐一介绍:一、采用Handle与线程的sleep(long)方法Handler主要用来处理接受到的消

  • H5标签datalist

    H5标签datalist实现输入框的搜索联想功能简介datalist标签的说明和用法说明用法效果简介有的时候前端为了更好地实现输入框input的交互效果,需要增加搜索联想功能,除了使用已经封装好的组件或者自己手写js以外,我们可以使用datalist标签更简便地去实现这个功能。datalist标签的说明和用法说明datalist标签用来定义选项列表,需要与input元素配合使用,来定义input可能的值…

    2022年10月30日
  • 计算立方体,圆柱,圆锥体积的小程序是啥_计算圆柱体体积的程序

    计算立方体,圆柱,圆锥体积的小程序是啥_计算圆柱体体积的程序#include<iostream>#include<cmath>usingnamespacestd;voidvolume_square();//立方体体积函数声明voidvolume_cylinder();//圆柱体积函数声明voidvolume_cone();//圆锥体积函数声明intmain(){intchoice=-1;…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号