echart横向柱状图设置

597 阅读2分钟

image.png

效果图如下:

option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
       
        type: 'shadow', 
      },
    },
    legend: {
      itemHeight: 10,
      itemWidth: 10,
      icon: 'rect', // 修改形状
      color: '#595959',
      x: 'right', //可设定图例在左、右、居中
      y: 'top',
      right: 20,
      top: 10,
    },
    grid: {
      left: 10, // 图标距离左侧的位置
      right: 10,// 图标距离右侧的位置
      bottom: 10,// 图标距离底部的位置
      containLabel: true, // 文字自适应显示不被遮挡
    },
    xAxis: {
      type: 'value',
      // 坐标 轴线
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#ddd',
        },
      },
      //坐标轴样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#595959',
          fontSize: 12,
          // fontWeight: 'bold',
        },
      },
    },
    yAxis: {
      name: '单位:节',
      nameTextStyle: {
        color: '#595959',
        // fontSize:16,
        // padding:10
      },
      type: 'category',
      data: ['语文', '数学', '英语', '体育'],
      // 坐标刻度线
      axisTick: {
        show: false,
        lineStyle: {
          type: 'solid', //y轴分割线类型
          color: '#eee',//y轴分割线颜色
          width: 1,//y轴分割线宽度
        },
      },
      // 坐标 轴线
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',//y轴轴线类型
          color: '#ddd',//y轴轴线颜色
        },
      },
      //坐标轴样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#595959',//y轴label字体颜色
          fontSize: 12,//y轴label字体大小
        },
      },
    },
    series: [
      {
        name: '1',
        type: 'bar',
        stack: 'total',
        barWidth: '20',// 柱子高度
        label: {
          show: true,
          position: 'inside', 
          // 柱子label显示位置 
          // 外部:top(外部正上方)、bottom(外部正下方)、left(外部左边)、right (外部右边)
          // 内部:inside(内部中央)、insideTop(内部靠顶部)、insideBottom(内部靠下方)、insideRight(内部靠右边)、insideLeft(内部靠左边)
          textStyle: {
            color: '#fff',// 柱子label字体颜色
          },
        },
        color: '#3BDAFF', // 柱子颜色
        data: [10, 12, 19, 34],
      },
      {
        name: '2',
        type: 'bar',
        stack: 'total',
        barWidth: '10',
        label: {
          show: true,
          position: 'inside',
          textStyle: {
            color: '#fff',
          },
        },
        color: '#009EFF',
        data: [82, 83, 90, 93],
      },
      {
        name: '3',
        type: 'bar',
        stack: 'total',
        barWidth: '10',
        label: {
          show: true,
          position: 'inside',
          textStyle: {
            color: '#fff',
          },
        },
        color: '#0073FF',
        data: [80, 82, 91, 94],
      },
      {
        name: '4',
        type: 'bar',
        stack: 'total',
        barWidth: '10',
        label: {
          show: true,
          position: 'inside',
          textStyle: {
            color: '#fff',
          },
        },
        color: '#2218FF',
        data: [82, 82, 61, 34],
      },
    ],
  }