Echarts 南丁格尔玫瑰图

旧城等待， 2022-05-29 07:55 361阅读 0赞

![0bc3081ee851d39a3a07f0c19b02790d.png][]

> <!DOCTYPE html>
> 
> <html style="height: 100%">
> 
> <head>
> 
>   <meta charset="utf-8">
> 
> </head>
> 
> <body style="height: 100%; margin: 0">
> 
>   <div id="container" style="height: 100%"></div>
> 
>   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
> 
>   <script type="text/javascript">
> 
>     var dom = document.getElementById("container");
> 
>     var myChart = echarts.init(dom);
> 
>     var app = \{\};
> 
>     option = null;
> 
>     option = \{
> 
>       title: \{
> 
>         text: '南丁格尔玫瑰图',
> 
>         subtext: '南丁格尔玫瑰图',
> 
>         x: 'center'
> 
>       \},
> 
>       tooltip: \{
> 
>         trigger: 'item',
> 
>         formatter: "\{a\} <br/>\{b\} : \{c\} (\{d\}%)"
> 
>       \},
> 
>       legend: \{
> 
>         x: 'center',
> 
>         y: 'bottom',
> 
>         data: \['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'\]
> 
>       \},
> 
>       toolbox: \{
> 
>         show: true,
> 
>         feature: \{
> 
>           mark: \{
> 
>             show: true
> 
>           \},
> 
>           dataView: \{
> 
>             show: true,
> 
>             readOnly: false
> 
>           \},
> 
>           magicType: \{
> 
>             show: true,
> 
>             type: \['pie', 'funnel'\]
> 
>           \},
> 
>           restore: \{
> 
>             show: true
> 
>           \},
> 
>           saveAsImage: \{
> 
>             show: true
> 
>           \}
> 
>         \}
> 
>       \},
> 
>       calculable: true,
> 
>       series: \[\{
> 
>         stack: 'a',
> 
>         type: 'pie',
> 
>         radius: \[60, 300\],
> 
>         roseType: 'area',
> 
>         labelLine: \{
> 
>           normal: \{
> 
>             lineStyle: \{
> 
>               width: 5
> 
>             \},
> 
>             length: 110
> 
>           \}
> 
>  
> 
>         \},
> 
>         data: \[\{
> 
>           value: 10,
> 
>           name: 'rose1'
> 
>         \},
> 
>         \{
> 
>           value: 5,
> 
>           name: 'rose2'
> 
>         \},
> 
>         \{
> 
>           value: 15,
> 
>           name: 'rose3'
> 
>         \},
> 
>         \{
> 
>           value: 25,
> 
>           name: 'rose4'
> 
>         \},
> 
>         \{
> 
>           value: 20,
> 
>           name: 'rose5'
> 
>         \},
> 
>         \{
> 
>           value: 35,
> 
>           name: 'rose6'
> 
>         \},
> 
>         \{
> 
>           value: 30,
> 
>           name: 'rose7'
> 
>         \},
> 
>         \{
> 
>           value: 40,
> 
>           name: 'rose8'
> 
>         \}
> 
>         \]
> 
>       \}, \{
> 
>         stack: 'a',
> 
>         type: 'pie',
> 
>         radius: \[60, 250\],
> 
>         roseType: 'area',
> 
>         labelLine: \{
> 
>           normal: \{
> 
>             lineStyle: \{
> 
>               width: 5
> 
>             \},
> 
>             length: 100
> 
>           \}
> 
>         \},
> 
>         data: \[\{
> 
>           value: 70,
> 
>           name: 'rose10'
> 
>         \},
> 
>         \{
> 
>           value: 80,
> 
>           name: 'rose20'
> 
>         \},
> 
>         \{
> 
>           value: 90,
> 
>           name: 'rose30'
> 
>         \},
> 
>         \{
> 
>           value: 100,
> 
>           name: 'rose40'
> 
>         \},
> 
>         \{
> 
>           value: 110,
> 
>           name: 'rose50'
> 
>         \},
> 
>         \{
> 
>           value: 120,
> 
>           name: 'rose60'
> 
>         \},
> 
>         \{
> 
>           value: 130,
> 
>           name: 'rose70'
> 
>         \},
> 
>         \{
> 
>           value: 140,
> 
>           name: 'rose80'
> 
>         \}
> 
>         \]
> 
>       \}, \{
> 
>         stack: 'a',
> 
>         type: 'pie',
> 
>         radius: \[60, 250\],
> 
>         roseType: 'area',
> 
>         labelLine: \{
> 
>           normal: \{
> 
>             lineStyle: \{
> 
>               width: 5
> 
>             \},
> 
>             length: 120
> 
>           \}
> 
>         \},
> 
>         data: \[\{
> 
>           value: 100,
> 
>           name: 'rose11'
> 
>         \},
> 
>         \{
> 
>           value: 155,
> 
>           name: 'rose21'
> 
>         \},
> 
>         \{
> 
>           value: 715,
> 
>           name: 'rose31'
> 
>         \},
> 
>         \{
> 
>           value: 265,
> 
>           name: 'rose41'
> 
>         \},
> 
>         \{
> 
>           value: 440,
> 
>           name: 'rose51'
> 
>         \},
> 
>         \{
> 
>           value: 335,
> 
>           name: 'rose61'
> 
>         \},
> 
>         \{
> 
>           value: 560,
> 
>           name: 'rose71'
> 
>         \},
> 
>         \{
> 
>           value: 460,
> 
>           name: 'rose81'
> 
>         \}
> 
>         \]
> 
>       \}\]
> 
>     \};;
> 
>     if (option && typeof option === "object") \{
> 
>       myChart.setOption(option, true);
> 
>     \}
> 
>   </script>
> 
> </body>
> 
>  
> 
> </html>

[0bc3081ee851d39a3a07f0c19b02790d.png]: /images/20220529/8f9806a3416c40d9944d156845556e86.png