• 代码

// prettier-ignore
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
 
option = {
    // color: settings.color,
    grid: {//避免四周留白太多
      top: '4%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,

      // top: 0,
      // right: 0,
      // bottom: 0,
      // left: 0,

      // left: '3%', //默认10%
      // right: '4%', //默认10%
      // bottom: '8%', //默认60
      // containLabel: true
    },
    // backgroundColor: '#1d263a', // 设置深色背景
    backgroundColor: 'rgba(0, 0, 0, 0)', // 透明背景 transparent
    title: {
      text: '',
      subtext: ''
    },

    xAxis: [
      {
        type: 'category',
        data: dataAxis,
        // axisPointer: {
        //   type: 'shadow',
        // },
        axisLabel: {
          // show: true, // 是否显示刻度标签，默认显示
          // interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
          // rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
          // inside: false, // 刻度标签是否朝内，默认朝外
          // margin: 6, // 刻度标签与轴线之间的距离
          // formatter: '{value} Day' , // 刻度标签的内容格式器

          interval: 0,
          formatter: function (params) {
            return params.substring(0, 10);
          },
          rotate: 40,
          color: '#808B97', // 设置X轴字体颜色为红色
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        splitLine:{//刻度线设置为虚线
          show:true,
          lineStyle:{
            type:'dashed'
          }
        },
        axisLabel: {
          color: '#808B97', // 设置X轴字体颜色为红色
        }
      },
    ],
    // dataZoom: [
    //   {
    //     show: true,  // 是否展示
    //     xAxisIndex: [0],  // 控制第一个x轴
    //     height: 15,
    //     type: 'slider',
    //     left: 0,
    //     right: 0,
    //     bottom: 10,
    //     start: 0,  // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
    //     end:xAxisData.length > 10 ? 12 : 80,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
    //     zoomLock: true, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true
    //   },
    // ],
    series: [
      {
        type: 'bar',
        barWidth: 14,
        showBackground: false,//显示背景
        itemStyle: {//初始化渐变背景
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0EECE4' },
            { offset: 0.1, color: '#0EECE4' },
            { offset: 1, color: '#058FE7' }
          ])
        },
        emphasis: {//鼠标移上去的颜色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#0EECE4' },
              { offset: 0.5, color: '#0EECE4' },
              { offset: 1, color: '#0EECE4' }
            ])
          }
        },
        data: data
      }
    ],
  };

image.png