echart-bar

emphasis：强调，重视；（echarts中：选中状态）

barOption = {
  xAxis: {
    type: 'category',
    data: ['MySql', 'Redis', 'MogoDB'],
    // show:false,
    axisTick: { // x轴隐藏刻度
      show: false,
    },
    axisLine: { // x轴的颜色
      lineStyle: {
        color: '#DADFEA',
      }
    },
    axisLabel: { // x轴汉字的颜色
      color: "#82929F",
      fontSize: 14,
      interval: 0, // 不缩放，放不下也放
    },
  },
  legend: {
    data: ['累计', '当前',],
    itemHeight: 10, // w和h
    itemWidth: 10,
    textStyle: { // 汉字的样式
      lineHeight: 12,
      padding: [2, 0, 0, 0], // 因为汉字和图形块没有垂直居中，所以加了padding
      fontSize: 12,
      color: '#82929F',
    },
    icon: 'rect', // 图形块的形状
  },
  yAxis: {
    type: 'value',
    show: false, // 不显示y轴
  },
  grid: { // 图形尽量的铺满盒子
    left: 26,
    top: 40,
    right: 0,
    bottom: 24,
  },
  tooltip: {
    trigger: 'axis', // 滑过x轴的时候，显示tooltip
    axisPointer: { // 有阴影层
      type: 'shadow'
    }
  },
  series: [
    {
      name: '累计',
      data: [
        // 可以设置单条柱子的样式（同一个系列中的单个柱子）
        {name: 'MySql', value: 5, label: {position: 'top', color: '#000'},},
        3, 2, 1],
      type: 'bar',
      itemStyle: { // 柱子的样式
        color: '#FF7C7C', // 柱子颜色
        barBorderRadius: [2, 2, 0, 0], // 柱子的圆角
      },
      label: { // 柱子上显示当前值的数值(图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等)
        show: true,
        position: 'insideTop', // 位置，好多个选项:'top','bottom','insideTop','insideTopLeft'....
        distance: 8, // 距离，可以设置(距离图形元素的距离。)
        color: "#fff",
        formatter: function (params) { // 柱子上提示的数字：dataIndex是第几个；
          console.log("参数：", params);
          // params.dataIndex
          return params.value + '\n(百分比%)'
        },
      },
      barWidth: 20, // 柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
      barMaxWidth: 40,
      barGap: '30%',// 不同系列的柱间距离，（如 '30%'，表示柱子宽度的 30%）(同一个系列里，不同柱子的间距)
      barCategoryGap: '30%', // 同一系列的柱间距离，默认为类目间距的20%，可设固定值（系列之间的间距，比较少的时候，可以条大点）（属性共享，给最后一个加就ok）
    },
    {
      name: '当前',
      data: [1, 2, 3, 4,],
      type: 'bar',
      itemStyle: { // 图形样式。(柱子的样式)
        normal: {
          color: '#329AF0', // 柱子颜色
          barBorderRadius: [2, 2, 0, 0], // 柱子的圆角
        },
        emphasis: {// hover后的样式
          color: '#121ef0',
        }
      },
      label: { // 柱子上显示当前值的数值
        show: true,
        position: 'insideTop', // 位置，好多个选项
        distance: 8, // 距离，可以设置
        color: "#fff",
        formatter: function (params) { // 柱子上提示的数字：dataIndex是第几个；
          console.log("参数：", params);
          // params.dataIndex
          return params.value + '\n(百分比%)'
        },
      },
      barCategoryGap: '30%', // 系列之间的间距，比较少的时候，可以条大点
    },
  ],
}