渐变柱状图

实现效果
渐变柱状图_第1张图片

option = {
    legend: {
    // orient: 'vertical',
    left: 'center'
  },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  color:['#5b90fa'],
  xAxis: {
    type: 'category',
    data: ['收款单数', '付款单数', '报支单数', '结算单数','开票量']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [20, 3, 14, 2,2],
      type: 'bar',
      label: {
        show: true,
        position: 'top',
         formatter: '{c}(张)'//c后面加单位
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
            emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
    }
  ]
};

你可能感兴趣的:(javascript,前端)