function contains(arr, dst) {
var i = arr.length;
while ((i -= 1)) {
if (arr[i] === dst) {
return i;
}
}
return false;
}
var attackSourcesColorStart = [
"#F99B97",
"#FF554E",
"#9BA6FA",
"#43F3E5",
"#5BC5F8",
];
var attackSourcesColorEnd = [
"#FF554E",
"#F79F16",
"#5D70FF",
"#08C6B7",
"#0D9DE2",
];
var attaData = [10,12,8,25,14,28,50,24];
var attaName = [10,12,8,25,14,28,50,24];
var topName = ['类别1类别1类别1类别1类别1类别1类别1类别1','类别2','类别3','类别4','类别5','类别6','类别7','类别8',];
var salvProMax = []; // 背景按最大值
for (let i = 0; i < attaData.length; i++) {
salvProMax.push(Math.max(...attaData));
}
function attackSourcesDataFmt(sData) {
var sss = [];
sData.forEach(function (item, i) {
const itemStyle = {
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: attackSourcesColorStart[i % 5] },
{ offset: 1, color: attackSourcesColorEnd[i % 5] },
]),
};
sss.push({
value: item,
itemStyle: itemStyle,
});
});
return sss;
}
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (prams) {
return prams[0].name + ":" + prams[0].value + '人';
},
},
grid: {
left: "18%",
right: "5%",
bottom: "0%",
top: "5%",
containLabel: true,
},
xAxis: {
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: topName,
},
yAxis: [
{
// 名称
type: "category",
offset: 140,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
color: "#333",
show: true,
interval: 0,
align: "left",
lineHeight: 20,
fontSize: 14,
fontWeight: 400,
formatter: function (value) {
if (value !== undefined) {
if (value.length > 9) {
// 超出5个字符显示省略号
return `${value.slice(0, 9)}...`;
}
return value;
}
},
},
data: topName,
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
color: "#262626",
fontSize: "14",
fontWeight: 500,
formatter: function (value, index) {
return value + "人";
},
},
data: attackSourcesDataFmt(attaName),
},
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: false,
},
},
pdaaing: [5, 0, 0, 0],
postion: "right",
data: attaName,
axisLabel: {
show: false,
},
},
],
series: [
{
zlevel: 1,
name: "",
type: "bar",
barWidth: "10px",
barCategoryGap: '100%',
animationDuration: 1500,
data: attackSourcesDataFmt(attaData),
align: "center",
itemStyle: {
borderRadius: 26,
},
label: {
show: false,
fontSize: 12,
color: "#333",
padding: [2, 0, 0, 0],
},
},
{
name: "",
type: "bar",
barWidth: 10,
barGap: "-100%",
barCategoryGap: '100%',
// margin: '20',
data: salvProMax,
itemStyle: {
color: "#E9EBF1",
fontSize: 12,
borderRadius: 26,
},
},
],
dataZoom: [
{
// 设置滚动条的隐藏或显示
show: true,
// 设置类型
type: "slider",
// 设置背景颜色
backgroundColor: "#e4e3e5",
// 设置选中范围的填充颜色
fillerColor: "rgba(144, 147, 153, .3)",
// 设置边框颜色
borderColor: "#e4e3e5",
// 设置圆角半径
borderRadius: 4,
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// 控制哪个轴，如果是number表示控制一个轴，
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "none",
// 滚动条高度
width: 8,
// 滚动条显示位置
height: "90%",
// 距离右边
right: 0,
// 控制手柄的尺寸
handleSize: 0,
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 组件离容器上侧的距离
// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
top: "middle",
minSpan: 25,
maxSpan: 25,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 控制哪个轴，如果是number表示控制一个轴，
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标移动能否触发平移
moveOnMouseMove: true,
// 鼠标滚轮能否触发平移
moveOnMouseWheel: true,
},
]
};