2018-12-13 echarts 圆环样式自定义

export default function drawCircle(circledata) {

    var option = {

// 鼠标移入的悬浮框的样式

        tooltip: {

            trigger: 'item',

    // 当前区域所占圆环的百分比

            formatter: "{d}%"

        },

//  图标样式

        legend: {

// vertical 为纵排列  horizontal 图例列表水平排向

            orient: 'vertical',  

// x： 70%  70  right  left 

            x: 'right',

// y: 70%  70  right  left

y: '70',

// 图例数据列表

            data:['1级','2级','3级','4级','5级'],

            borderRadius: [5,5,5,5],

// 图例的宽 ，高

            itemWidth:'10',

            itemHeight: '10',

        },

// 圆环的颜色

        color: ['#f4db31', '#ffc833', '#ff9933', '#ff6633', '#ff3333'],

        series: [

            {

                name:'告警等级',

                type:'pie',

// 内圆的半径 ，和外圆的半径

                radius: ['50%', '70%'],

                avoidLabelOverlap: false,

                label: {

                    normal: {

                        show: false,

                        position: 'center',

                        //  '{c|{c}}', c 类名 c 变量

// 动态数据

                        formatter:  [

// name, value 相当于类名，c  b 为数据

                            '{name|{c}}',

                            '{value|{b}}'

                        ].join('\n'),

// name value的具体样式

                        rich: {

                            name: {

                                fontSize: '32',

                                color:'#3A3D46',

                            },

                            value: {

                                fontSize: '12',

                                color:'#5c6781',

                            },

                        }

                    },

                    emphasis: {

                        show: true,

                        textStyle: {

                            fontSize: '30',

                            fontWeight: 'bold',

                        }

                    }

                },

                labelLine: {

                    normal: {

                        show: false

                    }

                },

// circledata 的数据类型 [{name: '1级'， value:250},{name: '2级'， value:250},{name: '3

级'， value:250}]

                data: circledata

            }

        ]

    };

    return option

}