echarts 旭日图sunburst

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、配置seriesseries:[{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}}}]}]
};

echarts 旭日图sunburst相关推荐

Echarts——旭日图
旭日图旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. 引入相关文件旭日图是 EChar ...
echarts旭日图
旭日图这是echarts 5.4.0 版本的.注意:如果一些样式不生效,可能是版本太低了. <div style="width:50%;height:400px">& ...
python pyecharts绘制旭日图Sunburst
文章目录 basic_sunburst drink_flavors basic_sunburst from pyecharts.charts import Sunburst from pyechart ...
echart旭日图_海报级设计感的旭日图，就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列--旭日图. 普通旭日图: 文艺旭日图: 2B 旭日图--这货真的长得像个旭日啊 щ(ﾟДﾟщ): 可能大家印象 ...
旭日图（Sunburst）
更多关于Apache ECharts的文档,请阅读: Apache ECharts文档专题 <Apache ECharts教程> 5 分钟上手 ECharts ECharts 5 新特性 ...
Python数据可视化 Pyecharts 制作 Sunburst 旭日图
Python3 的 Pyecharts 制作 Sunburst(旭日图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 标准旭日图饮料风味旭日图 ...
echart旭日图_ECharts 旭日图
ECharts 旭日图旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. ECharts 创 ...
echart旭日图_echarts（10）：旭日图
旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. ECharts 创建旭日图很简单,只需要在 ...
echart旭日图_旭日图(echarts)
旭日图 var dataL1 = []; var dataL2 = []; var data1 = []; for (var i = 0; i <= 60; i++) { dataL1.push ...

echarts 旭日图sunburst

echarts 旭日图sunburst相关推荐

最新文章

热门文章