象形柱状图效果如下:
option = {
grid: {
top: 30,
bottom: 20
},
// 双横坐标轴
xAxis: [{
type: 'category',
data: ['6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16'],
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#E5E6EB'
}
},
axisLabel: {
color: '#86909C',
fontFamily: 'font-family: AlibabaPuHuiTi_3_65_Medium',
fontSize: 11
},
splitLine: {
show: true,
lineStyle: {
color: '#EFF0F3',
type: 'dashed',
}
},
}, {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#E5E6EB'
}
},
axisLabel: {
color: '#86909C',
fontFamily: 'AlibabaPuHuiTi_3_65_Medium',
fontSize: 11
},
splitLine: {
show: true,
lineStyle: {
color: '#EFF0F3',
type: 'dashed',
}
},
}],
yAxis: {
type: 'value',
position: 'right', // 右侧显示纵坐标轴
minInterval: 1, // 刻度最小间隔1
max: (value) => value.max + value.max*0.1,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#E5E6EB'
}
},
axisLabel: {
color: '#86909C',
fontFamily: 'AlibabaPuHuiTi_3_65_Medium',
fontSize: 11
},
splitLine: {
show: false
},
splitNumber: 10
},
series: [
{
name: "动物监测(次)",
// 象柱形图
type: "pictorialBar",
barCategoryGap: "-50%",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z", // 自定义svg 图标-----三角锥形的关键
label: {
show: true,
position: 'top',
distance: 10,
color: '#4E5969'
},
itemStyle: {
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(23,119,255,0.9)"
},
{
offset: 1,
color: "rgba(51, 175, 255, 0.05)"
}
]
},
borderWidth: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(23,119,255,0.75)"
},
{
offset: 1,
color: "rgba(23,119,255,0)"
}
]
}
},
data: [
700,
800,
1000,
850,
900,
950,
880
],
z: 10
}
]
};