echarts 模仿在线天数和离线天数的柱子，显示占比

yb305小白

已于 2023-09-13 16:14:15 修改

阅读量202

点赞数

文章标签： echarts 前端 javascript

于 2023-09-13 16:11:42 首次发布

本文链接：https://blog.csdn.net/yb305/article/details/132856989

版权

var data1 = [28];
var data1Max = Math.max.apply(Math, data1);
var data2 = [30];

option = {
    backgroundColor:'#000',
    grid: {
        left: '8%',
        top: '3%',
        bottom: '3%',
        right: '20%',
        containLabel: true
    },
    legend: {
        show: false
    },

    xAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: 'transpanent',
            fontSize: 14
        },
        data: [ '公盈投资']
    },
    series: [{
         // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(0, 255, 236, 1)"
          }
        },
        symbolRepeat: "fixed",
        symbolMargin: 2,
        symbol: "roundRect",
        symbolClip: true,
        symbolSize: [7.5, 22],
        symbolPosition: "start",
        symbolOffset: [5,0.2],
        z: 1,
        zlevel: 1,
        
        label: {
                normal: {
                    show: true,
                    formatter: (series) => {
                        return data1[0] + '天'
                    },
                    position: 'insidebottomLeft',
                    textStyle:{
                        color: '#ffffff',
                        fontSize: 20,
                    },
                    offset: [0, 0],
                }
            },
        data: data1
        //data: []
    }, {
         // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(255,0,0, 1)"
          }
        },
        symbolRepeat: "fixed",
        symbolMargin: 2,
        symbol: "roundRect",
        symbolClip: true,
        symbolSize: [7.5, 22],
        symbolPosition: "start",
        symbolOffset: [5,0.2],
        z: 0,
        zlevel: 1,
         label: {
                normal: {
                    show: true,
  
                    formatter: (series) => {
                        return data2[0]-data1[0] + '天'
                    },
                    position: 'insideTopRight',
                    textStyle:{
                        color: '#ffffff',
                        fontSize: 20,
                    },
                    offset: [-30, 0],
                }
            },
        data: data2
        //data: []
    }]
};

效果图：