ECharts Gallery

20:11:45图表已生成
代码
let barData = [{
        name: '设备正常',
        data: [50, 100, 79, 34, 78, 134],
        color: ['rgba(30,89,115,1)', 'rgba(30,89,115,0.5)', 'transparent']
    },
    {
        name: '设备异常',
        data: [120, 110, 130, 120, 120, 120],
        color: ['rgba(129,67,16,1)', 'rgba(129,67,16,0.5)', 'transparent']
    }
];

let pictorialBar1 = [],pictorialBar2 = [];

for (var i = 0; i < barData[0].data.length; i++) {
    pictorialBar1.push({
        value: barData[0].data[i],
        symbolPosition: 'end'
    })
    pictorialBar2.push({
        value: barData[1].data[i],
        symbolPosition: 'end'
    })
}

option = {
            backgroundColor: '#010d14',
            title: {
                // text: '支 / 发',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: '#24c1ff' //标题颜色
                },
                top: '0%',
                left: '0%',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5px',
                right: '5px',
                bottom: '5px',
                top: '30px',
                containLabel: true,

            },
            legend: {
                icon: 'roundRect',
                orient: 'horizontal',
                itemWidth:20,
                itemHeight:15,
                textStyle: {
                    fontSize: 12, //字体大小
                    color: '#b9c8d4', //字体颜色
                },
                right: '3%', //距离右侧
                data:['设备正常','设备异常']
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLabel: {
                    interval: 0, // 解决x轴名称过长问题
                    textStyle: {
                        color: '#c8d8e3'
                    }
                },
                axisLine: {
                    lineStyle: { //y轴网格线设置
                        color: '#032e42',
                        width: 1,

                    }
                },
                data: [' 喷淋头  ', '烟感 ', '消防栓  ', '灭火器', '指示牌', '应急照明灯'],

            }],
            yAxis: [{
                type: 'value',
                name: "单位/个",
                nameGap:8,
                nameTextStyle: {
                    color: "#d1d1d1",
                },

                axisTick:{
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: { //y轴网格线设置
                        color: '#032e42',
                        width: 1,

                    }
                },
                splitLine: { //保留网格线
                    show: true,
                    lineStyle: { //y轴网格线设置
                        color: '#032e42',
                        width: 1,

                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#d1d1d1' //字体颜色
                    }
                },
            }],
            series: [

                {
                    name: '设备正常top',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolSize: [12, 2],
                    symbolOffset: [-8, 0],
                    z: 2,

                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            color: '#12bcff'
                        }
                    },
                    data: pictorialBar1
                },
                {
                    name: '设备异常top',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolSize: [12, 2],
                    symbolOffset: [8, 0],
                    z: 2,

                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            color: '#ff8a0c'
                        }
                    },
                    data: pictorialBar2
                },
                {
                    name: '设备正常',
                    type: 'bar',
                    barWidth: 12,

                    z: 1,
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#969a9d'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                    offset: 0,
                                    color: 'rgba(8,97,148,1)'
                                },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(8,97,148,0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'transparent'
                                    }
                                ]
                            )
                        },

                    },
                    data: barData[0].data,

                },
                {
                    name: '设备异常',
                    type: 'bar',

                    z: 1,
                    barWidth: 12,
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#969a9d'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                    offset: 0,
                                    color: 'rgba(129,67,16,1)'
                                },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(129,67,16,0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'transparent'
                                    }
                                ]
                            )
                        },

                    },
                    data:barData[1].data,

                }
            ]
        };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
