Echarts在线免费图表

 
            
let dataList = [
   { "name": "Home", "value": "38" },
   { "name": "QLW", "value": "18" },
   { "name": "ZLW4.0", "value": "10" },
   { "name": "HQB", "value": "10" },
   { "name": "RLBG", "value": "5" },
   { "name": "TRP", "value": "4" }
]
const color1 = ['#323042', '#323042']
const color = [
   ['#00FFFF', '#0088CC'],
   ['#00FF80', '#009933'],
   ['#FFEA00', '#996100'],
   ['#FF7300', '#CC3A00'],
   ['#9500B3', '#550080'],
   ['#3377FF', '#243CB3']]
let data = []
let legendDate = []
// 循环添加数据
for (let i = 0; i < dataList.length; i++) {
   let tag = i % 5
   data.push({
      name: dataList[i].name,
      value: dataList[i].value,
      itemStyle: {
         //borderRadius: "50%",
         //颜色渐变
         color: {
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
               offset: 0,
               color: color[tag][0] // 0% 处的颜色
            }, {
               offset: 1,
               color: color[tag][1] // 100% 处的颜色
            }],
         }
      },
   });
   legendDate.push(dataList[i].name)
}


option = {
   backgroundColor: '#030312',
   tooltip: {
      trigger: 'item'
   },
   legend: {
      icon: 'circle',
      top: 'center',
      right: '10%',
      orient: "vertical",
      itemGap: 40,
      data: legendDate,
      // textStyle:{
      //       color:'#ffffff',
      //       fontSize:12,
      //    },
      textStyle: {
         // 个
         color: '#BBBBBB',
         rich: {
            name: {
               verticalAlign: 'right',
               align: 'left',
               width: 60,
               fontSize: 18,
               color: '#BBBBBB'
            },
            percent: {
               padding: [0, 0, 0, 8],
               fontSize: 18,
               color: '#BBBBBB'
            }
         },
         borderWidth: 53 // 间距的宽度
      },
      formatter: name => {
         console.log(name)
         const item = dataList.find(i => {
            return i.name === name
         })
         const p = item.value
         return '{name|' + name + '：}' + '{percent|' + p + '}' + '次'
      }

   },
   graphic: [{
      type: 'text',
      z: 100,
      left: '30%',
      top: 'center',
      style: {
         fill: '#FFFF',
         text: 8888,
         font: '80px Microsoft YaHei'
      }
   }, {
      type: 'text',
      z: 100,
      left: '35%',
      top: '55%',
      style: {
         fill: '#BBBBBB',
         text: '共计/次',
         // text: [
         //     '横轴表示温度，单位是°C',
         //     '纵轴表示高度，单位是km',
         //     '右上角有一个图片做的水印',
         //     '这个文本块可以放在图中各',
         //     '种位置'
         // ].join('\n'),
         font: '30px Microsoft YaHei'
      }
   }],
   series: [

      {
         name: '小环',
         type: 'gauge',
         splitNumber: 24,
         radius: '50%',
         center: ['40%', '50%'],
         startAngle: 0,
         endAngle: 360,
         axisLine: {
            show: false
         },
         axisTick: {
            show: true,
            lineStyle: {
               color: color1[1],
               width: 3,
               shadowBlur: 1,
               shadowColor: color1[1],
            },
            length: 20,
            splitNumber: 3
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false
         },
         detail: {
            show: false
         },
         data: 100
      },
      {
         name: 'Access From',
         type: 'pie',
         radius: ['50%', '70%'],
         center: ['40%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 0,
         },
         label: {
            show: true,
            formatter: '{b}：{d}%', // 用来换行
         },
         emphasis: {
            label: {
               show: true,
               fontSize: 40,
               fontWeight: 'bold'
            }
         },
         labelLine: {
            show: false
         },
         data: data
      }
   ]
};