饼状图

饼状图

HTML 

<div  id="chart6"  style="height: 32%";></div>
                <div  id="chart7"  style="height: 32%";></div>
                <div  id="chart8"  style="height: 32%";></div>

JS

 

init : function() {
            if (this.hasInit) // 是否已初始化
                return false;
            this.hasInit = true;
            var me = this;
            if($("div.data-column").length>0){
                me.initLayoutSize();
            }
            me.initChart6();
            me.initChart7();
            me.initChart8();
        },


initChart6:function () {
            var option = {
                color: ["#FF00FF",//控制饼状图的颜色
                    "#FFAD05",
                    "#FE5656",
                    "#01E17E",
                    "#3DD1F9",
                    "#8715F9"],
                // title: {
                //     text: '网络/安全设备',
                //     left: '60',
                //     top: 0,
                //     textAlign: 'center',
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: 14,
                //         fontWeight: 0
                //     }
                // },
                grid: {
                    left: -100,
                    top: 50,
                    bottom: 20,
                    right: 10,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },
                legend: {//控制标签
                    type: "scroll",
                    orient: "vartical",
                    // x: "right",
                    top: "left",
                    right: "1",
                    // bottom: "0%",
                    itemWidth: 16,
                    itemHeight: 8,
                    itemGap: 16,
                    textStyle: {
                        color: '#A3E2F4',
                        fontSize: 12,
                        fontWeight: 0
                    },
                    data: ['涂料制造', '铝冶炼', '包装装潢和其他印刷', '再生橡胶制造', '燃料制造','其他']
                },
                polar: {},
                angleAxis: {
                    interval: 1,
                    type: 'category',
                    data: [],
                    z: 10,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0B4A6B",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        color: "#0B4A6B",
                        margin: 8,
                        fontSize: 16
                    },
                },
                radiusAxis: {
                    min: 40,
                    max: 120,
                    interval: 20,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0B3E5E",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        show: false,
                        padding: [0, 0, 20, 0],
                        color: "#0B3E5E",
                        fontSize: 16
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#0B3E5E",
                            width: 2,
                            type: "solid"
                        }
                    }
                },
                calculable: true,
                series: [{
                    type: 'pie',
                    radius: ["5%", "10%"],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B4A6B"
                            }
                        }
                    }]
                }, {
                    type: 'pie',
                    radius: ["90%", "95%"],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    name: "",
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B4A6B"
                            }
                        }
                    }]
                },{
                    stack: 'a',
                    type: 'pie',
                    radius: ['20%', '80%'],
                    roseType: 'area',
                    zlevel:10,
                    label: {
                        normal: {
                            show: true,
                            formatter: "{c}",
                            textStyle: {
                                fontSize: 12,
                            },
                            position: 'inside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        value: 10,
                        name: '涂料制造'
                    },
                        {
                            value: 5,
                            name: '铝冶炼'
                        },
                        {
                            value: 15,
                            name: '包装装潢和其他印刷'
                        },
                        {
                            value: 25,
                            name: '再生橡胶制造'
                        },
                        {
                            value: 20,
                            name: '燃料制造'
                        },
                        {
                            value: 20,
                            name: '其他'
                        },
                    ]
                }, ]
            };
            var	chart6= echarts.init(document.getElementById('chart6'));
            chart6.setOption(option);
        },
        initChart7:function () {
            option = {
                color: ["#FF00FF",
                    "#FFAD05",
                    "#FE5656",
                    "#01E17E",
                    "#3DD1F9",
                    "#8715F9"],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    textStyle: {
                        color: '#A3E2F4',
                        fontSize: 12,
                        fontWeight: 0
                    },
                    data: ['涂料制造', '铝冶炼', '包装装潢和其他印刷', '再生橡胶制造', '燃料制造','其他']
                },
                series: [
                    {
                        name: 'VOC排放值',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: 10,
                            name: '涂料制造'
                        },
                            {
                                value: 5,
                                name: '铝冶炼'
                            },
                            {
                                value: 15,
                                name: '包装装潢和其他印刷'
                            },
                            {
                                value: 25,
                                name: '再生橡胶制造'
                            },
                            {
                                value: 20,
                                name: '燃料制造'
                            },
                            {
                                value: 20,
                                name: '其他'
                            },
                        ]
                    }
                ]
            };
            var	chart7= echarts.init(document.getElementById('chart7'));
            chart7.setOption(option);
        },
        initChart8:function () {
            option = {
                color: ["#FF00FF",
                    "#FFAD05",
                    "#FE5656",
                    "#01E17E",
                    "#3DD1F9",
                    "#8715F9"],
                // title: {
                //     text: '某站点用户访问来源',
                //     subtext: '纯属虚构',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        color: '#A3E2F4',
                        fontSize: 12,
                        fontWeight: 0
                    },
                    data: ['涂料制造', '铝冶炼', '包装装潢和其他印刷', '再生橡胶制造', '燃料制造','其他']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: 10,
                            name: '涂料制造'
                        },
                            {
                                value: 5,
                                name: '铝冶炼'
                            },
                            {
                                value: 15,
                                name: '包装装潢和其他印刷'
                            },
                            {
                                value: 25,
                                name: '再生橡胶制造'
                            },
                            {
                                value: 20,
                                name: '燃料制造'
                            },
                            {
                                value: 20,
                                name: '其他'
                            },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var	chart8= echarts.init(document.getElementById('chart8'));
            chart8.setOption(option);
        },