Echarts在线免费图表

 
            let legendData = ["数学", "英语", "语文", "生物", "化学", "历史","物理","政治","地理","美术","体育","音乐"];
let color = ["#FF6F89", "#00ADB1", "#FFE4E2", "#1ea5f5", "#FFAA7D", "#00DAFF","#0096D9","#30FCEE","#CC00FF","#9B3100","#EEA2AC","#009AFF"];
let color2 = ["#FF89FF", "#00ADB1","#0096D9","#30FCEE","#CC00FF", "#C59ECE", "#1ea5f5","#9B3100","#EEA2AC","#009AFF", "#FFAA7D", "#990033"].reverse();
let serieData = [];
for (var v = 0; v < legendData.length; v++) {
  var serie = {
    coordinateSystem: "polar",
    name: legendData[v],
    type: "lines",
    lineStyle: {
      color: color[v],
      width: 6,
      opacity: 0.8,
    },
    showSymbol: true,
    data: [
      {
        coords: [[0, 0], [70, (v + 1) * 30]],
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color[v]
              },
              {
                offset: 1,
                color: color2[v]
              }
            ]
          }, width: 4
        },
      },
    ],
    symbol: ['none', 'arrow'],
    symbolSize: 14,
    label: {
      //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
      show: true,
      position: "end",
      color:color[v],
      fontSize:16,
      distance:10,
      fontWeight:"bold",
      formatter: legendData[v]
    }
  };
  serieData.push(serie);
}
option = {

  backgroundColor: '#4D6483',
  polar: {
    center: ["50%", "54%"]
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  angleAxis: {
    // show: false,
    axisLabel: {
      show: false
    },
    type: "value",
    startAngle: 0,
    min: 0,
    max: 360,
    clockwise: false, //刻度增长逆时针
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(243, 142, 128,.4)"
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: "dashed",
      }
    },
    axisTick: {
      show: false
    }
  },
  radiusAxis: {
    //show: false,
    min: 0,
    max: 100,
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(102, 204, 255, .5)"
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisPointer: {
      show: false,
    }
  },
  animationDuration: 2000,
  series: serieData,
};