web数据可视化(Echarts版)2-16南丁格尔玫瑰图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:43:13 修改

阅读量740

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-17 23:03:31 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130736913

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height: 800px"></div>
    <script type="text/javascript">
        var mychat = echarts.init(document.getElementById("main"));
        var option ={
            title:{
                x:'center',
                text:'二级学院分布-南丁格尔玫瑰图',
                textStyle:{
                    color:'#9932CD',
                    fontFamily:'黑体',
                    fontSize:18
                }
            },
            tooltip:{
                trigger:'item',
                formatter:"{a} <br/>{b} : {c} ({d}%)"
            },
            legend:{
                x:'center',
                y:'bottom',
                data:['计算机','大数据','外国语','机器人','建工','机电','艺术','财经']
            },
            toolbox:{
                show:true,
                x:800,
                y:18,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{
                        show:true,
                        type:['pie','funnel']
                    },
                    restore:{show:true},
                    saveAsImage:{show:true}
                }
            },
            series:[
                {
                    name:'学生人数',
                    type:'pie',
                    radius:['10%','50%'],
                    center:['50%',180],
                    width:'50%',
                    itemStyle:{
                        normal:{
                            label:{
                                show:false
                            },
                            labelLine:{
                                show:false
                            }
                        },
                        wmphasis:{
                            label:{
                                show:true
                            },
                            labelLine:{
                                show:true
                            }
                        }
                    },
                    data:[
                        {value:2000,name:'计算机'},
                        {value:1500,name:'大数据'},
                        {value:1200,name:'外国语'},
                        {value:1100,name:'机器人'},
                        {value:1000,name:'建工'},
                        {value:900,name:'机电'},
                        {value:800,name:'艺术'},
                        {value:700,name:'财经'}
                    ]
                },
                {
                    name:'学生人数(面积模式)',
                    type:'pie',
                    radius:['10%','50%'],
                    center:['50%',180],
                    reseType:'area',
                    x:'50%',
                    sort:'ascending',
                    data:[
                        {value:2000,name:'计算机'},
                        {value:1500,name:'大数据'},
                        {value:1200,name:'外国语'},
                        {value:1100,name:'机器人'},
                        {value:1000,name:'建工'},
                        {value:900,name:'机电'},
                        {value:800,name:'艺术'},
                        {value:700,name:'财经'}
                    ]
                },
                {
                    name:'教授人数(面积模式)',
                    type:'pie',
                    radius:['10%','50%'],
                    center:['0%',420],
                    resoType:'area',
                    x:'50%',
                    sort:'ascending',
                    data:[
                        {value:25,name:'计算机'},
                        {value:15,name:'大数据'},
                        {value:12,name:'外国语'},
                        {value:10,name:'机器人'},
                        {value:8,name:'建工'},
                        {value:7,name:'机电'},
                        {value:6,name:'艺术'},
                        {value:4,name:'财经'}
                    ]
                },
            ]
        };
        mychat.setOption(option);
    </script>
</body>
</html>