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

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

灰太狼 2023-06-30 01:49 139阅读 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], // （顺时针左上，右上，右下，左下）
                    },
                }],
            };