echarts地址: https://www.makeapie.com/editor.html?c=xPxuIEVpkt&v=1
效果图
代码
const barData = {
xaxis: ['A类', 'B类', 'C类', 'D类', 'E类', 'F类'],
series: [
{
name: '人才层次',
data: [10, 20, 30, 40, 50, 70],
},
],
unit: '',
colorArr: [
{
start: '#94DCFF',
end: 'rgba(2,143,255,0.00)',
},
],
splitLineHide: true,
grid: {
left: '120px',
top: '20px',
right: '0px',
bottom: '75px',
containLabel: false,
},
};
let normalColor = 'rgba(236,248,255,0.70)';
let seriesData = [];
barData.series.map((item, index) => {
let markPoint = item.data.map((item, index) => {
return {
coord: [index, item],
symbolSize: [70, 6],
symbolOffset: [0, 0],
symbol:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAGCAYAAAB+dujoAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAARqADAAQAAAABAAAABgAAAAA21lhRAAAAk0lEQVQ4EWNkAIGK/6YM/xkmAFl6QHyJgZGhgKGD8TRIatgDHH5nZKj6L8nwh+EaMAAEkALhAwMLgxZDG+NzJLHhx8TjdyaGfwy+aIECCgABqPjwCwxkH+HxOxOyulE2IgSYGJgYNgO5HxBCYNYHqDia8DDj4vE7E7gcYWJwAxa4x4D4C5gG8Yd7+QKKY5AfcfgdAKdZLnsJRWxDAAAAAElFTkSuQmCC',
};
});
let series = [
{
name: item.name,
type: 'bar',
data: item.data,
barGap: 10,
barWidth: '36px',
showBackground: true,
backgroundStyle: {
color: '#142032',
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: barData.colorArr[index].start,
},
{
offset: 1,
color: barData.colorArr[index].end,
},
],
globalCoord: false,
},
},
},
markPoint: {
data: markPoint,
},
z: 0,
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#142032',
},
},
symbolRepeat: 'fixed',
symbolMargin: 12,
symbol: 'rect',
symbolClip: true,
symbolSize: [36, 2],
data: item.data,
z: 1,
},
{
// 分隔
type: 'pictorialBar',
symbol:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAJCAYAAACR6WqOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAACQAAAAD1ojcWAAAByUlEQVRIDb1VPUhCURQ+V5/SUFM0tNTYbD9jZRRI0twSRbY1NAUGubw3ZCY0NbQpFC1tUQRCZtSY1txqYEM0GQj19PbdeiJPru9Heh74uO/83PPd83Hfe4xgnHM/lm1gGRgDXoBz4JAxVsfatfWFoqN1Vk9wonXiFOi6kWkj+2I+llF8wWTt8eLVlHLp2M3OjIIb9A1Let8httCNSN4I035CQyhS9muly3J71s53NDuK4mh0YNFsBwKlLfKm1J8wjV1OPPZ/N8ZEIXEgFKOswgJJN0I5mh1FRTBOSFiboRIEmmw63azK1OIs6VzFyxyW7Q8oCqmba7S6NP+bPr3Kk3p8Qt+6LisnYiyPXpr+lHuQFziLOpodRVW067do+QmBBizyHVNKKDpD1NA6CdPcuLe1QfGY+Py1LJ09p8RRphWQPTF2S9yn6c/X97K0XczR7I5UdHmDlPHINA6n4RWbszukyJdzZzQ8NGgqfXv/oJHIiinW0WFUIO5X3QrlZHbxB4sDVia+UZ4ayCuSA1Q8JUVzcNrPjiI/UABkVkDQ34ODpiTkqR7wOptdiAAINYtA1ViF77k4QgTwBAEhkrhJAuI56LVABrfl7D/DD469Dad7SgAAAABJRU5ErkJggg==',
symbolPosition: 'start',
symbolSize: [79, 9],
symbolOffset: [0, 15],
data: item.data,
z: 1,
},
];
seriesData = [...seriesData, ...series];
});
option = {
backgroundColor: "#0B1321",
grid: barData.grid,
tooltip: {
textStyle: {
fontSize: 48,
},
trigger: 'axis',
formatter: function (params) {
let str = '';
for (let i = 0; i < params.length - 2; i++) {
if ((!!params[i].value || params[i].value === 0) && params[i].axisValue !== '') {
str += params[i].axisValue + ': ' + params[i].value + '人<br/>';
} else if (params[i].axisValue !== '') {
str += params[i].axisValue + ': ' + '无数据' + '<br/>';
}
}
return str;
},
},
xAxis: [
{
type: 'category',
data: barData.xaxis,
axisPointer: {
type: 'shadow',
},
axisLabel: {
interval: 0,
margin: 25,
formatter: (value) => {
return `{a|${value}}`;
},
width: 100,
height: 56,
align: 'center',
backgroundColor: '#142032',
rich: {
a: {
fontFamily: 'MicrosoftYaHei',
color: normalColor,
fontSize: 36,
lineHeight: 58,
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
{
type: 'category',
show: true,
axisPointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
margin: 5,
formatter: (value) => {
return `{a|}`;
},
width: 72,
height: 9,
align: 'center',
backgroundColor: {
image:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAJCAYAAACR6WqOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAACQAAAAD1ojcWAAAAzElEQVRIDdVW0QmFMAwUC67iRo7iDM7hIl3AOVzAAfruIF+l9AISfQZCbXL1cqEtHQZYKSXBV/gBv2zkPDEfbeCZ4Bv8NOf3FM3L/4Onr90AGWPLMoLhTQIHG1LbFt0gELI5uSa2OeOJHeRO6dn6QKHcObWdD/BK7SOKWEQhKi+W/3VaaVvYoFlIUHmx3JXeG6hWrAG7FVLaZh4xXsw9O26V4FgM8lcuafBq7QDJc+jQ+EmISztA+ib/pHxdtFu7AbmTXnkHaSlxCKX9BzvcFPu+mRZJAAAAAElFTkSuQmCC',
},
rich: {
a: {
fontFamily: 'DINAlternate-Bold',
color: normalColor,
fontSize: 36,
lineHeight: 58,
},
},
},
data: barData.xaxis,
},
],
yAxis: [
{
type: 'value',
name: '',
splitNumber: 3,
nameTextStyle: {
fontFamily: 'PingFangSC-Regular',
color: normalColor,
fontSize: 36,
align: 'right',
padding: barData.namePadding,
},
axisLabel: {
formatter: '{value}',
align: 'right',
textStyle: {
fontFamily: 'PingFangSC-Regular',
color: normalColor,
fontSize: 36,
},
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
width: 3,
color: '#043147',
},
},
axisTick: {
show: true,
inside: true,
lineStyle: {
type: 'solid',
width: 3,
color: '#043147',
},
},
splitLine: {
show: barData.splitLineHide ? false : true,
lineStyle: {
type: 'dashed',
width: 3,
color: '#093D5D',
},
},
},
],
series: seriesData,
};