渐变柱状图

86 阅读1分钟

心血来潮突然看到一个设计稿样子,想配置echarts配置出来

柱状图.png

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     axisLine:{
      show:false
    },
    axisTick:{
      show:false
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      show:false
    },
    axisLabel:{
      show:false
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)',
        borderRadius: [50, 50, 0, 0]
      },
      itemStyle:{
         normal: {
           borderRadius: [50, 50, 0, 0],
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{  
          offset: 0,
          color: '#a65ef7'
        }, {
          offset: 1,
          color: '#4c53ff'
        }])
      }
    },
    label: {
        show: true,
        position: 'top'
      },
    }
  ]
};