该博客展示了如何使用ECharts库创建具有立体效果的柱状图。通过配置不同的symbolSize、symbolOffset和itemStyle，实现了不同年报上报率的立体展示，包括透明边框和颜色叠加，以增强视觉效果。
option = {
backgroundColor: '#0e202d',
tooltip: {},
xAxis: {
data: ["企业", "农专", "个体"],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#e54035'
}
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: '年报上报率4',
type: 'pictorialBar',
symbolSize: [100, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: '#14b11e'
}
},
data: [{
value: 100*2,
symbolPosition: 'end'
}, {
value: 50*2,
symbolPosition: 'end'
}, {
value: 20*2,//上下倆柱叠加值
symbolPosition: 'end'
}]
}, {
name: '年报上报率3',
type: 'pictorialBar',
symbolSize: [100, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: '#14b11e'
}
},
data: [{
value: 100,
symbolPosition: 'end'
}, {
value: 50,
symbolPosition: 'end'
}, {
value: 20,
symbolPosition: 'end'
}]
}, {
name: '年报上报率2',
type: 'pictorialBar',
symbolSize: [100, 45],
symbolOffset: [0, 20],
z: 12,
itemStyle: {
normal: {
color: '#14b1eb'
}
},
data: [100, 50, 20]
}, {
name: '年报上报率1',
type: 'pictorialBar',
symbolSize: [150, 75],
symbolOffset: [0, 37],
z: 11,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#14b1eb',
borderWidth: 5
}
},
data: [100, 50, 20]
}, {
name: '年报上报率',
type: 'pictorialBar',
symbolSize: [200, 100],
symbolOffset: [0, 50],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#14b1eb',
borderType: 'dashed',
borderWidth: 5
}
},
data: [100, 50, 20]
}, {
stack: '1',
type: 'bar',
itemStyle: {
normal: {
color: '#14b1eb',
opacity: .7
}
},
silent: true,
barWidth: 100,
barGap: '-100%', // Make series be overlap
data: [100, 50, 20]
}, {
stack: '1',
type: 'bar',
itemStyle: {
normal: {
color: '#14b11e',
opacity: .7
}
},
silent: true,
barWidth: 100,
barGap: '-100%', // Make series be overlap
data: [100, 50, 20]
}]
};
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
