双柱渐变图背景图

 

option = {

    backgroundColor: '#1b2735',

    tooltip: {//提示框组件

        trigger: 'axis',//触发类型 柱状图

        axisPointer:{type:'shadow'} //触发效果 移动上去 背景效果

    },    

    xAxis: [//x轴

        {

            type: 'category',//坐标轴类型 离散

            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],//数据

            axisTick:false,//是否显示刻度

            axisLine: {//坐标轴样式

                show: true,//是否显示

                lineStyle: {//线的样式

                    type:'dashed'//线的类型 虚线

                },

            },

             axisLabel: {

                color: "#DEDEDE"

                }

        },

    ],

    yAxis: [//y轴

        {

            min: 0,//最小

            max: 700,//最大

            interval: 100,//相差

            name: '单位：',//名称

            type: 'value',//连续类型

            axisLine: {//坐标轴样式

                show: false, //不显示

            },

            splitLine: {//分隔辅助线

                lineStyle: {

                     type:'dashed',//线的类型 虚线0

                     opacity:0.2//透明度

                },

            },

             axisLabel: {

                color: "#DEDEDE"

                }

        },

    ],

    series: [//系统列表   

        {

            name: '用水消耗',//名称

            type: 'bar',//类型

            barWidth :11,//宽度

            data: [300, 450, 90, 300, 520, 450, 150, 300],//数值

            z:2,

            itemStyle: {

                color: {//渐变色

                    x: 0,

                    y: 0,

                    x2: 0,

                    y2: 1,

                    type: 'linear',

                    global: false,

                     colorStops: [

                        {

                            offset: 0,

                            color: 'rgba(6, 244, 231)',

                        },

                        {

                            offset: 1,

                            color: 'rgba(6, 244, 231,0)',

                        },

                    ],

                },

            },

        },

        {

            name: '电力消耗',

            type: 'bar',

            barWidth : 11,

            data: [400, 600, 90, 400, 400, 250, 90, 400],

            z:1,

            itemStyle: {

                color: {

                    x: 0,

                    y: 0,

                    x2: 0,

                    y2: 1,

                    type: 'linear',

                    global: false,

                    colorStops: [

                    {

                        offset: 0,

                        color: 'rgba(3, 181, 243)',

                    },

                    {

                        offset: 1,

                        color: 'rgba(2, 190, 251,0)',

                    },

                    ],

                  

                },

            },

        },

         {

            name: "",   

            barGap: '-220%',

            type: 'bar',

            z:0,

            data: [420,620,110,420,540,470,170,420],

            barWidth: '48px',

            itemStyle: {

                normal: {

                    color: '#fff', // 0% 处的颜色

                     opacity:0.1//透明度

                }

            },

        },

    ],

    legend: {

        right: '70',

        textStyle: {

            // 图例文字的样式

            color: '#fff',

            fontSize: 14,

            padding: [2, 0, 0, 2], 

            fontWeight: 100,

        },

    },

};