Echarts在线免费图表

 
            const legendData = [
   { name: '人像抓拍', value: '78' },
   { name: '车辆抓拍', value: '78' },
   { name: '普通监控', value: '78' }
]
const x = legendData.map((item) => item.name)
const y1 = legendData.map((item) => item.value)
let maxNum = 0
legendData.map((item) => {
   if (item.value > maxNum) {
      maxNum = item.value
   }
})
option = {
   grid: {
      // top: 20,
      // left: '0%',
      // right: 0,
      // bottom: 10,
      // containLabel: true
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'none',
         shadowStyle: {
            color: 'rgba(216, 230, 255, .2)'
         },
         label: {
            show: false,
            color: '#517FFD',
            backgroundColor: 'transparent',
            fontSize: 12
         }
      },
      className: 'my-tooltip-box',
      formatter: (params) => {
         var str = `<div class="my-tooltip">${params[0].name}<br/>`
         params.forEach((el) => {
            if (el.seriesName !== 'maxdata') {
               str += `<div><span class="name large"></span><span class="value">${el.value}</span></div>`
            }
         })
         str += '</div>'
         return str
      }
   },
   legend: {
      show: false
   },
   xAxis: {
      data: x,
      axisLine: {
         show: false // 隐藏X轴轴线
      },
      axisTick: {
         show: false // 隐藏X轴刻度
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: '#9B9B9B', // X轴文字颜色
            fontSize: 12
         }
      }
   },
   yAxis: [
      {
         type: 'value',
         name: '',
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: '#9B9B9B',
               fontSize: 12
            }
         }
      }
   ],
   series: [
      {
         name: '数量',
         type: 'bar',
         barWidth: 8,
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: '#84A5FF' // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#567EFD' // 100% 处的颜色
                  }
               ],
               global: false // 缺省为 false
            }
         },
         emphasis: {
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#83E3C6' // 0% 处的颜色
                     },
                     {
                        offset: 1,
                        color: '#6ED3B5' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               }
            }
         },
         data: y1,
         zlevel: 10
      },
      {
         name: 'maxdata',
         type: 'custom',
         itemStyle: {
            normal: {
               color: '#F5F6F8' // 默认颜色
            },
            emphasis: {
               color: '#F5F6F8' // 鼠标移入时的颜色（透明）
            }
         },
         renderItem: (params, api) => {
            // 获取对应类目的axisTick中心点坐标
            var start = api.coord([api.value(0)])

            // 通过坐标系的宽度和类目数，计算单个类目的背景
            var width = (params.coordSys.width / 7) * 0.9

            return {
               type: 'rect',
               shape: {
                  // 相对左上角坐标
                  x: start[0] - width / 2,
                  y: params.coordSys.y,
                  width: width,
                  height: params.coordSys.height
               },
               style: api.style()
            }
         },
         data: x.map(() => 0)
      }
   ]
}