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)
},
echarts图 横向滚动条
星空小梦2023-10-12 10:59
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic有梦想的刺儿2 小时前
webWorker基本用法cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:清灵xmf3 小时前
TypeScript 类型进阶指南小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理qq_390161773 小时前
防抖函数--应用场景及示例334554324 小时前
element动态表头合并表格John.liu_Test4 小时前
js下载excel示例demo