dataZoom: [
{
borderColor: "transparent",
showDataShadow: false,
start: 0,
end: 70,
labelFormatter: function(value) {
return "";
},
zoomLock: true,
height: 2,
bottom: "1%",
id: "dataZoomX",
type: "slider",
show: true, //true 或 false 是否显示滚动条
xAxisIndex: [0],
filterMode: "filter"
}
],
getQueryDepart(xdata, ydata) {
let dataZoomShow = false;
if (xdata.length > 1) {
dataZoomShow = true;
}
const option = {
dataZoom: [
{
borderColor: "transparent",
showDataShadow: false,
start: 0,
end: 70,
labelFormatter: function(value) {
return "";
},
zoomLock: true,
height: 2,
bottom: "1%",
id: "dataZoomX",
type: "slider",
show: dataZoomShow,
xAxisIndex: [0],
filterMode: "filter"
}
],
grid: {
containLabel: true,
left: "5%",
right: "2%",
bottom: "4%",
top: "10%"
},
tooltip: {
trigger: "axis",
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(13,5,30,.6)",
borderWidth: 1,
padding: 5,
textStyle: {
color: "#fff"
},
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(255,255,255,0.07)",
width: "1"
}
},
formatter: function(parms) {
var str =
parms[0].marker +
parms[0].axisValue +
"：" +
parms[0].value +
"次";
return str;
}
},
xAxis: {
axisLabel: {
color: "#fff",
fontSize: fontChart(14),
interval: 0,
formatter: function(params) {
let newParamsName = "";
const paramsNameNumber = params.length; // 文字总长度
const provideNumber = 3; // 一行显示几个字
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
const start = p * provideNumber;
const end = start + provideNumber;
const tempStr =
p === rowNumber - 1
? params.substring(start, paramsNameNumber)
: params.substring(start, end) + "\n";
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: { color: "rgba(255,255,255,0.2)", width: 1 }
},
axisLine: {
show: true
},
data: xdata,
type: "category"
},
yAxis: {
axisLabel: {
color: "#fff",
fontSize: fontChart(14)
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: { color: "rgba(255,255,255,0.2)", width: 1 }
},
axisLine: {
show: false
},
name: ""
},
series: [
{
data: ydata,
type: "bar",
barWidth: fontChart(15),
// barGap: '-100%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#0BD7FA"
},
{
offset: 1,
color: "#3761FE"
}
],
false
)
}
},
label: {
show: false
}
},
{
data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
type: "bar",
barMaxWidth: "auto",
barWidth: fontChart(15),
barGap: "-100%",
zlevel: -1,
itemStyle: {
color: "rgba(187,230,245,0.22)"
}
}
]
};
const myChart = this.$echarts.init(this.$refs.queryDepart);
option && myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
// this.setIntervals(option, myChart)
},