Echarts在线免费图表

 
            option = {
    // backgroundColor: '#1b2735',
    tooltip: {//提示框组件
        trigger: 'axis',//触发类型 柱状图
        axisPointer:{type:'shadow'} //触发效果 移动上去 背景效果
    },    
    xAxis: [//x轴
        {
            type: 'category',//坐标轴类型 离散
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],//数据
            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 :15,//宽度
            data: [300, 450, 90, 300, 520, 450],//数值
            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)',
                        },
                    ],
                },
            },
            showBackground: true,
            backgroundStyle:{
                color:'rgba(82, 191, 242, .0)',
                borderColor: 'rgba(82, 191, 242, .2)',
                borderWidth: 15
            }
        },
         {
         type: 'scatter',
         name: '2222',
         yAxisIndex: 0,
         data: [300, 450, 90, 300, 520, 450],//数值
         symbol: 'rect',
         symbolSize: [20, 3],
         itemStyle: {
            color: '#fff',
         },
         hoverAnimation: false,
         silent: true,
         symbolOffset: ['-115%', 0]
      },
        {
            name: '电力消耗',
            type: 'bar',
            barWidth : 15,
            barGap: '200%',
            data: [400, 600, 90, 400, 400, 250],
            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)',
                    },
                    ],
                  
                },
            },
            showBackground: true,
            backgroundStyle:{
                color:'rgba(82, 191, 242, .0)',
                borderColor: 'rgba(82, 191, 242, .2)',
                borderWidth: 15
            }
        },
        {
         type: 'scatter',
         name: '1111',
         yAxisIndex: 0,
         data: [400, 600, 90, 400, 400, 250],
         symbol: 'rect',
         symbolSize: [20, 3],
         itemStyle: {
            color: '#fff',
         },
         hoverAnimation: false,
         silent: true,
         symbolOffset: ['115%', 0]
      },
    ],
    legend: {
        right: '70',
        icon:'rect',
        itemWidth:14,
        itemHeight:14,
        textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 14,
            padding: [2, 0, 0, 2], 
            fontWeight: 100,
        },
    },
};