欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts折线图显示坐标轴指示器并且格式化文本标签

程序员文章站 2022-06-01 22:53:55
...

效果如下图:
echarts折线图显示坐标轴指示器并且格式化文本标签
没进行格式化之前的效果(Y轴不是想要的效果):
echarts折线图显示坐标轴指示器并且格式化文本标签
X轴和Y轴都要加坐标轴指示器
代码如下:

        tooltip: {
          trigger: 'axis',
          // 坐标轴指示器
          axisPointer: {
            type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer
            label: {
              backgroundColor: 'rgba(0,122,255,0.6)', // 文本标签的背景颜色
              // 文本标签文字的格式化器
              formatter(a) {
              // 这里可以控制台输出一下参数a,看看里面有什么,再进行格式化
              // axisDimension可以判断是X轴还是Y轴,分别格式化X轴和Y轴的文字
                if (a.axisDimension === 'y') {
                  return parseFloat(a.value).toFixed(1) + '天';
                } else {
                  return a.value;
                }
              }
            }
          },
          backgroundColor: 'rgba(73,91,127,1)',
          formatter(a, b, c) {
			// 提示框浮层内容格式器,可根据需求进行格式化
          }
        },