Echarts在线免费图表

 
            option = {
   //你的代码
   backgroundColor:"rgba(19, 21, 44, 1)",
   tooltip: {
      trigger: 'item',
      formatter: function (data) {
         // console.log(data);
      },
   },
   radar: [
      {
         indicator: [
            { text: 'Business Intelligent', max: 100, val: '32,387', position: 'center' },
            { text: 'IAM', max: 100, val: '32,986', position: 'right' },
            { text: 'Collaboration Office', max: 100, val: '35,341', position: 'right' },
            { text: 'Data Exchange Engine', max: 100, val: '39,382', position: 'left' },
            { text: 'ERP', max: 100, val: '25,926', position: 'left' },
         ],
         // indicator: indicatorData,
         splitNumber: 7,
         center: ['50%', '50%'],
         //shape: 'circle',
         name: {
            formatter: function (name, indicator) {
               if (indicator.position === 'left') {
                  return `{name|${name}}\n\n{val|${indicator.val}}`;
               } else if (indicator.position === 'right') {
                  return `{name2|${name}}\n\n{val2|${indicator.val}}`;
               } else {
                  return `{name3|${name}}\n\n{val3|${indicator.val}}`;
               }
            },
            rich: {
               name: {
                  color: '#B3B3B7',
                  align: 'left',
                  fontSize: 14,
               },
               val: {
                  color: '#FFFFFF',
                  align: 'left',
                  fontSize: 20,
                  fontWeight: 600,
               },
               name2: {
                  color: '#B3B3B7',
                  align: 'right',
                  fontSize: 14,
               },
               val2: {
                  color: '#FFFFFF',
                  align: 'right',
                  fontSize: 20,
                  fontWeight: 600,
               },
               name3: {
                  color: '#B3B3B7',
                  align: 'center',
                  fontSize: 14,
               },
               val3: {
                  color: '#FFFFFF',
                  align: 'center',
                  fontSize: 20,
                  fontWeight: 600,
               },
            },
            textStyle: {
               color: '#ffffff',
            },
         },
         splitArea: {
            areaStyle: {
               color: ['#16172D', '#36365C'],
            },
         },
         axisLine: {
            lineStyle: {
               color: '#5A5A89',
            },
         },
         splitLine: {
            lineStyle: {
               color: '#5A5A89',
            },
         },
      },
   ],
   series: [
      {
         type: 'radar',
         lineStyle: {
            normal: {
               color: '#99EFFA',
               width: 2,
            },
         },
         lable: {
            show: true,
         },
         itemStyle: {
            color: '#99EFFA', //顶点的颜色
         },
         data: [
            {
               value: [50, 20, 10, 60, 33],
               // value: valArr,
               name: '图一',
               symbolSize: 10,
               symbol: 'circle',
               areaStyle: {
                  color: {
                     type: 'radial',
                     x: 0.5,
                     y: 0.5,
                     r: 0.5,
                     colorStops: [
                        {
                           offset: 0,
                           color: 'transparent',
                        },
                        {
                           offset: 0.5,
                           color: 'transparent',
                        },
                        {
                           offset: 1,
                           color: 'rgba(59,101,251,.9)',
                        },
                     ],
                     globalCoord: false,
                  },
                  // opacity: 0 // 区域透明度
               },
               itemStyle: {
                  normal: {
                     color: '#000000', //拐点颜色
                     borderColor: '#99EFFA', //拐点边框颜色
                     borderWidth: 2, //拐点边框大小
                  },
                  emphasis: {
                     color: '#000000', //hover拐点颜色定义
                  },
               },
            },
         ],
      },
   ],
};