const dataSource = [
{value: '8',unit: '个',name: '事件1',},
{value: '1',unit: '个',name: '事件2',},
{value: '2',unit: '个',name: '事件3',},
{value: '3',unit: '个',name: '事件4',},
{value: '8',unit: '个',name: '事件5',},
{value: '1',unit: '个',name: '事件6',},
{value: '2',unit: '个',name: '事件7',},
];
option = {
backgroundColor: '#00000d',
tooltip: {
trigger: "axis",
},
grid: {
containLabel: true,
left: "4%",
right: "5%",
bottom: "2%",
top: '30',
},
dataZoom: [ //滚动条
{
show: dataSource.length > 4 ? true : false,
type: 'slider',
realtime: true,
startValue: 0,
endValue: 4,
yAxisIndex: [0],
top: '0%',
left: '0',
width: 0,
// height: "70%",
handleSize: 5,
borderColor: 'rgba(0,0,0,0)',
textStyle: {
color: 'transparent',
show: false
},
// filterMode: 'filter',
// filterMode: "empty",
showDetail: false,
zoomLock: true
},
],
xAxis: {
name: '',
show: true,
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: "#61738C",
type: "dashed"
}
},
axisLabel: {
textStyle: {
color: "#b3c7c9",
fontSize: 12
},
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: "#15588b"
}
},
axisTick: {
show: false //不显示刻度
}
},
yAxis: [{
// name: "三方",
type: 'category',
inverse: true,
axisLabel: {
margin: 10,
color: '#b3c7c9',
fontWeight: 400,
fontSize: 12,
interval: 0,
formatter: function(value) {
let str = "";
let num = 4; //每行显示字数
let valLength = value.length; //该项x轴字数
let rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (let i = 0; i < rowNum; i++) {
let temp = "";
let start = i * num;
let end = start + num;
temp = value.substring(start, end) + "";
str += temp;
}
return str;
} else {
return value;
}
},
},
splitLine: {
show: false,
lineStyle: {
color: "#61738C",
type: "dashed"
}
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: "#15588b"
}
},
axisTick: {
show: false //不显示刻度
},
data: dataSource.map((item) => item.name),
}],
series: [{
type: 'bar',
// showBackground: true,
barMinWidth: '10',
backgroundStyle: {
opacity: 1,
color: '#1f4365',
},
yAxisIndex: 0,
data: dataSource.map((item) => item.value),
barWidth: 20,
// align: left,
stack: "2",
itemStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#00d5fc",
},
{
offset: 1,
color: "#1280eb",
},
]),
},
},
markLine: {
symbol: 'none', //去掉箭头
data: [{
type: 'average',
name: '平均数'
}],
label: {
position: 'start',
// formatter:'{c}%',
formatter: ({
name
}) => {
return `{a|${'平均数'}}`
},
align: 'center',
rich: {
a: {
// height: 30,
color: '#fff',
backgroundColor: "#00a8ff",
padding: [6, 8],
// margin: [0,0,'-10',0],
borderColor: '#7cd1e0',
borderWidth: 0,
borderRadius: 10
},
},
},
lineStyle: {
color: '#00a8ff'
}
},
},
// {
// z:1,
// type: 'pictorialBar',
// symbolPosition:'end',
// symbolRotate:'0',
// symbolSize: [10,20],
// // color:'rgb(4,128,224)',
// data: dataSource.map((item) => item.value),
// symbol: 'roundRect',
// symbolOffset: ['52%',0],
// itemStyle: {
// color: 'white',
// shadowColor: 'rgba(29,255,252, 0.8)',
// shadowBlur: 10,
// },
// },
{
type: 'pictorialBar',
data: dataSource.map((item) => item.value),
xAxisIndex: 0,
yAxisIndex: 0,
zlevel: 99,
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAACXBIWXMAAAsTAAALEwEAmpwYAAANd2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTA5LTEyVDEwOjU3OjI5KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIj4gPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4gPHJkZjpCYWc+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBlNmFkMzNhLTA4NTQtZDU0My1iNDRmLTc1NjU0YTllOTc5NjwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyZTk5NDVhNS00MDYyLWFkNDgtODIxYS1lZjBmYjk2M2NlMmE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NDVmYTAzYmMtMjIzYS02MjQ5LWJjYTktM2Y0NzYyOTc1YzkxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQ5NzI2Mzc1LThlYWYtMzQ0Yy1hZWZlLWFmMzhiODgzM2RiMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1MDk1ZGI4Zi1jNzhhLTBkNGItYWUzYi05Njc1MmVmZjYwY2M8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NWFmMjQ1MjgtOTgwNC0xMWViLWI5Y2MtOWRlMzRhYTk0NzgyPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYwYTNjNGQ3LTJhOTctNWY0YS05ZmUxLTQ2MWJjZDNjM2YwMDwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo3NmE4M2NiYS1jMDI2LWFlNGYtOThiZi03ODYzNjQyNjRiZWE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6N2UzN2M3YWQtOGJmNi0xZjRhLTljM2EtZGI5ODZhMmE1Y2UxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1ODljZDg5LTI4MTgtNzU0Yy1iYzMxLWYyOTllYmMzNTVmNzwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMGZmZDEzMy00MmQzLTQ1NGMtOTE0OS0wYzBlMWU4ZjZiNDk8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6Y2ZlMDZjNmEtNTkxNC1hNDQwLWI1M2QtMTcxMzRlZjU4YmVhPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRjMTRhNTY3LTNhMzEtNGU0ZS04MzVlLWRkZjYxYTc1ODEwMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmOTdiODc1My1kMTUwLWQzNGYtOGJkMy04NmE2N2JlN2MyZTM8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjA4NzhmNzk4LWFhNWItZjY0Yy05NGYxLTE2MWEzNmFkMzhiODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6NzkwZDBmMTAtOThiNC04MTQyLThlOWUtYTcyMDI5YjlkZWVkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo3RUUyNEQ2NzJDNjgxMUVEQjgzNTg0MkY5REY0ODA3MDwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6N0VFMjRENkIyQzY4MTFFREI4MzU4NDJGOURGNDgwNzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjdjYjU4ZDU3LTYyZTItYmI0OC1iNzMzLTY0OWM3ZmFlNzBjYTwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6OGY5YWY5N2QtMzc2MC00YTQ0LThiMDItYjZmZDk3NzdmYzFjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo5MEMzRjhEQjU5MjgxMUVEQkU0N0E4NEU5RDRDQjEyODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6YmQyNmMzMDEtMTBiMS04YjQyLWE3OTItMWFjZmIzNDFhZDlkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpjMGI0NWJiNi1mMmU1LWZiNDgtOTI2Mi04ZDJiYWRlZTMzYzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmMzY2YwMzhhLTg3MjItY2I0ZC1hYjBlLTBiMWJhZWU1MWJhZjwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6Y2NjN2M2ZTYtM2FiOC0zYjRhLWE5OGMtMzY0YjNlZGQxM2VjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpkMmFkYTk1ZC0xZjcwLWNkNGQtYWRjZi1mZDA1NTYwNzA3MDI8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmViNjQwZTFmLTkxNDgtZWI0MS04MjNlLTE5MDUwMzhkYjdlYzwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjgwZTZjZGE1LWZhMWItMTU0My1hYTc5LWEyNGM1MTM1ODQxMyIgc3RFdnQ6d2hlbj0iMjAyMy0wOS0xMlQxMDo1NzoyOSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHN0RXZ0OndoZW49IjIwMjMtMDktMTJUMTE6MTc6NDgrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7E/Bf0AAACe0lEQVRIiZWUXU/UQBRAz522tCwfGyTxxZiIRoUgYqLGN3+Ef8uf5ZvBBAVUjKImvvgACWbRdvtxfehMd3YpZLaPTXrm5PTekdta4Z74tDZADKTAAFgF1oD1ai16jWGbkEf5GZ/Vr8zMawEMkAAZsAQMNZI7GLaCwIDU+hbIOnh8WouFR5fgmby0h4bBC30HJP4HzjoGFix8GRhqwrNQMMqpyfUXINfBF4ElNdzUSDaCrUs9cscY6E3ifuiyZua5fR/0mLF+ACqgcuZ9SVrzJHBCAJRzKfQEKICyD+7MFzHc0FjuhrKl1GNgBPwDcnNFkgwYNJl5Yg8Mg491H/gL5MDYXGk9f5KRKfTYgxez8ElvYaix3Au2rvQzXhJsc5fErb1NIrv2sDB4OyUXFl5gs/jWkyQL8igUjHJhCv3oWY+xo3i5tzDUSO4HW1f6BWWE9zMdvC/JDkIaDB/rAW0SBy59uD8lA01kJxSMkptCDz3rwsKby72FVY3nTvIHb0po1792d3dn3aSyjbAYDC/1wFp3UwLU2IsrYTLfA12Qx6FglMLkHdwlqSy8MUwvzorG8iDYutavKOeetUvSQDuGnXWTyhbCUjB8MiV+EgdXw/Ti7IaCgdLk+p7+JFqtRzPwWB4GW1f6zSbJ8RbHWUObpZ3tVDYRVoLhJYdMJ/F7d/C293xJKpM3+0yPYImXxDdf1kQ2g60rPaHh7DprB081lQ2EYTC85IhJkt7eDh418ywO1JI3e9Ddgr1JHFw0Cb+7pea7NPz2zHutAUyTyi2E9WB4qXvAuTW/MgmA0UyehoKBRgp9Y+FueXqTtPBIXoSj+SSV/pgxL/usAf4DUH06aIViPR0AAAAASUVORK5CYII=',
symbolRotate: 0,
symbolSize: [15, 20],
symbolPosition: 'end',
symbolOffset: [8, 0],
itemStyle: {
color: '#1dfffc',
shadowColor: 'rgba(29,255,252, 0.8)',
shadowBlur: 10,
},
tooltip: {
show: false
},
},
],
};