echarts中给图表X轴和Y轴加单位以及给tooltip(提示框)增加单位

2023-12-28 21:02:56

在这里插入图片描述

左边没有单位,右图是增加单位的效果。

1.x轴y轴设置单位

增加单位不管是x轴还是y轴都可以设置name字段,设置完name后效果是红色箭头效果。如果想要蓝色箭头效果可以使用x轴y轴的都有的 axisLabel 属性里面有formatter配置项,formatter支持字符串模板和回调函数两种形式。

      xAxis: {
        name: '日期', //红色箭头效果
        type: 'category',
        data: this.dataList.map(item => item.name),
        //x轴 增加单位   蓝色箭头效果
        axisLabel: {
          formatter: '日期:{value}'
        }
      },
      yAxis: {
        name: '人', //红色箭头效果
        type: 'value',
        //y轴 增加单位  蓝色箭头效果
        axisLabel: { //刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
          formatter: '{value} 人'
        }
      },

2.tooltip(提示框)增加单位

tooltip(提示框)增加单位和x,y轴类似都有 formatter 配置项。我们console.log(params)查看返回值发现我们需要的数据都有,如此就可以for循环加拼接完成效果。
在这里插入图片描述

      //提示框
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          console.log(params);
          var relVal = '日期:'+ params[0].name
          for (var i = 0, l = params.length; i < l; i++) {
            relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' 人'
          }
          return relVal
        },
      },

文章来源:https://blog.csdn.net/qq_61869009/article/details/135276696
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。