var data1 = [200, 100, 200, 50, 100];
option = {
backgroundColor: '#191970',
xAxis: {
data: ['北京', '上海', '深圳', '广州', '杭州'],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
fontSize: 20
},
margin: 40
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: true,
alignWithLabel: true,
inside: true
},
axisLine: {
show: true
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 20
}
}
},
grid: {
top: '20%',
bottom: '20%',
right: '10%',
left: '18%'
},
graphic: [
{
type: 'image', // 图形元素类型
id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
right: 'center', // 根据父元素进行定位 (居中)
bottom: '0%', // 根据父元素进行定位 (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
style: {
image:
'https://img0.baidu.com/it/u=3846011338,1538056540&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', // 这里一定要注意、注意,必须是https开头的图片路径地址
width: 1345,
height: 800
}
}
],
series: [
// 底部的光晕
{
name: '',
type: 'pictorialBar',
tooltip: {
show: false
},
symbolSize: [90, 40],
symbolOffset: [0, 20],
z: 1,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#26B2E8',
borderType: 'solid',
borderWidth: 4
}
},
data: [1, 1, 1, 1, 1]
}, {
//三个最低下的圆片
name: '',
type: 'pictorialBar',
symbolSize: [46, 22],
symbolOffset: [0, 11],
symbol: 'diamond',
z: 12,
itemStyle: {
opacity: 1,
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'red' // 100% 处的颜色
}
],
false
);
}
},
data: [0, 0, 0, 0, 0]
},
//下半截柱状图
{
name: '2020',
type: 'bar',
barWidth: 45,
barGap: '-100%',
itemStyle: {
opacity: 0.7,
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#26B2E8' // 0% 处的颜色
},
{
offset: 1,
color: '#26B2E8' // 100% 处的颜色
}
],
false
);
}
},
data: data1
},
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [46, 22],
symbolOffset: [0, -11],
symbol: 'diamond',
z: 12,
symbolPosition: 'end',
itemStyle: {
color: 'red',
opacity: 1
},
data: data1
},
]
};
如果要柱状立方体 symbol: 'diamond' 这个去掉即可!