Echarts在线免费图表

 
            option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      valueFormatter: (value) => value + '%' //改变显示文字
   },
   grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
   },
   xAxis: {
      name: '接入率(%)',
      nameLocation: 'start',
      type: 'value',
      splitLine: { show: false },
      nameTextStyle: {
         color: 'black'
      },
      axisLine: {
         show: true
      },
      axisTick: {
         show: true //刻度线
      },
      splitNumber: 10,
      max: 100
   },
   yAxis: {
      type: 'category',
      data: ['安全帽', '移动布控器', '人脸识别柱', '小型气象站', '闸机'],
      axisLabel: {
         color: 'black'
      },
      axisLine: {
         show: false //隐藏y轴
      },
      axisTick: {
         show: false //刻度线
      }
   },
   series: [
      {
         type: 'bar',
         data: [60, 50, 90, 55, 25],
         itemStyle: {
            normal: {
               barBorderRadius: 31,// 让柱形上下变成圆角
               color: function (params) {
                  var colorList = ["#347caf", "#54bcbd", "#e99d42", "#4095e5", "#ff5b5b"];
                  return colorList[params.dataIndex]
               },
               label: {
                  formatter: "{c}" + "%", //显示柱子上的文字
                  show: true,
                  position: [20, 27],
                  textStyle: {
                     fontWeight: "bolder",
                     fontSize: "16",
                     color: "#fff"
                  }
               }
            }
         }
      },
      // 顶部的椭圆形(象形柱图):pictorialBar
      {
         type: "pictorialBar",
         symbolSize: [40, 64],
         symbolOffset: [1, 0],
         z: 12,
         symbolPosition: "end",
         color: "#bbbbbb",
         data: [60, 50, 90, 55, 25]
      }
   ]
};