Echart笔记

柱状图

带背景色的柱状图

将X与Y轴交换制作为进度条

//将X与Y轴交换制作为进度条
option = {  
  xAxis: {
    type: 'value',
    min:0,
    max:100,
    show:false,//隐藏x轴
  },
  yAxis: {
    type: 'category',
    data:['进度条'],
    show:false,//隐藏y轴
  },
  label:{
    show:true,
    fontSize:20,
    fontFamily:'Arial',
    color:'#C7C3E3',
    backgroundColor: 'rgba(0,0,0,0.0)',  //标签底色
    borderRadius: [5,5,5,5],
    position: 'top',
    horizontalAlign: 'center',
    //verticalAlign: 'bottom',
    formatter: function (params) {  // 通过formatter自定义标签的显示格式
                return params.value + ' %';  // 在这里设置标签的值，例如加上单位"元"
            },

  },
  grid: {
    top: '20%',
    left: '10%',
    right: '10%',
    bottom: '20%'
  },
  series: [
    {
      type: 'bar',
      data: [90.55],
      color:'rgba(216,100,150,0.5)',
      showBackground: true, // 是否显示柱条的背景色，默认不显示
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)', // 柱条的颜色
        borderColor: 'red', // 柱条的描边颜色
        borderWidth: 0, // 柱条的描边宽度，默认不描边
        borderType: 'dashed', // 柱条的描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
        borderRadius:[20,40,40,20],  //背景圆角设置
      },
      itemStyle:{
        normal:{
          borderRadius:[20,40,40,20],  //圆角设置
          color: new echarts.graphic.LinearGradient(0,0,1,1,[  //线性渐进色设置，范围0到1
            {offset:0,color:'#A07DA0'},
            {offset:0.25,color:'#AD9CC2'},
            {offset:0.5,color:'#C7C3E3'},
            {offset:0.75,color:'#E1A08B'},
            {offset:1,color:'#D8929B'},
            
            ])
        },
      },

      
      barMaxWidth: 100, // 设置柱状图的最大宽度，以适应 y 轴标签的长度
      barWidth: 50, // 设置柱状图的宽度，以适应 y 轴标签的长度
      barMinHeight: 10, // 设置柱状图的最小高度，用于显示标签信息
    },
  ],
};

效果图