柱状图的一些样式配置:
例1:
this.chart.setOption({
backgroundColor: 'transparent', // 设置背景颜色
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
top: '17%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: xAxisData,
// 轴文字
axisLabel: {
show: true,
color: 'rgba(107, 158, 221, 1)',
fontSize: 12,
},
// 轴刻度
axisTick: {
show: false,
},
// 轴线
axisLine: {
show: true,
lineStyle: {
color: 'rgba(186, 198, 208, 1)',
},
},
},
],
yAxis: [
{
type: 'value',
name: yAxisName,
nameTextStyle: {
color: '#6B9EDD',
fontSize: 12,
fontWeight: 400,
padding: [0, 0, 0, 0], //name文字位置 对应 上右下左
},
// 轴刻度
axisTick: {
show: false,
},
splitArea: { show: false },
// 网格线
splitLine: {
show: true,
lineStyle: {
//分割线
color: 'rgba(178, 194, 211, 0.5)',
width: 1,
type: 'dashed', //dotted:虚线 solid:实线
},
},
// 轴线
axisLine: {
show: false,
},
// 轴文字
axisLabel: {
color: 'rgba(107, 158, 221, 1)',
fontSize: 12,
},
},
],
series: [
{
name: '',
type: 'bar',
stack: 'vistors',
// 柱子的宽度
barWidth: '30%',
data: seriesData,
// 柱子颜色的渐变
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: '#20C1D9' },
{ offset: 1, color: 'rgba(33,179,200,0)' },
],
false,
)
},
},
},
},
],
})