两种饼状水位图展示

最新推荐文章于 2024-05-30 09:55:08 发布

沐游虞

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量272

点赞数

分类专栏：个人记录文章标签：前端 html echarts

本文链接：https://blog.csdn.net/qq_42795259/article/details/121384164

版权

个人记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一种，如下

option = {
        backgroundColor:"#fff",
        color:['#38a8da','#d4effa'],
        title: {
            text: "使用",
             x: 'center',
            top:'3%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 16,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['30%', '45%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: "14",
                        fontWeight: 'bold'
                    },
                   // formatter:'{b}\n占比 {c} %'
                   formatter:'{c}\n占比 100 %'
                }
            },
            data: [{
                    value: 50,
                    name:"及格率",
                    color:"red",
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-20,
                    name: ''
                }
            ]
        }]
    };

第二种

var dataStyle = {
    normal: {
        label: {show:false},
        labelLine: {show:false}
    }
};
var placeHolderStyle = {
    normal : {
        color: 'rgba(0,0,0,0)',
        label: {show:false},
        labelLine: {show:false}
    },
    emphasis : {
        color: 'rgba(0,0,0,0)'
    }
};
option = {
    color:['#38a8da','#d4effa'],
    title: {
        text: '301',
        subtext: '占比100%',
        x: 'center',
        y: 'center',
        itemGap: 2,
        textStyle : {
            color : 'rgba(30,144,255,0.8)',
            fontFamily : '微软雅黑',
            fontSize : 35,
            fontWeight : 'bolder'
        }
    },
    tooltip : {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name:'1',
            type:'pie',
            radius : [80,70],
            itemStyle : dataStyle,
            data:[
                {
                    value:68,
                    name:'哈哈哈68%'
                },
                {
                    value:32,
                    name:'invisible',
                    itemStyle : placeHolderStyle
                }
            ]
        },
    ]
};