echarts实现雷达图----高度自定义化

在项目里面遇到这样的需求，后台管理系统首页dashboard有一处需要展示对几个指标的监视， 分别有目标值和实际值，所以需要用到雷达图，当然样式需要与系统整体色系一致，那我就基于echarts官方文档的实例进行样式改造。项目使用的框架是vue，我们首先看看效果图：

实际代码如下：

结构：

<div class="radar_container" ref="radarcontainer"></div>

JS:

mounted() {
    let radarcontainer = this.$echarts.init(this.$refs.radarcontainer);
    radarcontainer.setOption({
      backgroundColor: "#293440",
      textStyle: {
        color: "#FFF"
      },
      tooltip: {
      },
      toolbox: {
        show: true,
        orient: "horizontal",
        showTitle: true,
        itemGap: 10,
        itemSize: 16,
        feature: {
          dataView: { show: true, readOnly: true },
          // magicType: { show: true, type: ["line", "bar"] },
          // restore: { show: true },
          saveAsImage: {
            show: true,
            type: "jpg",
            name: "目标与实际",
            backgroundColor: "#293440"
          }
        },
        right: 20,
        top: 20
      },
      grid: {
        // right: 200,
        // top: 100
      },
      legend: {
        icon: "circle",
        data: ["目标", "实际"],
        textStyle: {
          color: "#FFF"
        }
      },
      radar: {
        nameGap : 5, // 图中文字距离图的距离
        center: ['48%', '50%'], // 图的位置
        // shape: "circle",
        splitNumber: 6, // 雷达图圈数设置
        name: {
          textStyle: {
            color: "#fff",
            backgroundColor: "#FF3E00",
            borderRadius: 3,
            padding: [3, 5]
          },
          itemStyle: {
            normal: {
              color: "red"
            }
          }
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
          lineStyle: {
            color: "#293440"
          }
        },
        //雷达图背景的颜色
        splitArea: {
          show: true,
          areaStyle: {
            color: ['#293440', '#12171C'] // 图表背景的颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#293440" // 设置网格的颜色
          }
        },
        indicator: [
          { name: "品项1", max: 0.5 },
          { name: "品项2", max: 0.5 },
          { name: "品项3", max: 0.5 },
          { name: "品项4", max: 0.5 },
          { name: "品项5", max: 0.5 },
          { name: "品项6", max: 0.5 }
        ]
      },
      series: [
        {
          name: "目标 vs 实际",
          type: "radar",
          symbol: "angle", // 拐点的样式，还可以取值'rect','angle'等
          symbolSize: 8, // 拐点的大小
          areaStyle: {
            normal: {
            //   width: 10,
              opacity: 0.2
            }
          },
          data: [
            {
              value: [0.2, 0.4, 0.1, 0, 0.2, 0.3],
              name: "目标",
              itemStyle: {
                color: "#008DAD",
                lineStyle: {
                  // color: 'red'
                }
              },
              label: {
                normal: {
                  show: true,
                  formatter: params => {
                    return params.value;
                  }
                }
              }
            },
            {
              value: [0.2, 0.4, 0.1, 0, 0.1, 0.2],
              name: "实际",
              itemStyle: {
                color: "#4CD964"
              },
              label: {
                normal: {
                  show: true,
                  formatter: params => {
                    return params.value;
                  }
                }
              }
            }
          ]
        }
      ]
    });
  }

样式

@mixin radarContainer($width, $height, $bgc) {
  width: $width;
  height: $height;
  background-color: $bgc;
}
.radar_container {
  @include radarContainer(500px, 500px, #ccc);
}