Echarts在线免费图表

 
            var colors = ['#00C0FA', '#FFEF68', '#00FFBA', '#92B2FF'];
var data = [5436, 3106, 4560, 968];

var option = {
  backgroundColor: '#002653',
  grid: {
    top: '5%',
    left: '18%',
    right: '8%',
    bottom: '5%'
  },
  xAxis: {
    show: false,
    type: 'value'
  },
  yAxis: {
    type: 'category',
    align: 'left',
    padding: [0, 0, 40, 10],
    axisLabel: {
      color: '#FFF',
      fontSize: 14,
      width: 80,
      padding: [0, 0, 50, 8],
      align: 'left',
      formatter: (params) => {
        return `${params}`;
      },
      rich: {
        value: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 500
        }
      }
    },
    axisTick: 'none',
    inverse: true,
    axisLine: {
      show: false
    },
    data: ['随手拍', '监督员上报', '热线投诉', '微信举报']
  },
  series: [
    {
      type: 'pictorialBar',
      barWidth: 10,
      legendHoverLink: false,
      silent: true,
      symbolRepeat: true,
      symbolMargin: 2,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [3, 15],
      symbolPosition: 'start',
      label: {
        show: true,
        position: 'right',
        formatter: '{c} 件',
        fontSize: 16,
        color: '#FFF'
      },
      itemStyle: {
        color: function(params) {
          return colors[params.dataIndex];
        }
      },
      data: data
    }
  ]
};