描述
在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。此次需要定制的图表是雷达图。
我们先来看一下UI设计稿中的图表：
其次再看一下eCharts官网默认的图表：
通过和官网的图表demo作对比，我们需要对雷达图的覆盖区域颜色、网格线颜色、网格线背景、每个拐角的label颜色进行定制，其余的配置我们可以通过简单的初始化配置图表即可实现。
目前使用的eCharts是最新版的4.5.0版本。
操作步骤
1、官网提供的可以修改覆盖区域颜色的配置项是itemStyle和areaStyle两个属性来实现，此处的itemStyle属性和玫瑰图中配置各项数据的itemStyle属性可不同，它是在series属性下的一个属性，具体代码如下所示：
series: [
{
type: 'radar',
tooltip: {
trigger: 'item',
},
itemStyle: { //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
color: '#5840D4',
borderColor: '#5840D4',
},
areaStyle: {
color: '#5840D4',
},
data: [
{
value: _self.radarData.valueData,
name: '建设用地用途情况',
},
],
},
],2、网格线颜色、网格线背景、每个拐角的label颜色的配置需要在radar属性里进行配置，代码如下：
radar: [
{
indicator: _self.radarData.textData,
center: ['50%', '50%'],
radius: '60%',
splitLine: { //配置雷达图的每一圈的网格线颜色
lineStyle: {
color: '#262732',
},
},
splitArea: { //配置雷达图的网格线背景
show: false,
},
name: { //配置雷达图的每个指示器的名称颜色
textStyle: {
color: '#838D9E',
},
},
axisLine: { //配置雷达图的射线样式颜色
lineStyle: {
color: '#262732',
},
},
},
],3、最终效果如下图所示：
总结
以上定制的过程其实都是查阅eCharts官网的API文档实现的，所以在每类图表定制的时候，查阅API文档是最有效、准确的方法途径，参考地址如下：https://www.echartsjs.com/zh/tutorial.html#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F
