实现效果如图所示：
代码展示
function echart_3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_3'));
var barWidth = 15;
var cahoqi_data=[410, 420, 520, 520, 610];//data: [410, 420, 520, 520, 610]
var jinchaoqi_data=[310, 120, 420, 220, 510];
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '超期',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 1, color: 'rgba(11, 151, 232, 1)' }
]
} //盖子的颜色
}, {
name: '近超期',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 1, color: 'rgba(184, 91, 225, 1)' }
]
} //盖子的颜色
}, '4'],
selectedMode: false,//取消图例上的点击事件
x: 'center',
bottom: '2%',
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 50,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
triggerEvent: true,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
// data: xAxisData,
data: ['1月', '2月', '3月', '4月', '5月'],
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
z: 2,
name: '超期',
type: 'pictorialBar',
symbolPosition: 'end',
data: cahoqi_data,
symbol: 'diamond',
symbolOffset: ['-70%', '-40%'], //盖子的位置
symbolSize: [15, 13], //盖子的大小
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgb(7,108,196)' },
{ offset: 1, color: 'rgba(30, 169, 237, 1)' }
]
} //上方菱形颜色设置
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '超期',
barWidth: barWidth,
barGap: '50%',
data: cahoqi_data,
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 0.5, color: 'rgba(11, 151, 232, 1)' },
{ offset: 0.5, color: 'rgba(10, 57, 123, 1)' },
{ offset: 1, color: 'rgba(16,78,145, 1)' }
]
}
}
},
{
z: 2,
name: '近超期',
type: 'pictorialBar',
symbolPosition: 'end',
data: jinchaoqi_data,
symbol: 'diamond',
symbolSize: [15, 13], //盖子的大小
symbolOffset: ['70%', '-40%'],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(220, 149, 251, 1)' },
{ offset: 1, color: 'rgba(119, 62, 247, 1)' }
]
}
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '近超期',
barWidth: barWidth,
// barGap: '-50%',
data: jinchaoqi_data,
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 0.5, color: 'rgba(184, 91, 225, 1)' },
{ offset: 0.5, color: 'rgba(50, 13, 133, 1)' },
{ offset: 1, color: 'rgba(90, 45, 192, 1)' }
]
}
}
},
]
};
// // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
重点部分：
对于柱状图颜色的设置：
(1): 其中柱状图的最上方的斜边形设置为type:‘pictorialBar’,
symbol: ‘diamond’, 菱形
symbolPosition: ‘end’,
(2):对于柱状图本身的设置 type: ‘bar’,
