zoukankan html css js c++ java

多个饼状图

<!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="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <div id="main6" style=" 1200px;height: 400px; background-color: #ccc;"></div>
    <script>
            var myChart = echarts.init(document.getElementById('main6'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'right',
                    orient: 'horizontal',
                     350, //图行例组件的宽度,默认自适应
                    x: 'right', //图例显示在右边  设置数字就是离左边多远
                    top: 20, //图例在垂直方向上面显示居中
                    itemWidth: 10, //图例标记的图形宽度
                    itemHeight: 10, //图例标记的图形高度
                    itemGap: 15,
                },

                
                series: [
                    /*1*/
                    {
                        name: '高血压患病率',
                        type: 'pie',
                         center: ['20%', '50%'],
                         //第一个代表内圆半径，第二个代表外圆半径
                         radius: ['40%', '50%'],
                       
                        data: [{
                                value: 28,
                                name: '有病'
                            },
                            {
                                value: 72,
                                name: '没病'
                            }
                        ],
                        itemStyle: { //图形样式
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: { //饼图图形上的文本标签
                                    show: false //平常不显示
                                },
                            },
                        },
                    },
                    
                    // 2
                    {
                        name: '高血糖患病率',
                        type: 'pie',
                        radius: '18%',
                       	center: ['45%', '50%'],

                          radius: ['40%', '50%'],
                        data: [{
                                value: 18,
                                name: '有'
                            },
                            {
                                value: 82,
                                name: '没'
                            }
                        ],
                        itemStyle: { //图形样式
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: { //饼图图形上的文本标签
                                    show: false //平常不显示
                                },
                            },
                        },
                    },
                    

                    // 3
                    {
                        name: '高血脂4患病率',
                        type: 'pie',
                         radius: ['40%', '50%'],
                       	center: ['70%', '50%'],
                        data: [{
                                value: 12,
                                name: '患病'
                            },
                            {
                                value: 88,
                                name: '没病'
                            }
                        ],
                        itemStyle: { //图形样式
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: { //饼图图形上的文本标签
                                    show: false //平常不显示
                                },
                            },
                        }
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    </script>
</body>

</html>

作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。

查看全文

相关阅读:
map函数
 修改文件夹所有者权限
 [Python]Python基础趣讲精练
 jmeter生成随机字符串
 Jmeter生成8位不重复的随机数
 Jmeter接口测试使用总结
 Jmeter模拟多个号码注册
 Jmeter实现多用户注册登录
 jmeter 生成随机数（手机号）&随机中文字符
 python接口自动化如何封装获取常量的类

原文地址：https://www.cnblogs.com/IwishIcould/p/15164638.html