记录Echarts 常用配置

Posted 2021-09-03 XiNine

//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轴过长换行
 },
}