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

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

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
        },
      },