- 首页 > it技术 > >
【记录】Echarts|【记录】Echarts 常用配置
//1.强制显示所有 x 轴数据
axisLabel:{interval:0}
//2.x轴过长换行
axisLabel:{formatter:(value) => value.replace(/'-'/, "\n")}
//3.图表提示不能超过页面边界
tooltip:{
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0;
// x坐标位置
var y = 0;
// y坐标位置// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 20;
// 自己定个x坐标值，以防出屏
y -= 15;
// 防止点被覆盖住，可根据情况自行调节
} else {
// 左边放的下
x = pointX - boxWidth - 15;
}// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight + 20 > pointY) {
y = pointY + 15;
} else if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y += pointY - boxHeight;
}
return [x, y];
}
}
//4.x/y轴常用配置
xAxis:{
splitLine: {//4.分隔线
show: false,
},
axisLine: {//坐标轴轴线
show: true,
lineStyle: {
color: "rgba(0,149,255,.8)",
},
},
axisTick: {//刻度线
show: false,
},
axisLabel: {//显示刻度标签文字
show: true,
interval:0,
rotate: 320,//x轴数据倾斜
textStyle: {
color: "#b2b2b2",
},
formatter: (value) => value.replace(/'-'/, "\n"),
//X轴过长换行
},
}
推荐阅读
