Echarts在线免费图表

 
            var newData = [
   {
      name: "重大",
      value: "800",
      proportion: "50"
   },
   {
      name: "较大",
      value: "3037",
      proportion: "47"
   },
   {
      name: "一般",
      value: "1895",
      proportion: "99"
   },
   {
      name: "低",
      value: "1025",
      proportion: "49"
   },
   {
      name: "未来",
      value: "8888",
      proportion: "90"
   }
]

var myColor = ['#D9001B', '#F59A23', '#FFFF00', '#02A7F0', '#999999'];

option = {
   backgroundColor: '#002653',
   tooltip: {
      trigger: 'axis',
      show: false,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
   },
   legend: {
      show: false,
   },
   grid: {
      left: '10%',
      right: '10%',
      bottom: '0%',
      top: "0",
      containLabel: false
   },
   xAxis: [{
      splitLine: {
         show: false
      },
      type: 'value',
      show: false,
   }],
   yAxis: [{
      splitLine: {
         show: false
      },
      axisLine: { //y轴
         show: false
      },
      type: 'category',
      axisTick: {
         show: false
      },
      inverse: true,
      data: newData && newData.length > 0 ? newData.map((i) => i.name) : [],
      axisLabel: {
         color: '#FFF',
         fontSize: 16,
      },
   }],
   series: [{
      name: '',
      type: 'bar',
      barWidth: 12, // 柱子宽度
      label: {
         show: true,
         position: 'right', // 位置
         color: '#FFAA00',
         fontSize: 14,
         distance: 10, // 距离
         formatter: '{c}%' // 这里是数据展示的时候显示的数据
      }, // 柱子上方的数值
      itemStyle: {
         barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
         color: function (params) {
            return myColor[params.dataIndex];
         }
      },
      data: newData,
   }]
};