美文网首页
2019-08-07 饼图样式修改

2019-08-07 饼图样式修改

作者: 柴东啊 | 来源:发表于2019-08-07 20:50 被阅读0次

    var data = [{

            value: 2800,

            name: '1'

        },

        {

            value: 335,

            name: '2'

        },

        {

            value: 315,

            name: '3'

        },

        {

            value: 2800,

            name: '4'

        },

        {

            value: 335,

            name: '5'

        },

        {

            value: 315,

            name: 6

        },

        {

            value: 2800,

            name: '7'

        },

        {

            value: 335,

            name: '8'

        },

        {

            value: 315,

            name: '9'

        },

        {

            value: 2800,

            name: '10'

        },

        {

            value: 335,

            name: '20'

        },

        {

            value: 3015,

            name: '30'

        },

        {

            value: 2800,

            name: '10'

        },

        {

            value: 335,

            name: '20'

        },

        {

            value: 315,

            name: '30'

        },

        {

            value: 2800,

            name: '10'

        },

        {

            value: 335,

            name: '20'

        },

        {

            value: 315,

            name: '30'

        },

        {

            value: 2800,

            name: '1'

        },

        {

            value: 335,

            name: '2'

        },

        {

            value: 315,

            name: '3'

        },

        {

            value: 2800,

            name: '1'

        },

        {

            value: 335,

            name: '2'

        },

        {

            value: 315,

            name: '3'

        }

    ];

    option = {

        backgroundColor: '#333',

        tooltip: {

            trigger: 'item',

            formatter: "{a} <br/>{b}: {c}",

            confine: true,

        },

        color: ['#ff9f7e', '#5f71d2', '#f36f8a', '#5fd27b', '#6173d6', '#47dfae',

            '#4ac7f5', '#f36f8a', '#42a4eb', '#426eeb', '#5f71d2', '#f36f8a'

        ],

        legend: { //图例组件,颜色和名字

            left: 'center',

            bottom: '6%',

            itemGap: 6, //图例每项之间的间隔

            itemWidth: 9,

            itemHeight: 9,

            icon: 'circle',

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

                '6', '7', '8', '9',

                '10', '11'

            ],

            textStyle: {

                color: [],

                fontStyle: 'normal',

                fontFamily: '微软雅黑',

                fontSize: 10,

            }

        },

        series: [{

            name: '违规次数',

            type: 'pie',

            clockwise: false, //饼图的扇区是否是顺时针排布

            minAngle: 20, //最小的扇区角度(0 ~ 360)

            center: ['50%', '45%'], //饼图的中心(圆心)坐标

            radius: ['40%', '80%'], //饼图的半径

            avoidLabelOverlap: true, ////是否启用防止标签重叠

            itemStyle: { //图形样式

                normal: {

                    borderColor: '#1e2239',

                    borderWidth: 1.5,

                },

            },

            label: { //标签的位置

                normal: {

                    show: true,

                    position: 'inside', //标签的位置

                    formatter: "水电费说{d}%",

                    textStyle: {

                        color: '#fff',

                    }

                },

                emphasis: {

                    show: true,

                    textStyle: {

                        fontWeight: 'bold'

                    }

                }

            },

            data: data

        }, {

            name: '',

            type: 'pie',

            clockwise: false,

            silent: true,

            minAngle: 20, //最小的扇区角度(0 ~ 360)

            center: ['50%', '45%'], //饼图的中心(圆心)坐标

            radius: [0, '38%'], //饼图的半径

            itemStyle: { //图形样式

                normal: {

                    borderColor: '#1e2239',

                    borderWidth: 1.5,

                    opacity: 0,

                }

            },

            label: { //标签的位置

                normal: {

                    show: false,

                }

            },

            data: data

        }]

    };

    相关文章

      网友评论

          本文标题:2019-08-07 饼图样式修改

          本文链接:https://www.haomeiwen.com/subject/yszadctx.html