echarts太阳分布图-饼图来回穿梭

js部分

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

option = null;

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: '73%',

            label: {

                position: 'outside',

                padding: 3,

                silent: false

            },

            itemStyle: {

                borderWidth: 3

            }

        }]

    }

};

;

if (option && typeof option === "object") {

    myChart.setOption(option, true);

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

带字幕的Youtube

现在有人就制作了一个网站YouTube Subtitle Editor,专门为Youtube加字幕。你可以先看一段动画片《蜘蛛人》的主题歌,体验一下效果。

50020
来自专栏凌帅的阅读思考与实践

【投资中的那些坑】开栏语

很多人在投资中喜欢财聚人聚,财散人散,总往有钱的地方钻营。就象游牧民族,哪里水草肥美,就到哪里去。一旦情况不好,就会迅速退场。只能同甘,不能共苦。

14630
来自专栏跟着阿笨一起玩NET

ASP.NET web.config中<customErrors>节点说明

customErrors>节点用于定义一些自定义错误信息的信息。此节点有Mode和defaultRedirect两个属性,其中defaultRedirect属性...

8310
来自专栏老九学堂

揭秘!程序员为什么会一直加班加班...

15120
来自专栏阮一峰的网络日志

排版六原则

几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。

12220
来自专栏跟着阿笨一起玩NET

js的alert和confirm美化

window对象的alert和confirm标准方法在不同浏览器的显示效果不太相同,有个相同点是都不是很美观。我们的想法是使用js和css分别仿照它们,提供另一...

31120
来自专栏服务端技术杂谈

去解决更多的问题,而不是如何最好地解决一个问题

有些人非常勤奋,别人休息和娱乐的时候,都在工作学习。但是努力了一辈子,人生也没有显著的提升,就像报道里经常说的:"某某在平凡的岗位上,勤勤恳恳工作了一辈子"。

13640
来自专栏阮一峰的网络日志

约翰·霍普金斯医学院的声明

14420
来自专栏前端侠2.0

td在relative模式下,IE9不显示border,chrome正常显示边框

百度上怎么也搜不出答案,很奇怪的问题。在IE9的 F12调试中,明明td有1个像素的边框,偏偏不显示。

15310
来自专栏大数据文摘

业界 | 如何像程序员一样思考

即使你的运气一向很好,这种方法也并不值得使用。事实上,它可能是最糟糕的解决方法,因为会浪费大量的时间。

10910

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励