[01] series eCharts style custom color histogram modification cylindrical, columnar shape, etc.

description

In the current project, UI design draft need to implement a system with a large screen home based on your home page you want to add some of eCharts maps and charts. However, according to UI design draft, if you want to achieve aesthetic purposes, the need for eCharts customization. Next we first first chart - bar chart, customize it.

We first look at the UI design draft of a histogram:

 

Second, let's look at the official website eCharts default bar chart:

 

Stun effect within DIV border can be removed or cut plan when to get through direct CSS background to achieve, but there is a bar graph we need to do to customize the original histogram official website, according to the comparison that may need to change the following parts:

• Histogram gridlines
• Horizontal bar graph, the longitudinal axis of the color
• Cylindrical shape and color

Currently eCharts are using the latest version of the 4.5.0 version.

 

Steps

After understanding about what needs customization, we then began to tailor our histogram.

1, the grid line modification

In the histogram, line style may be added to modify the mesh splitLine xAxis properties and to modify the attribute yAxis, specific code as follows:

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

2, horizontal, longitudinal axis of the color modification

Horizontal, longitudinal axis to modify the color by adding the attribute to modify axisLine xAxis splitLine properties and to modify the attribute yAxis, as follows:

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

3, a columnar shape and color modifications

In eCharts graph, histogram modification shapes and colors need to be modified to implement the series attribute, we here modified the width, color, and rounded columnar code is as follows:

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

By modifying at least three, we achieve a similar effect UI design draft, the complete code and the final results are as follows:

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], // （顺时针左上，右上，右下，左下）
                    },
                }],
            };

 

to sum up

More customization process actually API documentation eCharts official website to achieve, so in the chart when each type of customization, API documentation is the most effective and accurate method approach, refer to the following address: https: //www.echartsjs.com /zh/option.html#xAxis