柱状图ECharts Gallery

20:11:45图表已生成
代码
var $deliveryRate24h = [12, 22, 33, 0]
var $deliveryRate48h = [22, 32, 53, 0]
var $deliveryRate72h = [10, 42, 63, 0]
option = {
    tooltip: {
        confine: true,
        trigger: 'axis',

        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            // color:'#0062ff',
            shadowStyle: {
              
                color: '#FFA980',
                opacity: 0.1
            }
        },
        formatter: function(param) {
            var resultTooltip = "";
            resultTooltip =
                "<div style='text-align:center;'>" + param[0].name + "</div>" +
                "<div style='padding-top:5px;'>"
            for (var i = 0; i < param.length; i++) {

                if (i > 0) {
                    resultTooltip += "<div style='padding-top:2px;'>"
                }

                resultTooltip +=
                    param[i].marker +
                    "</span><span style = 'float:right;'>" + param[i].value + "k" + "</span>"

            }
            return resultTooltip
        },
    },
    legend: {
        selectedMode: false,
        data: ['Hour 24', 'Hour 48', 'Hour 72'],
        right: 0,
        top: 23,
        icon: "circle"
    },
    label: {
        textStyle: {
            color: 'black',
            fontSize: 16,
            fontWeight: 600
        }
    },
    grid: {
        height: 'auto',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['STD', 'SMD', 'NextDay', 'IDlite'],
        axisTick: { // 去除坐标轴上的刻度线
            show: false
        },
        splitLine: { // 控制网格线是否显示
            lineStyle: { //  改变样式
                width: '0.2',
                color: '#507b7d' // 修改网格线颜色    
            }
        },
        axisLine: { // y轴的颜色和宽度
            show: false,
            lineStyle: {
                color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
            }
        },
        axisLabel: { // x轴的字体样式
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
                fontSize: 10, // x轴字体大小
            }
        }
    },
    yAxis: {
        type: 'value',
        axisTick: { // 去除坐标轴上的刻度线
            show: false
        },
        splitLine: { // 控制网格线是否显示
            lineStyle: { //  改变样式
                width: '0.2',
                color: '#507b7d' // 修改网格线颜色    
            }
        },
        axisLine: { // y轴的颜色和宽度
            show: false,
            lineStyle: {
                color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
            }
        },
        axisLabel: { // x轴的字体样式
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
                fontSize: 10, // x轴字体大小
            }
        }
    },
    series: [{
            name: 'Hour 24',
            type: 'bar',
            data: $deliveryRate24h,
            itemStyle: {
                barBorderRadius: [90, 90, 0, 0],
                color: "rgba(116,41,201, 1)"
            },
            barWidth: '6%',
        },
        {
            name: 'Hour 48',
            type: 'bar',
            data: $deliveryRate48h,
            itemStyle: {
                barBorderRadius: [90, 90, 0, 0],
                color: "rgba(255,108,62, 1)"
            },
            barWidth: '6%',

        },
        {
            name: 'Hour 72',
            type: 'bar',
            data: $deliveryRate72h,
            itemStyle: {
                barBorderRadius: [90, 90, 0, 0],
                color: "rgba(253,189,76, 1)"
            },
            barWidth: '6%',
            barGap: "2.33"
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
