03 【eCharts样式定制系列】雷达图自定义面积覆盖颜色

喜欢ヅ旅行 2023-06-30 06:46 1阅读 0赞

### 描述 ###

在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。此次需要定制的图表是雷达图。

我们先来看一下UI设计稿中的图表：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

其次再看一下eCharts官网默认的图表：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

通过和官网的图表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、最终效果如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

### 总结 ###

以上定制的过程其实都是查阅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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115143105558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200115143119807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200115143234472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70