Echarts——一个简单的嵌套饼图

时间：2017-12-26 19:59:10 阅读：1085 评论：0 收藏：0 [点我收藏+]

标签：sof 分布图 sel rip select tle gpo font 效果

</!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQ部
    星座分布图</title>
    <script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:800px;height:800px"></div>
    
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(‘main‘));
        var option = {
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            series: [
                {
                    name:‘星座‘,
                    type:‘pie‘,
                    selectedMode: ‘single‘,
                    radius: [‘75%‘, ‘96%‘],

                    label: {
                        normal: {
                            position: ‘inside‘,
                            fontSize: 20,
                            color:‘‘,
                            fontFamily:‘Microsoft Yahei‘
                        }
                    },
                    data:[
                        {value:4, name:‘双子座‘},
                        {value:3, name:‘白羊座‘},
                        {value:3, name:‘金牛座‘},
                        {value:2, name:‘天蝎座‘},
                        {value:2, name:‘双鱼座‘},
                        {value:2, name:‘处女座‘},
                        {value:2, name:‘射手座‘},
                        {value:1, name:‘摩羯座‘},
                        {value:1, name:‘天秤座‘},
                        {value:1, name:‘水瓶座‘},
                        {value:1, name:‘狮子座‘}
                    ]
                },
                {
                    name:‘姓名‘,
                    type:‘pie‘,
                    radius: [‘30%‘, ‘70%‘],
                    label: {
                        normal: {
                            position:‘inside‘,
                            align:‘right‘,
                            fontSize: 18,
                            fontFamily:‘Microsoft YaHei‘,
                            color:"#FFEFE0"
                        }
                    },
                    data:[
                        {value:1, name:‘X1‘},
                        {value:1, name:‘X2‘},
                        {value:1, name:‘X3‘},
                        {value:1, name:‘X4‘},
                        {value:1, name:‘M1‘},
                        {value:1, name:‘M2‘},
                        {value:1, name:‘M3‘},
                        {value:1, name:‘N1‘},
                        {value:1, name:‘N2‘},
                        {value:1, name:‘N3‘},
                        {value:1, name:‘D1‘},
                        {value:1, name:‘D2‘},
                        {value:1, name:‘D3‘},
                        {value:1, name:‘F1‘},
                        {value:1, name:‘F2‘},
                        {value:1, name:‘F3‘},
                        {value:1, name:‘G1‘},
                        {value:1, name:‘A1‘},
                        {value:1, name:‘W1‘},
                        {value:1, name:‘E1‘},
                        {value:1, name:‘E2‘},
                        {value:1, name:‘E3‘}
                    ]
                },
                {
                    name:‘部门‘,
                    type:‘pie‘,
                    radius: [‘0%‘, ‘25%‘],
                    label: {
                        normal: {
                            position: ‘center‘,
                            fontSize: 22,
                            fontFamily:‘Microsoft YaHei‘,
                            color:‘#80F0E3‘
                        }
                    },
                    data:[
                        {value:22, name:‘QQ部‘}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

显示效果如下：

技术分享图片

解释：

设置网页标题：
1. <title>QQ部星座分布图</title>
导入在线的echarts库：
1. <script src="http://echarts.baidu.com/dist/echarts.js"></script>
设置页面尺寸：
1. <div id="main" style="width:800px;height:800px"></div>
初始化echarts实例：
1. var myChart = echarts.init(document.getElementById(‘main‘));
设置图表内容：
1. var option = {}
在echarts实例中载入option：
1. myChart.setOption(option);
对option的解释
1. 包含了一个tooltip——用于动态显示数据标签，和三个series，series的类型为“pie”饼图。
2. tooltip的显示格式为：formatter: "{a} <br/>{b}: {c} ({d}%)"，即显示数字和百分比。
3. radius用于设置饼图的内外范围，如：radius: [‘75%‘, ‘96%‘]。
4. 接下来设置标签的文本格式和数据内容即可。

Echarts——一个简单的嵌套饼图

标签：sof 分布图 sel rip select tle gpo font 效果

原文地址：https://www.cnblogs.com/shadrach/p/8119483.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行