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: {
         3,
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        shadowBlur: 8,
        shadowColor: "rgba(0, 0, 0, 0.2)"
      }
    },
    areaStyle: { // 区域填充样式。（不写，默认不绘制）
      color: "#000",
      opacity: 0.1, // 0时，为不绘制图形
    },
    lineStyle: {
      normal: {
         1
      }
    },
    //radarIndex: 0, // 多个雷达图时，分配数据用
    data: [{
        value: [4300, 10000, 28000, 35000, 50000, 19000],
        name: "预算分配（Allocated Budget）",
        lineStyle: { // 样式可以单独设置，也可以一起设置
          normal: {
             2
          }
        },
        itemStyle: {
          normal: {
            color: "#e82821"
          }
        }
      },
      {
        value: [5000, 14000, 28000, 31000, 42000, 21000],
        name: "实际开销（Actual Spending）"
      }
    ]
  }]
};