Echarts中太阳图（Sunburst）的实例

最新推荐文章于 2024-09-04 14:20:44 发布
最新推荐文章于 2024-09-04 14:20:44 发布
阅读量6.6k 收藏
点赞数
分类专栏： Echarts 前端 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36301420/article/details/80474645
版权

话不多说 先上效果图：
这里写图片描述

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 999px;height:700px;margin:0 auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var data = [{
            name: 'Flora',
            itemStyle: {
                color: '#da0d68'
            },
            children: [{
                name: 'Black Tea',
                value: 1,
                itemStyle: {
                    color: '#975e6d'
                }
            }, {
                name: 'Floral',
                itemStyle: {
                    color: '#e0719c'
                },
                children: [{
                    name: 'Chamomile',
                    value: 1,
                    itemStyle: {
                        color: '#f99e1c'
                    }
                }, {
                    name: 'Rose',
                    value: 1,
                    itemStyle: {
                        color: '#ef5a78'
                    }
                }, {
                    name: 'Jasmine',
                    value: 1,
                    itemStyle: {
                        color: '#f7f1bd'
                    }
                }]
            }]
        }, {
            name: 'Fruity',
            itemStyle: {
                color: '#da1d23'
            },
            children: [{
                name: 'Berry',
                itemStyle: {
                    color: '#dd4c51'
                },
                children: [{
                    name: 'Blackberry',
                    value: 1,
                    itemStyle: {
                        color: '#3e0317'
                    }
                }, {
                    name: 'Raspberry',
                    value: 1,
                    itemStyle: {
                        color: '#e62969'
                    }
                }, {
                    name: 'Blueberry',
                    value: 1,
                    itemStyle: {
                        color: '#6569b0'
                    }
                }, {
                    name: 'Strawberry',
                    value: 1,
                    itemStyle: {
                        color: '#ef2d36'
                    }
                }]
            }, {
                name: 'Dried Fruit',
                itemStyle: {
                    color: '#c94a44'
                },
                children: [{
                    name: 'Raisin',
                    value: 1,
                    itemStyle: {
                        color: '#b53b54'
                    }
                }, {
                    name: 'Prune',
                    value: 1,
                    itemStyle: {
                        color: '#a5446f'
                    }
                }]
            }, {
                name: 'Other Fruit',
                itemStyle: {
                    color: '#dd4c51'
                },
                children: [{
                    name: 'Coconut',
                    value: 1,
                    itemStyle: {
                        color: '#f2684b'
                    }
                }, {
                    name: 'Cherry',
                    value: 1,
                    itemStyle: {
                        color: '#e73451'
                    }
                }, {
                    name: 'Pomegranate',
                    value: 1,
                    itemStyle: {
                        color: '#e65656'
                    }
                }, {
                    name: 'Pineapple',
                    value: 1,
                    itemStyle: {
                        color: '#f89a1c'
                    }
                }, {
                    name: 'Grape',
                    value: 1,
                    itemStyle: {
                        color: '#aeb92c'
                    }
                }, {
                    name: 'Apple',
                    value: 1,
                    itemStyle: {
                        color: '#4eb849'
                    }
                }, {
                    name: 'Peach',
                    value: 1,
                    itemStyle: {
                        color: '#f68a5c'
                    }
                }, {
                    name: 'Pear',
                    value: 1,
                    itemStyle: {
                        color: '#baa635'
                    }
                }]
            }, {
                name: 'Citrus Fruit',
                itemStyle: {
                    color: '#f7a128'
                },
                children: [{
                    name: 'Grapefruit',
                    value: 1,
                    itemStyle: {
                        color: '#f26355'
                    }
                }, {
                    name: 'Orange',
                    value: 1,
                    itemStyle: {
                        color: '#e2631e'
                    }
                }, {
                    name: 'Lemon',
                    value: 1,
                    itemStyle: {
                        color: '#fde404'
                    }
                }, {
                    name: 'Lime',
                    value: 1,
                    itemStyle: {
                        color: '#7eb138'
                    }
                }]
            }]
        }, {
            name: 'Sour/\nFermented',
            itemStyle: {
                color: '#ebb40f'
            },
            children: [{
                name: 'Sour',
                itemStyle: {
                    color: '#e1c315'
                },
                children: [{
                    name: 'Sour Aromatics',
                    value: 1,
                    itemStyle: {
                        color: '#9ea718'
                    }
                }, {
                    name: 'Acetic Acid',
                    value: 1,
                    itemStyle: {
                        color: '#94a76f'
                    }
                }, {
                    name: 'Butyric Acid',
                    value: 1,
                    itemStyle: {
                        color: '#d0b24f'
                    }
                }, {
                    name: 'Isovaleric Acid',
                    value: 1,
                    itemStyle: {
                        color: '#8eb646'
                    }
                }, {
                    name: 'Citric Acid',
                    value: 1,
                    itemStyle: {
                        color: '#faef07'
                    }
                }, {
                    name: 'Malic Acid',
                    value: 1,
                    itemStyle: {
                        color: '#c1ba07'
                    }
                }]
            }, {
                name: 'Alcohol/\nFremented',
                itemStyle: {
                    color: '#b09733'
                },
                children: [{
                    name: 'Winey',
                    value: 1,
                    itemStyle: {
                        color: '#8f1c53'
                    }
                }, {
                    name: 'Whiskey',
                    value: 1,
                    itemStyle: {
                        color: '#b34039'
                    }
                }, {
                    name: 'Fremented',
                    value: 1,
                    itemStyle: {
                        color: '#ba9232'
                    }
                }, {
                    name: 'Overripe',
                    value: 1,
                    itemStyle: {
                        color: '#8b6439'
                    }
                }]
            }]
        }, {
            name: 'Green/\nVegetative',
            itemStyle: {
                color: '#187a2f'
            },
            children: [{
                name: 'Olive Oil',
                value: 1,
                itemStyle: {
                    color: '#a2b029'
                }
            }, {
                name: 'Raw',
                value: 1,
                itemStyle: {
                    color: '#718933'
                }
            }, {
                name: 'Green/\nVegetative',
                itemStyle: {
                    color: '#3aa255'
                },
                children: [{
                    name: 'Under-ripe',
                    value: 1,
                    itemStyle: {
                        color: '#a2bb2b'
                    }
                }, {
                    name: 'Peapod',
                    value: 1,
                    itemStyle: {
                        color: '#62aa3c'
                    }
                }, {
                    name: 'Fresh',
                    value: 1,
                    itemStyle: {
                        color: '#03a653'
                    }
                }, {
                    name: 'Dark Green',
                    value: 1,
                    itemStyle: {
                        color: '#038549'
                    }
                }, {
                    name: 'Vegetative',
                    value: 1,
                    itemStyle: {
                        color: '#28b44b'
                    }
                }, {
                    name: 'Hay-like',
                    value: 1,
                    itemStyle: {
                        color: '#a3a830'
                    }
                }, {
                    name: 'Herb-like',
                    value: 1,
                    itemStyle: {
                        color: '#7ac141'
                    }
                }]
            }, {
                name: 'Beany',
                value: 1,
                itemStyle: {
                    color: '#5e9a80'
                }
            }]
        }, {
            name: 'Other',
            itemStyle: {
                color: '#0aa3b5'
            },
            children: [{
                name: 'Papery/Musty',
                itemStyle: {
                    color: '#9db2b7'
                },
                children: [{
                    name: 'Stale',
                    value: 1,
                    itemStyle: {
                        color: '#8b8c90'
                    }
                }, {
                    name: 'Cardboard',
                    value: 1,
                    itemStyle: {
                        color: '#beb276'
                    }
                }, {
                    name: 'Papery',
                    value: 1,
                    itemStyle: {
                        color: '#fefef4'
                    }
                }, {
                    name: 'Woody',
                    value: 1,
                    itemStyle: {
                        color: '#744e03'
                    }
                }, {
                    name: 'Moldy/Damp',
                    value: 1,
                    itemStyle: {
                        color: '#a3a36f'
                    }
                }, {
                    name: 'Musty/Dusty',
                    value: 1,
                    itemStyle: {
                        color: '#c9b583'
                    }
                }, {
                    name: 'Musty/Earthy',
                    value: 1,
                    itemStyle: {
                        color: '#978847'
                    }
                }, {
                    name: 'Animalic',
                    value: 1,
                    itemStyle: {
                        color: '#9d977f'
                    }
                }, {
                    name: 'Meaty Brothy',
                    value: 1,
                    itemStyle: {
                        color: '#cc7b6a'
                    }
                }, {
                    name: 'Phenolic',
                    value: 1,
                    itemStyle: {
                        color: '#db646a'
                    }
                }]
            }, {
                name: 'Chemical',
                itemStyle: {
                    color: '#76c0cb'
                },
                children: [{
                    name: 'Bitter',
                    value: 1,
                    itemStyle: {
                        color: '#80a89d'
                    }
                }, {
                    name: 'Salty',
                    value: 1,
                    itemStyle: {
                        color: '#def2fd'
                    }
                }, {
                    name: 'Medicinal',
                    value: 1,
                    itemStyle: {
                        color: '#7a9bae'
                    }
                }, {
                    name: 'Petroleum',
                    value: 1,
                    itemStyle: {
                        color: '#039fb8'
                    }
                }, {
                    name: 'Skunky',
                    value: 1,
                    itemStyle: {
                        color: '#5e777b'
                    }
                }, {
                    name: 'Rubber',
                    value: 1,
                    itemStyle: {
                        color: '#120c0c'
                    }
                }]
            }]
        }, {
            name: 'Roasted',
            itemStyle: {
                color: '#c94930'
            },
            children: [{
                name: 'Pipe Tobacco',
                value: 1,
                itemStyle: {
                    color: '#caa465'
                }
            }, {
                name: 'Tobacco',
                value: 1,
                itemStyle: {
                    color: '#dfbd7e'
                }
            }, {
                name: 'Burnt',
                itemStyle: {
                    color: '#be8663'
                },
                children: [{
                    name: 'Acrid',
                    value: 1,
                    itemStyle: {
                        color: '#b9a449'
                    }
                }, {
                    name: 'Ashy',
                    value: 1,
                    itemStyle: {
                        color: '#899893'
                    }
                }, {
                    name: 'Smoky',
                    value: 1,
                    itemStyle: {
                        color: '#a1743b'
                    }
                }, {
                    name: 'Brown, Roast',
                    value: 1,
                    itemStyle: {
                        color: '#894810'
                    }
                }]
            }, {
                name: 'Cereal',
                itemStyle: {
                    color: '#ddaf61'
                },
                children: [{
                    name: 'Grain',
                    value: 1,
                    itemStyle: {
                        color: '#b7906f'
                    }
                }, {
                    name: 'Malt',
                    value: 1,
                    itemStyle: {
                        color: '#eb9d5f'
                    }
                }]
            }]
        }, {
            name: 'Spices',
            itemStyle: {
                color: '#ad213e'
            },
            children: [{
                name: 'Pungent',
                value: 1,
                itemStyle: {
                    color: '#794752'
                }
            }, {
                name: 'Pepper',
                value: 1,
                itemStyle: {
                    color: '#cc3d41'
                }
            }, {
                name: 'Brown Spice',
                itemStyle: {
                    color: '#b14d57'
                },
                children: [{
                    name: 'Anise',
                    value: 1,
                    itemStyle: {
                        color: '#c78936'
                    }
                }, {
                    name: 'Nutmeg',
                    value: 1,
                    itemStyle: {
                        color: '#8c292c'
                    }
                }, {
                    name: 'Cinnamon',
                    value: 1,
                    itemStyle: {
                        color: '#e5762e'
                    }
                }, {
                    name: 'Clove',
                    value: 1,
                    itemStyle: {
                        color: '#a16c5a'
                    }
                }]
            }]
        }, {
            name: 'Nutty/\nCocoa',
            itemStyle: {
                color: '#a87b64'
            },
            children: [{
                name: 'Nutty',
                itemStyle: {
                    color: '#c78869'
                },
                children: [ {
                    name: 'Peanuts',
                    value: 1,
                    itemStyle: {
                        color: '#d4ad12'
                    }
                }, {
                    name: 'Hazelnut',
                    value: 1,
                    itemStyle: {
                        color: '#9d5433'
                    }
                }, {
                    name: 'Almond',
                    value: 1,
                    itemStyle: {
                        color: '#c89f83'
                    }
                }]
            }, {
                name: 'Cocoa',
                itemStyle: {
                    color: '#bb764c'
                },
                children: [{
                    name: 'Chocolate',
                    value: 1,
                    itemStyle: {
                        color: '#692a19'
                    }
                }, {
                    name: 'Dark Chocolate',
                    value: 1,
                    itemStyle: {
                        color: '#470604'
                    }
                }]
            }]
        }, {
            name: 'Sweet',
            itemStyle: {
                color: '#e65832'
            },
            children: [{
                name: 'Brown Sugar',
                itemStyle: {
                    color: '#d45a59'
                },
                children: [{
                    name: 'Molasses',
                    value: 1,
                    itemStyle: {
                        color: '#310d0f'
                    }
                }, {
                    name: 'Maple Syrup',
                    value: 1,
                    itemStyle: {
                        color: '#ae341f'
                    }
                }, {
                    name: 'Caramelized',
                    value: 1,
                    itemStyle: {
                        color: '#d78823'
                    }
                }, {
                    name: 'Honey',
                    value: 1,
                    itemStyle: {
                        color: '#da5c1f'
                    }
                }]
            }, {
                name: 'Vanilla',
                value: 1,
                itemStyle: {
                    color: '#f89a80'
                }
            }, {
                name: 'Vanillin',
                value: 1,
                itemStyle: {
                    color: '#f37674'
                }
            }, {
                name: 'Overall Sweet',
                value: 1,
                itemStyle: {
                    color: '#e75b68'
                }
            }, {
                name: 'Sweet Aromatics',
                value: 1,
                itemStyle: {
                    color: '#d0545f'
                }
            }]
        }];

        option = {
            title: {
                text: 'WORLD COFFEE RESEARCH SENSORY LEXICON',
                subtext: 'Source: https://worldcoffeeresearch.org/work/sensory-lexicon/',
                textStyle: {
                    fontSize: 14,
                    align: 'center'
                },
                subtextStyle: {
                    align: 'center'
                },
                sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/'
            },
            series: {
                type: 'sunburst',
                highlightPolicy: 'ancestor',
                data: data,
                radius: [0, '95%'],
                sort: null,
                levels: [{}, {
                    r0: '15%',
                    r: '35%',
                    itemStyle: {
                        borderWidth: 2
                    },
                    label: {
                        rotate: 'tangential'
                    }
                }, {
                    r0: '35%',
                    r: '70%',
                    label: {
                        align: 'right'
                    }
                }, {
                    r0: '70%',
                    r: '72%',
                    label: {
                        position: 'outside',
                        padding: 3,
                        silent: false
                    },
                    itemStyle: {
                        borderWidth: 3
                    }
                }]
            }
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

总结：父类嵌套子类，一层层地包含下去。最后子类的数据总和就是父类所占比例的大小

程颖不是陈颍是沉吟
关注
专栏目录
Echarts——sunburt 旭日图
wang_NiFeng的博客
12-27 2066
将非结构化数据转换为结构化数据： sunburst是echartsv4.0新增的功能。 &lt;div id="demo" style="width: 100%;height: 800px;"&gt;&lt;/div&gt; var myChart = echarts.init(document.getElementById('demo')); var data = [{ ...
echarts 实例
qq_43343499的博客
10-29 1976
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
Echarts可视化大屏数据详解
2302_78041486的博客
09-04 1572
是一款由百度开发并开源的数据可视化图表库，旨在帮助开发者通过简单易用的方式实现复杂的数据展示和分析需求。，利用 HTML5 的 Canvas 技术进行图形渲染，这使得它能够在现代浏览器中高效地展示各种类型的图表。底层依赖矢量图形库（二维可视化库），提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 的起源可以追溯到2013年，最初由百度前端技术部推出。作为开源项目，它采用了，开发者可以根据需要引入和使用各种功能模块，例如不同类型的图表、主题定制、工具箱等。
echart旭日图_基于Echarts4.0实现旭日图
weixin_39912580的博客
12-21 340
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明:1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量2.针对移动端优化,移动端小屏上适于用手指在坐标系中进行缩放、平移。可选的 SVG 渲染模块让图表在移动端更加节省内存。3.增加多种渲染方案,可实现跨平台使用,现有三种方案,可渲染Canvas、SVG(4.0+)、VML 的形式渲染图...
【Python百日进阶-数据分析】Day137 - plotly旭日图:go.sunburst()实例
岳涛的博客
12-24 2273
文章目录4.2 带有 go.Sunburst 的基本旭日图4.2.1 基本go.sunburst()旭日图4.2.2 带有重复标签的旭日图4.2.3 分支值4.2.4 大量切片4.2.5 控制旭日形扇区内的文本方向4.2.6 使用 uniformtext 控制文本字体大小4.2.7 具有连续色标的旭日图4.2.8 Dash中的go.sunburst() 4.2 带有 go.Sunburst 的基本旭日图 如果Plotly Express 没有提供一个好的起点，也可以使用go.Sunburst（plotly.
echarts 旭日图sunburst
weixin_43294560的博客
10-25 6263
1、配置数据 第一层为最内层的环,第二层为第一层对应的children所构成的环 [ { value:n, 数值,根据同层所有数值的占比,构成百分比圆环,不写为内部第一层children的数值和 若设置的值大于内部第一层的数值,即表示有未显示的内容,具体表示图会压缩同层其他环占比 name:'显示内容', children:[ { value:n, name:'显示内容' } ] }, { va
Echarts-4.0.4-官方实例-所有2D图表
04-02
首先，我们来详细了解一下ECharts中的主要2D图表类型： 1. 折线图（Line Chart）：折线图用于展示数据随时间的变化趋势，适用于连续性的数值数据。ECharts 4.0.4中的折线图支持直线、曲线、堆叠、面积等多种展现...
echarts旭日图sunburst怎么设置点击只触发事件而不旋转展示具体的数据
09-13
在ECharts中，旭日图（sunburst）是一种特殊的扇形图，用于展示层级结构中的数据。当你点击旭日图的某一部分时，默认会触发旋转动画，展示或隐藏子节点数据。如果你希望在点击时只触发事件而不展示具体的数据（即不...
echarts旭日图sunburst怎么设置点击时只触发事件而不展示具体的数据，详细方法
最新发布
09-13
在使用ECharts创建旭日图（Sunburst）时，如果你希望点击某个节点时仅触发事件而不展示具体的数据，你可以通过设置事件监听器并适当地修改交互行为来实现。以下是一个基本的步骤指南： 1. 配置ECharts图表实例时，...
ECharts 配置语法
小汤圆
06-10 176
第一步：创建 HTML 页面 创建一个 HTML 页面，引入 echarts.min.js： 第二步: 为 ECharts 准备一个具备高宽的 DOM 容器 实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表: 第三步: 设置配置信息 ECharts 库使用 json 格式来配置。 echarts.init(document.getElementById(‘main’)).setOption(option); 这里 o
sunburst-chart：用于可视化层次结构数据的sunburst交互式图表Web组件
02-05
朝阳图 用于表示层次结构数据的交互式森伯斯特图，其中树的每个数据节点由多层环中的环形段表示。 单击圆弧可将视图聚焦在关联的子树上，从而可以逐步浏览数据。 单击图表中心将缩小一级，而单击画布会将缩放级别重置为根视图。 该图表还通过将每个节点的圆弧动画化到其新位置来响应数据更改。 默认情况下，圆弧区域与其数据值成线性比例，从而导致外层厚度以二次方的方式减小。 但是，可以使用radiusScaleExponent方法自定义。 为了提高性能，将小于给定阈值（ minSliceAngle ）的弧从DOM中排除，从而允许在保持平滑交互的同时表示大型数据集。 有关随机生成的大型数据结构，请参见。
Go-go-echarts是Golang版本的Echarts接口
08-13
简洁的 API 设计，使用如丝滑般流畅 囊括了 20 种常见图表，应有尽有 高度灵活的配置项，可轻松搭配出精美的图表 详细的文档和示例，帮助开发者更快的上手项目 多达 400 地图，为地理数据可视化提供强有力的支持
EnvoyCharts:特使IQ太阳系的小数据跟踪图表工具
04-01
特使图 特使IQ太阳系的小型数据跟踪/图表工具 大使图有两件事 在后台运行并每10分钟轮询一次特使，将数据放入数据库中 充当显示图表的Web服务器 仍在进行中 我才刚刚开始。 目前，它只支持一个图表（过去24小时）。 在我从自己的系统中收集到足够的数据之后，我还将努力添加7天和每月的图表。 设计决策（或优柔寡断） 10分钟的采样频率似乎足够好。 在初始测试期间，我每分钟都做一次，但是在此较高的频率下该图不再提供更多信息，因此我将坚持10分钟。 最终它将是可配置的。 go-echarts吐出Javascript Apache echarts（当时是较旧的版本）。 对于我们的目的而言，它看起来已经足够好了，并且操作起来非常简单。 ObjectBox数据库。 这些年来，我在sqlite方面做了大量工作。 没关系。 我只是想尝试其他事情。 ObjectBox对于这种事情似乎很酷，而且非常快
纯HTML5制作的震撼太阳系网页
11-11
纯HTML5制作的震撼太阳系网页
ECharts-旭日图（Sunburst）带时间轴
占星安啦的博客
07-07 7784
常见结构 var dom = document.getElementById(&amp;quot;container&amp;quot;); //定义echarts对象 var myChart = echarts.init(dom); //构建图表的参数 var option = { //定义标题 title: { text: '揽件汇总', textStyle: { ...
vue3.0-echarts@5.0 - 旭日图+bar图 实现 小太阳
ansheng02的博客
12-11 1511
echarts@5.0 通过旭日图+极坐标图 合成一个小太阳~
vue实现 【echarts中 “1种” Sunburst旭日图图例】的组件封装及调用
weixin_50450473的博客
02-16 2057
图例一： 一、安装echarts npm install echarts --save 二、在需要的页面引入 import * as echarts from "echarts" 三、创建组件 1、图例一：SunburstChart.vue <template> <div> <div class="bars_w" :id="id"></div> </div> </template..
152Echarts - 旭日图（Basic Sunburst）
阿甘兄
05-05 857
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值