02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色

女爷i 2023-06-30 01:49 16阅读 0赞

### 描述 ###

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

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

![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][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

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

![202001132110371.png][]

![20200113211046123.png][]

![20200113211106227.png][]

通过和官网的图表demo作对比，我们需要对这三个图表定义的内容其实仅仅是各项数据的颜色配置，其余的配置我们可以通过简单的初始化配置图表即可实现。

目前使用的eCharts是最新版的4.5.0版本。

### 操作步骤 ###

在eCharts官网的参考文档中，配置颜色选项其实提供了两种方法：

1、配置各项数据的itemStyle；

2、配置visualMap属性。

由于visualMap属性暂时没有搞懂，并且实际项目中实例化出来的三个图表，由于各项数据之间的差值特别大，所以只需要配置itemStyle即可实现想要的效果，所以在此项目中采用了第一种方法。

itemStyle属性配置其实很简单，在我们的配置数据中，给每一个数据增加itemStyle属性即可，代码如下：

data: [{
                value: 182466.12,
                name: '旱地',
                itemStyle: {
                    color: '#6648FE',
                },
            }, {
                value: 532.49,
                name: '湿地',    // 此项的值和其余项相比差值太大，所以在前端页面渲染的时候根本看不到，所以可以不用配置颜色样式
            }, {
                value: 31234.11,
                name: '种植园地',
                itemStyle: {
                    color: '#2D99FE',
                },
            }, {
                value: 55147.28,
                name: '林地',
                itemStyle: {
                    color: '#4346D3',
                },
            }]

最后实现的效果如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5][]

###  总结 ###

以上定制的过程其实都是查阅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/20200113210949655.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/20200113211009669.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/20200113211021667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[202001132110371.png]: https://img-blog.csdnimg.cn/202001132110371.png
[20200113211046123.png]: https://img-blog.csdnimg.cn/20200113211046123.png
[20200113211106227.png]: https://img-blog.csdnimg.cn/20200113211106227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200113211327898.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 4]: https://img-blog.csdnimg.cn/20200113211331265.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 5]: https://img-blog.csdnimg.cn/20200113211348965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70