多餅圖應用

 

 

 

function chartTopPie() {
    var myChart = echarts.init(document.getElementById('char-top-pie'));

    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: "rgba(0,0,0,0)",
            borderWidth: 0
        },
        emphasis: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0
        }
    };

    var dataStyle = {
        normal: {
            formatter: '{c}%',
            position: 'center',
            show: true,
            textStyle: {
                fontSize: '28',
                fontWeight: 'normal',
                color: '#fff'
            }
        }
    };
    var option = {
        title: [
            {
                text: '年度合同總收入',
                left: '30%',
                bottom: '5%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '16',
                    color: '#fff',
                    textAlign: 'center'
                },
                subtext: '45206元',
                subtextStyle: {
                    fontWeight: 'normal',
                    fontSize: '14',
                    color: '#fff',
                    textAlign: 'center'
                }
            },
            {
                text: '年度營業總收入',
                left: '75%',
                bottom: '5%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: '16',
                    textAlign: 'center'
                },
                subtext: '85101元',
                subtextStyle: {
                    fontWeight: 'normal',
                    fontSize: '14',
                    color: '#fff',
                    textAlign: 'center'
                }
            }
        ],
        series: [
            {
                type: 'pie',
                hoverAnimation: false, //鼠標經過的特效
                radius: [
                    '35%',
                    '47%'
                ],
                center: [
                    '30%',
                    '40%'
                ],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: 46.5,
                        itemStyle: {
                            normal: {
                                color: '#00BAFF'
                            }
                        },
                        label: dataStyle
                    },
                    {
                        value: 53.5,
                        itemStyle: placeHolderStyle
                    }

                ]
            },
            {
                type: 'pie',
                hoverAnimation: false,
                radius: [
                    '36%',
                    '47%'
                ],
                center: [
                    '75%',
                    '40%'
                ],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: 10.5,
                        itemStyle: {
                            normal: {
                                color: '#7446ED'
                            }
                        },
                        label: dataStyle
                    },
                    {
                        value: 89.5,
                        itemStyle: placeHolderStyle
                    }

                ]
            },
            //外圈的邊框
            //外圈的邊框
            {
                // name: '總人數',
                type: 'pie',
                hoverAnimation: false, //鼠標經過的特效
                radius: [
                    '45%',
                    '48%'
                ],
                center: [
                    '30%',
                    '40%'
                ],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: '#00BAFF'
                            }
                        }
                    }


                ]
            },
            {
                type: 'pie',
                hoverAnimation: false,
                radius: [
                    '45%',
                    '48%'
                ],
                center: [
                    '75%',
                    '40%'
                ],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: '#7446ED'
                            }
                        }
                    }
                ]
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", () => {
        myChart.resize();
    });

}

function chartTopPie() {
    var myChart = echarts.init(document.getElementById('char-top-pie'));
    var data = [
        {
            'name': '營業總收入',
            'value': 5600
        },
        {
            'name': '營業總成本',
            'value': 3600
        },
        {
            'name': '營業總利潤',
            'value': 1500
        }
    ]
    var seriesObjs = [];
    var r = 60;
    var color = [
        '#0B7EF2',
        '#08B3FF',
        '#6DE0CF'
    ];
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0.1)',
            borderWidth: 5

        }
    }
    for (var i = 0; i < data.length; i++) {
        var seriesObj = {
            name: data[i].name,
            type: 'pie',
            clockWise: false,
            radius: [
                r - 1 - i * 20,
                r - i * 20
            ],
            center: [
                '20%',
                '40%'
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                    borderColor: color[i]
                }
            },
            hoverAnimation: false,
            data: [
                {
                    value: data[i].value
                },
                {
                    value: data[0].value * 4 / 3 - data[i].value,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        }
        seriesObjs.push(seriesObj)
    }
    var option = {
        color: color,
        title: [
            {
                text: '年度',
                left: '15%',
                bottom: '2%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '16',
                    color: '#fff',
                    textAlign: 'center'
                }
            }

        ],
        tooltip: {
            show: false,
            formatter: '{a} : {c}'
        },
        legend: {
            show: true,
            top: "22%",
            right: '5%',
            width: 200,
            data: [
                '營業總收入',
                '營業總成本',
                '營業總利潤'
            ],
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 15,
            formatter: function (name) {
                return name + '  ' + data.find(function (e) {
                    if (e.name === name) return e
                }).value + '萬元'
            },
            textStyle: {
                fontSize: 15,
                color: "#ffffff"
            }
        },

        series: seriesObjs
    }
    myChart.setOption(option)
    window.addEventListener("resize", () => {
        myChart.resize();
    });
}

function chartDashboard2() {
    var myChart = echarts.init(document.getElementById('char-dashboard2'));

    var option = {
        title: [{
            text: '公司年度計劃',
            bottom: 100,
            left: '35%',
            padding: [-30, 0],
            textStyle: {
                color: '#fff',
                fontSize: 14,
                align: 'center'
            }
        }
        ],
        "toolbox": {
            "show": false,
            "feature": {
                "mark": {
                    "show": true
                },
                "restore": {
                    "show": true
                },
                "saveAsImage": {
                    "show": true
                }
            }
        },
        "series": [{
            "name": "指標",
            "type": "gauge",
            "startAngle": 180, //總的360，設置180就是半圓
            "endAngle": 0,
            min: 0,
            max: 100,
            "center": ["50%", "70%"], //整體的位置設置
            "radius": 100,
            "axisLine": {
                "lineStyle": {
                    "width": 30, //柱子的寬度
                    "color": [[0.558, "#E85252"], [1, "rgba(0,0,0,0.3)"]] //0.298是百分比的比例值（小數），還有對應兩個顏色值
                }
            },
            "axisTick": {
                "show": false
            },
            axisLabel: {
                color: '#ffffff',
                show: true,
                padding: [30, 0, 0, 0],
                fontSize: 12,
                distance: -35,
                formatter(value) {
                    if (value === 0 || value === 100) {
                        return value + '.00%';
                    }
                }
            },
            "splitLine": {
                "show": false
            },
            "pointer": {
                "show": false,
            },
            "title": {
                "show": true,
                "offsetCenter": [0, "-35%"], //標題位置設置
                "textStyle": { //標題樣式設置
                    "color": "#ffffff",
                    "fontSize": 18,
                    "fontFamily": "微軟雅黑",
                    "fontWeight": "bold"
                },

            },
            "detail": {
                "show": false
            },

            "data": [{ //顯示數據
                "value": 55.8,
                "name": "8,524萬元"
            }]
        }]
    };
    myChart.setOption(option)
    window.addEventListener("resize", () => {
        myChart.resize();
    })
}