ECharts绘制玫瑰图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 700px; height: 700px;background-color: aquamarine;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            title: {
                backgroundColor:'#B5A642',
                text: '二级学院分布',
                textStyle:{
                    color:'#9932CD',
                    fontFamily:'黑体',
                    fontSize:28,
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient:'vertical',
                x:32,
                y:74,
                data: ['计算机','大数据','外国语','机器人','建工','机电','艺术','财经']
            },
            toolbox:{
                show:true,
                left:444,
                top:22,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{
                        show:true,
                        type:['pie','funnel'],
                        option:{
                            funnel:{
                                x:'25%',
                                width:'50%',
                                funnelAlign:'left',
                                max:1548
                            }
                        }
                    },
                    restore:{show:true},
                    saveAsImage:{show:true}
                }
            },
            calculable:true,
            series: [
                {
                    name: '学生人数',
                    type: 'pie',
                    radius: ['10%', '50%'],
                    center: ['60%', 180],
                    roseType: 'radius',
                    width: '50%',
                    max: 40,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        },
                        emphasis: {
                            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:['60%',180],
                    roseType:'area',
                    x:'50%',
                    max:40,
                    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:['60%',420],
                    roseType:'area',
                    x:'50%',
                    max:40,
                    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:'财经'},
                    ]
                },
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>
猜你喜欢
