Echarts在线免费图表

 
            const data = [50, 80, 70, 60, 91];
let name = ['土', '木', '水', '火', '金'];
const textStyle = { "color": "#fff", "fontSize": 15 }
const itemColor = {
   type: 'linear',
   x: 0,
   y: 0,
   x2: 1,
   y2: 1,
   colorStops: [
      {
         offset: 0,
         color: 'rgba(255,198,26,0.1)'
      },
      {
         offset: 1,
         color: 'rgba(255,198,26,1)'
      }
   ]
}
let bgColor = 'rgba(255,198,26,0.3)'
let borderColor = 'rgba(255,198,26,1)'
let borderWidth = 1

option = {
   backgroundColor: "#000",
   tooltip: {
      show: false,
   },
   legend: {
      show: false
   },
   xAxis: [
      {
         splitLine: {
            show: false
         },
         max: 100,
         type: 'value',
         show: false
      }
   ],
   yAxis: [
      {
         splitLine: {
            show: false
         },
         axisLine: {
            show: false
         },
         type: 'category',
         axisTick: {
            show: false
         },
         inverse: true,
         data: name,
         axisLabel: {
            textStyle: textStyle,
            margin: 10
         }
      },
      {
         type: 'category',
         inverse: true,
         axisTick: 'none',
         axisLine: 'none',
         show: true,
         axisLabel: {
            textStyle: textStyle,
            formatter: function (value) {
               return value + '%';
            }
         },
         data: data
      }
   ],
   series: [
      {
         name: '',
         type: 'bar',
         barWidth: 10, // 柱子宽度
         MaxSize: 0,
         showBackground: true,
         yAxisIndex: 0,
         barBorderRadius: [50, 50, 50, 50],
         backgroundStyle: {
            color: bgColor,
            borderColor: borderColor,
            borderWidth: borderWidth,
            borderRadius: 5
         },
         label: {
            show: false
         },
         itemStyle: {
            barBorderRadius: [50, 50, 50, 50],
            color: itemColor
         },
         data: data
      }
   ]
};