Echarts餅圖代碼

時間 2021-08-15
標籤 javascript html java echarts dom ide orm htm 對象欄目 JavaScript 简体版
原文原文鏈接
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
            'echarts',  
            'echarts/chart/line', 
            'echarts/chart/pie',  
            'echarts/chart/bar' 
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 

                option = {
                    tooltip : {
                        show: true,
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data:['組織生活正常化','凝聚力','戰鬥力']
                    },
                    toolbox: {
                        show : true
                    },
                    calculable : true,
                    series : [
                    {
                        name:'訪問來源',
                        type:'pie',
                        startAngle: 90,
                        center : ['75%', 200],
                        radius : [80, 120],
                        itemStyle :　{
                            normal : {
                                label : {
                                    show : true
                                },
                                labelLine : {
                                    show : true
                                }
                            },
                            emphasis : {
                                color: (function (){
                                    var zrColor = require('zrender/tool/color');
                                    return zrColor.getRadialGradient(
                                        650, 200, 80, 650, 200, 120,
                                        [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
                                        )
                                })(),
                                label : {
                                    show : true,
                                    position : 'center',
                                    formatter : "{d}%",
                                    textStyle : {
                                        color : 'red',
                                        fontSize : '30',
                                        fontFamily : '微軟雅黑',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                        {value:335, name:'組織生活正常化',
                        itemStyle : {
                            normal : {
                                borderWidth: 4,
                                borderColor: '#ffffff',
                            }
                        }},
                        {
                            value:30,
                            name:'正常化未完成',
                            itemStyle : {
                                normal : {
                                    borderWidth: 0,
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                },
                                emphasis : {
                                    label : {
                                        show : true
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                }
                            }
                        },
                        {value:310, name:'凝聚力',
                        itemStyle : {
                            normal : {
                                borderWidth: 4,
                                borderColor: '#ffffff',
                            }
                        }},
                        {
                            value:50,
                            name:'凝聚力未完成',
                            itemStyle : {
                                normal : {
                                    borderWidth: 0,
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                },
                                emphasis : {
                                    label : {
                                        show : true
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                }
                            }
                        },
                        {value:234, name:'戰鬥力',
                        itemStyle : {
                            normal : {
                                borderWidth: 4,
                                borderColor: '#ffffff',
                            }
                        }},
                        {
                            value:40,
                            name:'戰鬥力未完成',
                            itemStyle : {
                                normal : {
                                    borderWidth: 0,
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                },
                                emphasis : {
                                    label : {
                                        show : true
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:'#2F4F4F'
                                }
                            }
                        }
                        ]
                    }
                    ]
                };

                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
            );
        </script>
    </body>
訪問效果以下：javascript