echarts-条纹柱状图

var option = {
  // 文本图形组件，用于在图表上显示静态文本
  graphic: {
    type: 'text', // 组件类型为文本
    left: 'center', // 水平居中
    top: 'middle', // 垂直居中
    silent: true, // 不响应鼠标事件
    invisible: true, // 根据是否有数据判断
    style: {
      fill: '#000', // 文本颜色
      fontWeight: 'bold', // 字体加粗
      text: '暂无数据', // 文本内容
      fontSize: '24px' // 字体大小
    }
  },

  tooltip: {
    // 提示框组件配置
    show: true, // 是否显示提示框
    trigger: 'item' // 触发类型，此处为基于图形元素触发
  },

  grid: {
    // 直角坐标系内绘图网格
    top: '20%', // 距离容器顶部的比例
    bottom: '20%', // 距离容器底部的比例
    left: '5%', // 距离容器左边的比例
    right: '5%' // 距离容器右边的比例
  },

  xAxis: {
    // 类目轴，通常作为X轴
    type: 'category', // 类目轴
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 数据
    axisLine: {
      // 轴线样式
      lineStyle: {
        color: '#ccc' // 轴线颜色
      }
    },
    axisLabel: {
      // 轴标签样式
      interval: 0, // 强制显示所有标签
      formatter(param) {
        // 自定义标签格式器
        if (param.length <= 4) {
          return `${param}`; // 如果标签长度小于等于4，则直接返回
        } // 其余判断省略
      },
      color: '#000', // 标签颜色
      fontSize: '14px' // 标签字体大小
    },
    axisTick: {
      // 轴刻度线样式
      show: false // 不显示刻度线
    }
  },

  yAxis: {
    // 数值轴，通常作为Y轴
    axisLabel: {
      // 轴标签样式
      color: '#000', // 标签颜色
      fontSize: '14px' // 标签字体大小
    },
    minInterval: 1 // 最小区间单位为1
  },

  series: [
    // 系列配置
    {
      label: {
        // 图形上的文本标签
        show: true, // 显示标签
        position: 'top', // 标签位置
        color: '#000', // 标签颜色
        fontSize: '14px' // 标签字体大小
      },
      tooltip: {
        // 系列上的提示框配置
        show: true // 显示提示框
      },
      type: 'bar', // 图表类型为柱状图
      barWidth: 25, // 柱子宽度
      color: '#0b405e', // 柱子颜色
      cursor: 'auto', // 鼠标悬停时的光标样式
      data: [150, 230, 224, 218, 135, 147, 260], // 数据
      markPoint: {
        // 标记点配置
        tooltip: { show: false }, // 禁用提示框 ,
        symbol: '', // 标记点符号（此处为空，表示默认符号）
        symbolSize: [25, 6], // 符号大小
        symbolOffset: [0, -3], // 符号偏移量
        data: [
          // 标记点数据
          { coord: [0, 150] },
          { coord: [1, 230] },
          { coord: [2, 224] },
          { coord: [3, 218] },
          { coord: [4, 135] },
          { coord: [5, 147] },
          { coord: [6, 260] }
        ]
      },
      itemStyle: {
        // 图形样式
        borderWidth: 0, // 边框宽度
        decal: {
          symbol: 'rect',
          color: '#5bbc5',
          symbolSize: 0.5,
          rotation: 70,
          dashArrayX: 4,
          dashArrayY: [1, 0]
        }
      }
    }
  ]
};