栅格条形图ECharts Gallery

20:11:45图表已生成
代码
//当前视口宽度
const nowClientWidth = document.documentElement.clientWidth;

// 单位换算方法
function nowSize(val,width=nowClientWidth,initWidth=1920){
    return val * (width/initWidth);
}
let list = [{
    name: '猪仓4',
    value: 26.2
}, {
    name: '猪仓3',
    value: 18.0
}, {
    name: '猪仓2',
    value: 24.1
}, {
    name: '猪仓1',
    value: 24.2
}];
let data = ['猪仓4', '猪仓3', '猪仓2', '猪仓1'];
let values = [26.2, 18.0, 24.1, 24.2]
option = {
    backgroundColor:'#002a66',
    xAxis: {
        max: 30,
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            // textStyle: {
            //     fontSize: nowSize(8)
            // }
        },
        axisTick: {
            show: true,
            lineStyle: {
                "color": "#ccc"
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                "color": "#ccc"
            }
        },
        splitArea: {
            show: false,
        }
    },
    grid: {
        containLabel: true,
        left: '5%',
        top: '10%',
        right: '15%',
        bottom: '10%'
    },
    yAxis: [{
        data: data,
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: nowSize(15),
                color: '#ccc'
            }
        },
        splitArea: {
            show: false,
        }
    }],
    series: [{ //内
        type: 'bar',
        barWidth: nowSize(20),
        legendHoverLink: false,
        symbolRepeat: true,
        markLine: {
            data: [
                {xAxis: 13, name: '最低警戒值'},
                {xAxis: 27, name: '最高警戒值'}
            ],
            lineStyle:{
                color: '#006dd4'
            }
        },
        silent: true,
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0,
                    color: '#00ccff' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#0061ba' // 100% 处的颜色
                }]
            }
        },
        data: list,
        z: 1,
        animationEasing: 'elasticOut'
    },
        {
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: nowSize(1),
            symbol: 'rect',
            symbolSize: [nowSize(20), nowSize(20)],
            symbolBoundingData: 30,
            itemStyle: {
                normal: {
                    color: 'rgba(0,65,186,0.61)',

                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [0, 2],
                    distance: 30,
                    textStyle: {
                        color: '#00ccff',
                        fontSize: 14,
                    }
                },

            },
            data: values,
            z: 0,
            animationEasing: 'elasticOut'
        },
        { //分隔
            type: 'pictorialBar',
            itemStyle: {
                color: '#002a66'
            },
            symbolRepeat: 'fixed',
            symbolMargin: nowSize(10),
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [nowSize(1), nowSize(20)],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            symbolBoundingData: 30,
            data: list,
            z: 2,
            animationEasing: 'elasticOut'
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
