Echarts - 雷達圖（用過的屬性）

以下內容為其中一次寫雷達圖時用到的，當然很多都是基礎屬性，需要更全的屬性，請訪問 echarts 官網

注意：echarts 的樣式即可設置在公共屬性上，也可以在每一個 data 中單獨設置

option = {
  title: { // 標題
    text: "基礎雷達圖"
  },
  tooltip: { // 提示框
    confine: true,
    backgroundColor: "#fff",
    textStyle: {
      color: "#333",
      fontSize: 16,
      lineHeight: 16
    },
    padding: 15,
    borderWidth: 1,
    borderColor: "e1e3ec",
    axisPointer: {
      drossStyle: {
        color: "#999"
      }
    },
    extraCssText: "box-shadow: 0 0 0.05rem 0 rgba(0, 0, 0, 0.1)" // 自定義屬性
  },
  color: ["#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],
  legend: { // 圖例
    show: true,
    data: ["預算分配（Allocated Budget）", "實際開銷（Actual Spending）"]
  },
  radar: { // 雷達圖專用屬性
    shape: "circle", // "polygon"多邊形，"circle"圓型
    name: {
      textStyle: {
        color: "#333",
        backgroundColor: "#fff",
        borderRadius: 3,
        fontSize: 16,
        padding: [3, 5]
      }
    },
    indicator: [ // 指示器
      { name: "銷售（sales）", max: 6500 },
      { name: "管理（Administration）", max: 16000 },
      { name: "信息技術（Information Techology）", max: 30000 },
      { name: "客服（Customer Support）", max: 38000 },
      { name: "研發（Development）", max: 52000 },
      { name: "市場（Marketing）", max: 25000 }
    ],
    nameGap: 15, // 指示器名稱和指示器軸的距離。
    splitNumber: 5, // 指示器軸的分割段數。
    axisLine: { // 坐標軸軸線相關設置。
      lineStyle: {
        color: "rgba(204, 204, 204, 0.5)"
      }
    },
    axisTick: { // 坐標軸刻度相關設置。

    },
    axisLabel: { // 坐標軸刻度標簽的相關設置。

    },
    splitLine: { // 坐標軸在 grid 區域中的分隔線
      lineStyle: {
        color: "rgba(204, 204, 204, 0.5)"
      }
    },
    splitArea: { // 坐標軸在 grid 區域中的分隔區域 (背景色)
      show: false
    }
  },
  series: [{
    name: "預算 vs 開銷（Budget vs spending）",
    type: "radar",
    symbol: "circle", // 標記的圖形:"circle", "rect", "roundRect", "triangle", "diamond", "pin", "arrow", "none"
    symbolSize: 4,
    symbolRotate: 0, // 標記的旋轉角度。注意在 markLine 中當 symbol 為 "arrow" 時會忽略 symbolRotate 強制設置為切線的角度。
    emphasis: { // 高亮的樣式設置
      lineStyle: {
        width: 3,
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        shadowBlur: 8,
        shadowColor: "rgba(0, 0, 0, 0.2)"
      }
    },
    areaStyle: { // 區域填充樣式。（不寫，默認不繪制）
      color: "#000",
      opacity: 0.1, // 0時，為不繪制圖形
    },
    lineStyle: {
      normal: {
        width: 1
      }
    },
    //radarIndex: 0, // 多個雷達圖時，分配數據用
    data: [{
        value: [4300, 10000, 28000, 35000, 50000, 19000],
        name: "預算分配（Allocated Budget）",
        lineStyle: { // 樣式可以單獨設置，也可以一起設置
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: "#e82821"
          }
        }
      },
      {
        value: [5000, 14000, 28000, 31000, 42000, 21000],
        name: "實際開銷（Actual Spending）"
      }
    ]
  }]
};