柱状图蓝色

描述:当前是关于Echarts图表中的 示例。
 
            
option = {
    backgroundColor:'#333',
    "tooltip": {
        "trigger": "axis",
    },
    "grid": {
        "left": "80",
        "right": "3%",
        "bottom": "10%"
    },
    "xAxis": [
        {
            "type": "category",
            "data": [
                "03-06",
                "",
                "03-07",
                "",
                "03-08",
                "",
                "03-09",
                "",
                "03-10",
                "",
                "03-11",
                "",
            ],
            "axisLabel": {
                "color": "#b3e5ff",
                // margin: 0,
                // width: '20',
                // align: "left",
                // padding: [0, 0, 0, 100],
                // align: "center",
                // backgroundColor: "rgba(187, 6, 228, 1)"
            },
            show: false,
            "axisLine": {
                "show": false
            },
            "axisTick": {
                // "show": false
            },
            "axisPointer": {
                "show": true,
                "lineStyle": {
                    "color": "transparent"
                }
            }
        },
        {
            "type": "category",
            "axisLine": {
                "show": false
            },
            "axisTick": {
                // "show": false
            },
            position: "bottom",
            "axisLabel": {
                "color": "#ddd"
            },
            show: false,
            "axisPointer": {
                "show": true,
                "lineStyle": {
                    "color": "transparent"
                }
            },
            "data": [
                "",
                "03-06",
                "",
                "03-07",
                "",
                "03-08",
                "",
                "03-09",
                "",
                "03-10",
                "",
                "03-11",
            ]
        },
        {
            "type": "category",
            position: "bottom",
            "data": [
                "03-06",
                "03-07",
                "03-08",
                "03-09",
                "03-10",
                "03-11",
            ],
            "axisLabel": {
                "color": "#b3e5ff",
                // margin: 0,
                // width: '20',
                // align: "left",
                // padding: [0, 0, 0, 100],
                // align: "center",
                // backgroundColor: "rgba(187, 6, 228, 1)"
            },
            // show: false,
            "axisLine": {
                "show": false
            },
            "axisTick": {
                // "show": false
            },
            "axisPointer": {
                "show": true,
                "lineStyle": {
                    "color": "transparent"
                }
            }
        },
        // {
        //     "type": "value",
        //     max: 600
        // }
    ],
    "yAxis": [
        {
            "type": "value",
            "axisTick": {
                "show": false
            },
            "nameTextStyle": {
                "color": "#b3e5ff"
            },
            "axisLabel": {
                "color": "#b3e5ff"
            },
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#042e60"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": "#042e60",
                    "width": 1
                }
            }
        }
    ],
    "dataZoom": [
        {
            "type": "inside",
            "zoomLock": true,
            "xAxisIndex": [
                0,
                1
            ],
            "disabled": false,
            "start": 0,
            "end": 100
        }
    ],
    dataZoom: [{
        type: 'inside',
        zoomLock: true,
        xAxisIndex: [0, 1, 2],
        disabled: false,
        maxSpan: 60,
        start: 0,
        end: 100
    }],
    "series": [
        {
            "itemStyle": {
                "normal": {
                    "color": "#034162"
                }
            },
            "name": "东风本部",
            "type": "bar",
            "data": [
                {
                    "name": "2021-03-06",
                    "value": 10000,
                },
                '',
                {
                    "name": "2021-03-07",
                    "value": 20000,
                },
                '',
                {
                    "name": "2021-03-08",
                    "value": 30000,
                },
                '',
                {
                    "name": "2021-03-09",
                    "value": 40000,
                },
                '',
                {
                    "name": "2021-03-10",
                    "value": 50000,
                },
                '',
                {
                    "name": "2021-03-11",
                    "value": 35000,
                },
                '',
            ],
            // 'barGap': '50%',
            "barWidth": '20%'
        },
        {
            "itemStyle": {
                "normal": {
                    "color": "#00e5ff"
                }
            },
            "name": "东风本部",
            "type": "bar",
            "data": [
                {
                    "name": "2021-03-06",
                    "value": 5000,
                },
                '',
                {
                    "name": "2021-03-07",
                    "value": 15000,
                },
                '',
                {
                    "name": "2021-03-08",
                    "value": 25000,
                },
                '',
                {
                    "name": "2021-03-09",
                    "value": 35000,
                },
                '',
                {
                    "name": "2021-03-10",
                    "value": 45000,
                },
                '',
                {
                    "name": "2021-03-11",
                    "value": 30000,
                },
                '',
            ],
            // "xAxisIndex": 1,
            'barGap': '-75%',
            "barWidth": '10%'
        },
        {
            "itemStyle": {
                "normal": {
                    "color": "rgb(51,248,255)"
                }
            },
            "name": "东风本部",
            "type": "line",
            "data": [
                7000,
                '',
                22000,
                '',
                32000,
                '',
                42000,
                '',
                35000,
                '',
                30000,
                '',
            ],
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "color": "#b3e5ff"
                }
            },
            // symbolOffset: ['50%',0],
            connectNulls: true,
            // "xAxisIndex": 2,
        },
        {
            "itemStyle": {
                "normal": {
                    "color": "#014676"
                }
            },
            "name": "陕重汽",
            "type": "bar",
            "data": [
                '',
                {
                    "name": "2021-03-06",
                    "value": 21000,
                },
                '',
                {
                    "name": "2021-03-07",
                    "value": 28000,
                },
                '',
                {
                    "name": "2021-03-08",
                    "value": 20000,
                },
                '',
                {
                    "name": "2021-03-09",
                    "value": 50000,
                },
                '',
                {
                    "name": "2021-03-10",
                    "value": 55000,
                },
                '',
                {
                    "name": "2021-03-11",
                    "value": 45000,
                }
            ],
            "xAxisIndex": 1,
            // 'barGap': '50%',
            "barWidth": '20%'
        },
        {
            "itemStyle": {
                "normal": {
                    "color": "#009cff"
                }
            },
            "name": "陕重汽",
            "type": "bar",
            "data": [
                '',
                {
                    "name": "2021-03-06",
                    "value": 15000,
                },
                '',
                {
                    "name": "2021-03-07",
                    "value": 18000,
                },
                '',
                {
                    "name": "2021-03-08",
                    "value": 50000,
                },
                '',
                {
                    "name": "2021-03-09",
                    "value": 30000,
                },
                '',
                {
                    "name": "2021-03-10",
                    "value": 20000,
                },
                '',
                {
                    "name": "2021-03-11",
                    "value": 10000,
                }
            ],
            // 'barGap': '200%',
            "xAxisIndex": 1,
            'barGap': '-75%',
            "barWidth": '10%'
        },
        {
            "itemStyle": {
                "normal": {
                    "color": "rgb(255,51,235)"
                }
            },
            "name": "陕重汽",
            "type": "line",
            "data": [
                '',
                14000,
                '',
                10000,
                '',
                18000,
                '',
                15000,
                '',
                10000,
                '',
                20000,
            ],
            
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "color": "#b3e5ff"
                }
            },
            // symbolOffset: ['50%',0],
            connectNulls: true,
            "xAxisIndex":1,
        }
    ]
};