01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等

灰太狼 2023-06-30 01:49 72阅读 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][]

除去DIV内边框的晕眩效果可以通过CSS或者直接拿切图当背景实现外，这里面的柱状图需要我们对官网原有的柱状图做定制，根据对比，可得知需要更改以下几部分：

*  柱状图网格线
 *  柱状图横、纵轴的颜色
 *  柱状的形状及颜色

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

### 操作步骤 ###

了解了大概需要定制哪些内容之后，我们接下来就开始定制我们的柱状图。

**1、网格线修改**

在柱状图中，修改网格线样式可以在xAxis和yAxis属性中添加splitLine属性来修改，具体代码如下：

xAxis: {
         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
         // 网格样式
         splitLine: {
             show: true,
             lineStyle: {
                 color: ['#262732'],
                 width: 1,
                 type: 'solid',
             },
         },
    },
    yAxis: {
        // 网格样式
        splitLine: {
            show: true,
            lineStyle: {
            	color: ['#262732'],
            	width: 1,
            	type: 'solid',
            },
        },
    },

**2、横、纵轴的颜色修改**

横、纵轴的颜色修改通过在xAxis和yAxis属性中添加splitLine属性来修改axisLine属性来修改，代码如下：

xAxis: {
    	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    	axisLine: {   //横轴样式
    		lineStyle: {
    			color: '#ffffff',
    		},
    	},
    },
    yAxis: {	//纵轴样式
    	axisLine: {
    		lineStyle: {
    			color: '#ffffff',
    		},
    	},                  
    },

**3、柱状的颜色和形状修改**

在eCharts图表中，修改柱状图的形状和颜色需要修改series属性来实现，在此处我们修改了柱状的宽度、圆角和颜色，代码如下：

series: [{
    	name: '销量',
    	type: 'bar',
    	data: [5, 20, 36, 10, 10, 20],
    	barWidth: 15,   //柱状宽度
    	itemStyle: {    //柱状颜色和圆角
    		color: '#F43368',
    		barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
    	},
    }],

通过以上三处的修改，我们实现了UI设计稿类似的效果，完整代码和最终效果如下所示：

const option01 = {
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            },
                        },
                        // 网格样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#262732'],
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            },
                        },
                        // 网格样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#262732'],
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                        barWidth: 15,
                        itemStyle: {
                            color: '#F43368',
                            barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
                        },
                    }],
                };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

### 总结 ###

以上定制的过程其实都是查阅eCharts官网的API文档实现的，所以在每类图表定制的时候，查阅API文档是最有效、准确的方法途径，参考地址如下：https://www.echartsjs.com/zh/option.html\#xAxis

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200113210336134.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/20200113210348761.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/20200113210611911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70