Echarts在线免费图表

 
            const top5List = [
   {
      "usageRate": "100.00",
      "ip": "38号混泥土"
   },
   {
      "usageRate": "99.36",
      "ip": "56号混泥土"
   },
   {
      "ip": "78号混泥土",
      "usageRate": "80"
   },
   {
      "ip": "99号混泥土",
      "usageRate": "70"
   },
   {
      "ip": "38号混泥土",
      "usageRate": "60"
   }
]
let xaxis = top5List.map((item) => item.ip);
let yaxis = top5List.map((item) => item.usageRate);
let maxYaxis = top5List.map((item) => 100);
const color = ['#0193FB', '#0193FB', '#FFFFFF'];
option = {
   //你的代码
   backgroundColor: 'rgba(0, 0, 0)',
   // backgroundColor: 'rgba(0, 19, 86, 0.8)',
   grid: {
      show: true,
      borderColor: 'rgba(56,145,255, 0.4)',
      left: '4%',
      right: '11.5%',
      bottom: '5%',
      top: '9%',
      containLabel: true,
   },
   legend: {
      show: false,
      icon: 'roundRect',
      right: 40,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 5,
      textStyle: {
         fontSize: 12,
         color: '#9EEAFF',
      },
   },
   tooltip: {
      show: true,
      trigger: 'axis',
      confine: true,
      padding: 0,
      backgroundColor: 'rgba(1,1,1,0.5)',
      axisPointer: {
         type: "line",
         lineStyle: {
            color: '#6CC0FF',
            type: 'solid',
         },
      },
      borderWidth: 0,
      padding: 0,
      backgroundColor: "rgba(0,24,89,0.5)",
      formatter: function (params) {
         let str1 = ` <div class="toolTip">                
          <div class="toolTipHeader">                  
            <span class="toolTipValue">${params[0].seriesName}</span>
          </div>
          <div class="toolTipCon">`

         const htmlStr = `<div>          
          <span class="toolTipValue">${params[0].name}</span>：<span class="toolTipValue">${params[0].value}%</span>   
          </div>`;

         let str2 = ` </div>              
          </div>`
         return str1 + htmlStr + str2;
      },
   },
   xAxis: {
      boundaryGap: false,
      axisTick: { show: false },
      axisLine: {
         show: false
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(56,145,255, 0.4)',
            width: 1,
            type: 'solid',
         },
      },
      axisLabel: {
         show: true,
         //axisLabel的显示间隔interval字段,可以设置成 0 强制显示所有标签
         interval: 0,
         fontFamily: 'PingFangSC-Medium',
         fontSize: 14,
         color: '#9EEAFF',
         padding: [3, 0, 0, 0],
         formatter: '{value}%',
      },
      splitArea: {
         show: false,
         areaStyle: {
            color: ['rgba(56,128,255,0)', 'rgba(56,128,255, 0.1)'],
         },
      },
   },
   yAxis: [
      {
         name: '',
         nameTextStyle: {
            color: '#B3D2FF',
            fontSize: 12,
            padding: [10, 30, 0, 0],
         },
         min: 0,
         axisLine: {
            lineStyle: {
               color: 'rgba(56,145,255, 0.4)',
               width: 1,
            },
         },
         axisTick: { show: false },
         splitLine: {
            lineStyle: {
               color: 'rgba(56,145,255, 0.4)',
               width: 1,
               type: 'solid',
            },
         },
         axisLabel: {
            // formatter: function (params) {
            //   //只显示横线后面的ip
            //   var ind = params&&params.lastIndexOf('-');
            //   if(ind != -1){
            //     return params.substring(ind + 1)
            //   }else{
            //     return params
            //   }
            // },
            margin: 7,
            fontFamily: 'PingFangSC-Medium',
            fontSize: 14,
            color: '#9EEAFF',
            padding: [0, 0, 0, 0],
         },
         data: xaxis.reverse(),
      }
   ],
   series: [
      {
         barWidth: 12,
         name: '',
         type: 'bar',
         itemStyle: {
            barBorderRadius: [10, 10, 10, 10],
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                  { offset: 0, color: color[0] },
                  { offset: 0.6, color: color[1] },
                  { offset: 1, color: color[2] }
               ],
               global: false // 缺省为 false
            },
         },
         label: {
            show: true,
            position: 'right',
            textStyle: {
               color: '#ffffff',
               fontSize: 14
            },
            formatter: function (e) {
               return e.data + '%';
            },
         },

         data: yaxis.reverse()
      },

      {
         barWidth: 12,
         name: '',
         type: 'bar',
         barGap: '-100%',
         itemStyle: {
            barBorderRadius: [10, 10, 10, 10],
            shadowColor: '#3892FF',
            // shadowOffsetX: 3,
            // shadowOffsetY: -7,
            opacity: 0.2

         },
         data: maxYaxis,
         zlevel: -1,
         global: false // 缺省为 false
      }
   ]

};