用户登入统计echarts 柱状配置项内容和展示

xinguan第一个图表

      option = {
  title: {
    text: '用户登入统计',
  },
  // 提示框
  tooltip: { 
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },

// 工具栏组件
 toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
 
  // 头部标注
  legend: {
    data: ['全部', '我']
  },
 
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['12-02', '12-05', '12-06', '12-16', '12-17']
    }
  ],
   yAxis: [
    {
      type: 'value',
      min: 0,
      max: 120,
      position: 'left',
      axisLabel: {
        formatter: '{value} '
      },
      axisLine: {
              //y轴
              show: true,
            },
            // axisTick: {
            //   //y轴刻度线
            //   show: false,
            // },
            // splitLine: {
            //   //网格线
            //   show: true,
            // },
      
    }
  ],
  
  
  series: [
    {
      type: 'bar',
      name: '全部',
      data: [1,2, 13, 109,2, ],
      
      
      itemStyle: {
        // 柱条的颜色（color）；
        color:'rgba(213, 58, 53,0.8)',
        // 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
        borderType: 'solid',
        // 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
        shadowBlur: 10
      },
      // barGap 被设为 '20%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，
      // 相对于柱条宽度的百分比。而 barCategoryGap 是 '40%'，
      // 意味着柱条每侧空余的距离，相对于柱条宽度的百分比。
      barGap: '20%',
      barCategoryGap: '40%',
      
      // 为柱条添加背景色
      // 用 showBackground 开启，并且可以通过 backgroundStyle 配置。
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.5)'
      },
      
    },
    {
      type: 'bar',
      name: '我',
      data: [1, 2, 11, 89,2],
      
      
       itemStyle: {
        // 柱条的颜色（color）；
        color:'rgba(51, 75, 92)',
        
      },
        showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.5)'
      },
      
    },
   
  ]
};