echarts柱状图

欧阳小白 1年前 ⋅ 624 阅读
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data: ['可用功率','已用功率'],
         align: 'left',
        right: 35
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        data: ['市电容量','UPS容量','低压配电容量','高压直流容量'],
        axisLabel: {
            color: 'white'
        }
        
    },
    yAxis: {
        type: 'value',
           axisLabel: {
            color: 'white',
            formatter: '{value}%'  
        }
    },
    series: [
        {
            name: '已用功率',
            type: 'bar',
            stack: '总量',
            barWidth:70,
            itemStyle:{
                normal:{
                   color:'#597EF7'
                     }
                 },
            label: {
                normal: {
                    show: true,
                    position: 'insideBottom',
                    formatter: '{c}%',
                }
            },
            data: [30, 35, 22, 60]
        },
        {
            name: '可用功率',
            type: 'bar',
            stack: '总量',
            itemStyle:{
                normal:{
                   color:'#01A355'
                     }
                 },
            label: {
                normal: {
                    show: true,
                    position: 'insideTop',
                    color:'white',
                    formatter: '{c}%',
                }
            },
            data: [70, 65, 78, 40]
        }
    ]
};


全部评论: 0

    我有话说:

    咨询问题

    点击这里给我发消息

    淘宝咨询

    博主承接代做业务

    真·送云服务器

    咨询博主