多个饼状图 - 编程之家

<!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="width: 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',width: 350,//图行例组件的宽度,默认自适应
                    x: 'right',//图例显示在右边  设置数字就是离左边多远
                    top: 20,//图例在垂直方向上面显示居中
                    itemWidth: 10,//图例标记的图形宽度
                    itemHeight: 10,//图例标记的图形高度
                    itemGap: 15,},series: [
                    /*1*/
                    {
                        name: '高血压患病率',type: 'pie',center: ['20%','50%'],//第一个代表内圆半径，第二个代表外圆半径
                         radius: ['40%',data: [{
                                value: 28,name: '有病'
                            },{
                                value: 72,name: '没病'
                            }
                        ],itemStyle: { //图形样式
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: { //饼图图形上的文本标签
                                    show: false //平常不显示
                                },// 2
                    {
                        name: '高血糖患病率',radius: '18%',center: ['45%',radius: ['40%',data: [{
                                value: 18,name: '有'
                            },{
                                value: 82,name: '没'
                            }
                        ],// 3
                    {
                        name: '高血脂4患病率',center: ['70%',data: [{
                                value: 12,name: '患病'
                            },{
                                value: 88,}
                    },]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    </script>
</body>

</html>