Echarts在线免费图表

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

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

option = {
   
   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)'
      },
      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) => {
         for (var i = 0; i < data.length; i++) {
            if (name == data[i].name) {
               return '{name|' + name + '}{num|' + data[i].value + '项}{value|' + data[i].monitor + '%}'
            }
         }
      },
      textStyle: {
         rich: {
            name: {
               fontSize: 14,
               fontWeight: 400,
               width: 100,
               height: 20,
               padding: [0, 0, 0, 5],
               color: 'rgba(0, 0, 0, 0.85)',
               fontFamily: 'Source Han Sans CN-Regular',
            },
            num: {
               fontSize: 14,
               fontWeight: 500,
               height: 20,
               width: 50,
               align: 'left',
               color: 'rgba(0, 0, 0, 0.65)',
               fontFamily: 'Source Han Sans CN-Regular',
            },
            value: {
               fontSize: 14,
               fontWeight: 500,
               height: 20,
               width: 50,
               align: 'left',
               color: 'rgba(0, 0, 0, 0.65)',
               fontFamily: 'Source Han Sans CN-Regular',
            }
         }
      }
   },
   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
   }]
};