Echarts在线免费图表

 
            const indicatorList = [
   {
      "text": "水果",
      "max": 95.93
   },
   {
      "text": "鲜花",
      "max": 88.51
   },
   {
      "text": "粮食",
      "max": 51.58
   }
];
let dataValue = [95.93, 88.51, 51.58]
option = {
   "color": [
      "#56A3F1"
   ],
   "radar": [
      {
         "axisName": {
            "rich": {
               "a": {
                  "fontSize": 14,
                  "color": "#333",
                  "fontWeight": 500,
                  "padding": [
                     0,
                     0,
                     0,
                     0
                  ]
               },
               "b": {
                  "fontSize": 18,
                  "fontWeight": 600,
                  "verticalAlign": "middle",
                  "color": "#358EFE",
                  "fontFamily": "DINAlternate-Bold, DINAlternate"
               }
            },
            formatter: function (name, indicator) {
               const text = indicator.text
               const index = indicatorList.findIndex(item => item.text === text)
               return `{a| ${name}}{b| ${dataValue[index]}}  `
            },
         },
         "nameGap": 8,
         "shape": "circle",
         "indicator": indicatorList,
         "center": [
            "50%",
            "53%"
         ],
         "radius": 100,
         "splitNumber": 3,
         "splitLine": {
            "lineStyle": {
               "color": [
                  "rgba(53, 142, 254, 0.40)",
                  "#E5E5E5",
                  "#E5E5E5"
               ],
               "type": [
                  5
               ]
            }
         },
         "splitArea": {
            "areaStyle": {
               "color": [
                  "#77EADF",
                  "#26C3BE",
                  "#64AFE9",
                  "#428BD4"
               ],
               "shadowColor": "rgba(0, 0, 0, 0.2)",
               "shadowBlur": 10,
               "opacity": 0
            }
         },
         "axisLine": {
            "lineStyle": {
               "color": "#eee"
            }
         }
      }
   ],
   series: [
      {
         "type": "radar",
         "radarIndex": 0,
         "data": [
            {
               "value": [
                  95.93,
                  88.51,
                  51.58
               ],
               "name": "Data D",
               "symbol": "none",
               "areaStyle": {
                  "color": "rgba(53, 142, 254, 0.25)"
               },
               "lineStyle": {
                  "join": "bevel"
               },
               "itemStyle": {
                  "borderType": "solid",
                  "borderWidth": 4,
                  "borderJoin": "bevel"
               }
            }
         ]
      }
   ]
};