Echarts在线免费图表

 
            const data = [
   {name: 'XSS跨站', value: 259, block: 1, monitor: 258},
   {name: '频率限制', value: 197, block: 181, monitor: 16},
   {name: 'SQL注入', value: 193, block: 48, monitor: 145},
   {name: 'CSRF', value: 54, block: 53, monitor: 1},
   {name: '恶意广告检测', value: 18, block: 0, monitor: 18},
   {name: '其他防护', value: 49, block: 0, monitor: 0},
]

let totalNum = 0
data.map(item => totalNum += item.value)

option = {
   // 环形图中间默认显示文字
   title: {
      text: `{a|攻击总数}\n\n{b|${totalNum}}`,
      top: 'center',
      // left: 90,
      textStyle: {
         rich: {
            a: {
               fontSize: 22,
               padding: [0, 0, 0, 190],
               color: 'rgba(0,0,0,0.65)'
            },
            b: {
               fontSize: 26,
               padding: [0, 0, 0, 210],
               color: 'rgba(0,0,0,0.85)'
            }
         }
      }
   },
   tooltip: {
      backgroundColor: '#fff',
      extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
      padding: [12, 16, 12, 16],
      textStyle: {
         color: 'rgba(0,0,0,0.65)'
      },
      // 悬浮的位置可以调整，总距离左边10px
      position: (point) => {
         return ['10', point[1]]
      },
      formatter: (param) => {
         let {marker, name, value, data} = param
         let result = `<div>${marker}${name}</div>`
         result += `<div>攻击请求数：${value} 次</div>`
         result += `<div>拦截请求数：${data.block} 次</div>`
         result += `<div>监控请求数：${data.monitor} 次</div>`
         return result
      }
   },
   legend: {
      orient: 'vertial',
      itemWidth: 8,
      itemHeight: 8,
      right: 200,
      bottom: '40%',
      data: data,
      textStyle: {
         color: 'rgba(0,0,0,0.65)'
      },
      formatter: (name) => {
         const value = data.find(item => item.name === name).value
         return `${name}：${value} 次`
      }
   },
   color: ['#4168FF', '#47CBFF', '#FF7A33', '#45DE7F', '#FFAC34', '#5AD7D8', '#8163E9', '#FF5F45', '#01C581', '#B754F6', '#FCDA0F', '#9B501B', '#A0D911', '#2998FF', '#938BF8'],
   series: [{
      name: '攻击总数',
      type: 'pie',
      radius: ['30%', '40%'],
      center: ['30%', '50%'], // 图形位置
      label: { // 鼠标悬浮具体数据显示
         show: false
      },
      data: data
   }]
};