1、配置数据
数据结构上,内圈是外圈的父节点
[
{
value:n,
数值,根据同层所有数值的占比,构成百分比圆环,不写为内部第一层children的数值和
若设置的值大于内部第一层的数值,即表示有未显示的内容,具体表示图会压缩同层其他环占比
name:'显示内容',
link:'点击此节点可跳转的超链接', nodeClick值为'link'时才生效
target = 'blank|self', nodeClick值为'link'时才生效
r:n|n%, 该层圆环的内半径,设置后radius无效
r0:n|n%, 该层圆环的外半径,设置后radius无效
children:[
{
value:n,
name:'显示内容'
}
]
},
{
value:n,
name:''
}
]
2、配置series
series:[
{
type:'sunburst',
center:['50%','50%'],
radius = [0, '75%'], 内半径,外半径
sort:function(nodeA, nodeB) { 对数值进行排序后再展示
return -nodeA.getValue() + nodeB.getValue()
},
highlightPolicy:'ancestor', 高亮是圆环显示形式
'descendant'，则会高亮该扇形块和后代元素，其他元素将被淡化
'ancestor'，则会高亮该扇形块和祖先元素；
'self' 则只高亮自身；
'none' 则不会淡化其他元素。
nodeClick:'zoomToNode' 点击节点后缩放到节点
false：节点点击无反应
'link'：如果节点数据中有 link 点击节点后会进行超链接跳转。
sort:'desc|asc|null' 扇形块根据数据value的排序方式,如果未指定value,则其值为子元素value之和
function(nodeA, nodeB) {
return nodeA.getValue() - nodeB.getValue();
}
label:{
rotate:'radial' 径向旋转
'tangential' 切向旋转
n数字
},
levels:[ 设置各个层级圆环样式
{
第一层表示,点击后中间空白圆圈的样式,即点击返回的圆圈
itemStyle:{}
},
{
第二层设置最内层圆环的样式
label:{},
itemStyle:{},
emphasis:{}, 高亮样式
highlight:{}, 鼠标悬停后相关扇形块的配置项
downplay:{ 从本层开始,未悬停区域的颜色
label:{},
itemStyle:{}
}
}
]
}
]
效果图:
点击后:
代码示例:
<template>
<div id="app">
<div class='map'>
</div>
<div class='map2'>
</div>
<div>
<button @click="add">修改</button>
<button @click="highLight">高亮</button>
</div>
<!-- <router-view/> -->
</div>
</template>
<script>
import echarts from 'echarts';
import axios from 'axios';
export default {
name: 'App',
data()
{
return{
myMap:'',
pieData:[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
}
},
methods:{
add()
{
this.pieData.push({name:'苏宁',value:'9999'})
var option={
series:[
{
data:this.pieData
}
]
}
this.myMap.setOption(option);
},
highLight()
{
this.myMap.dispatchAction({
type: 'highlight',
// seriesIndex:0,
dataIndex: 2,
})
}
},
mounted:async function(){
var myMap=echarts.init(document.querySelector('.map'));
this.myMap=myMap;
var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
var yData1=[88,92,63,77,94,80,72,86];
var yData2=[80,90,60,70,90,70,62,76];
// var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
var option = {
legen:{
show:true,
},
series:[{
type:'sunburst',
sort:function(nodeA, nodeB) {
return -nodeA.getValue() + nodeB.getValue()
},
highlightPolicy:'ancestor',
data:
[{
name: 'parent1',
value: 10, // 可以不写父元素的 value，则为第一层子元素之和；
// 如果写了，并且大于子元素之和，可以用来表示还有其他子元素未显示
children: [
{
value: 5,
name: 'child1',
children: [{
value: 8, //根据第一层节点的value数值,来进行占比绘制,若第一层无value,则根据第一层子节点的value进行占比
name: 'grandchild1',
}]
},
{
value: 3,
name: 'child2',
}
],
itemStyle: {
// parent1 的图形样式，不会被后代继承
},
label: {
// parent1 的标签样式，不会被后代继承
}
}, {
name: 'parent2',
value: 8,
children:[{
value:8,
name:'p2child'
}]
}],
levels:[{ //第一层表示,点击后中间空白圆圈的样式,即返回圆圈
itemStyle:{
color:'orange'
},
emphasis:{
itemStyle:{
// color:'blue'
}
}
},
{
itemStyle:{
color:'purple'
},
downplay:{ //从本层开始,未悬停区域的颜色
itemStyle:{
color:'green'
}
}
},
{
downplay:{
itemStyle:{
color:'black'
}
}
}
]
}]
};
myMap.setOption(option);
}
}
</script>
<style>
.map{
height:400px;
width: 100%;
/* width:700px; */
}
.map2{
height:400px;
width: 100%;
/* width:700px; */
}
</style>
第三张图配置项:
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
}]
}
};
第四张图代码示例:
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: [{
//radius: ['0%', '70%'],
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
}
}
}]
}]
};
扫一扫
2179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
