Echarts在线免费图表

 
            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,
        },
    },
};