自定义echarts的tooltip显示内容和Y轴自定义内容

项目场景:

项目很多图表,但是Y轴展示不一样,但是自己只想用一个图表来展示


使用代码formatter函数:

           tooltip: {
            trigger: "axis",
            z: 30,
            backgroundColor: "#FFFFFF",
           formatter: function (params, index) {
              let titleName = params[0].seriesName;
              let retName = params[0].name;
              let res = params[0].value;
              if (
                newData.statas == "1"
              ) {
                var tooltipResult = "";
                switch (res / 1) {
                  case 1:
                    tooltipResult = "开";
                    break;
                  case 0:
                    tooltipResult = "关";
                    break;
                  default:
                    "-";
                }
                let toop =
                  retName +
                  ":" +
                  " <br/>" +
                  '<span style="display:inline-block;margin-right:5px;border- 
       radius:50%;width:15px;height:15px;left:5px;background-color:' +
                  params[0].color +
                  '"></span> ' +
                  titleName +
                  ":" +
                  tooltipResult;
                return toop;
              }}}

Y轴自定义实现方法:

yAxis: [
       axisLabel: {
                formatter: function (value, index) {
                  if (
                    newData.statas == "1"  
                  ) {
                    var result = "";
                    switch (value) {
                      case 1:
                        result = "开";
                        break;
                      case 0:
                        result = "关";
                        break;
                      default:
                        "-";
                    }
                    return result;
                  } 
                   } else {
                    return `${value} ${newData.units}`;
                  }
                   ]

设置间距:

             interval:
                newData.statas == "1"
                  ? 10
                  : newData.Id == "16"
                  ? 1
                  : newData.Id == "23"
                  ? 1
                  : newData.Id == "41"
                  ? 1
                  : Math.ceil(Math.max.apply(null, newData.dataY2) / 5),
              max:
                newData.statas == "1"
                  ? 1
                  : newData.Id == "16"
                  ? 3
                  : newData.Id == "23"
                  ? 3
                  : newData.Id == "41"
                  ? 2
                  : Math.ceil(Math.max.apply(null, newData.dataY2) / 5) * 5,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值