文章目录

效果展示

需求

  • 保留symbol
  • 不同类不同单位
  • 日期和内容颜色分别设置
  • 背景色、外阴影

实现

<mark>formater中params可以打印出来看看</mark>

  • 这里有三类 所以数组有三项
  • color：数据图形的颜色
  • name：x轴对应数据
  • seriesName：类目名
  • value：类目数值
  • maker：默认的symbol图标
  • 遍历params，处理后的返回值是你想要展示的格式 
tooltip: {
   
    trigger: 'axis',
    axisPointer: {
   
        type: 'none' // 隐藏坐标轴显示器
    },
    backgroundColor: 'rgba(255, 255, 255, 0.95)', // 背景色设置
    formatter: params => {
   
        var res = '<p style="color:#A6ACBE;lineHeight:100px;">' + params[0].name + '</p>'; // 用dom包裹并定制样式
        var unit = '℃'
        for (var i = 0; i < params.length; i++) {
   
          var unit = '℃'; // 分别设置单位
          if(i===1) unit = '%';
          if(i===2) unit = 'pa';
          res +=
            '<p style="lineHeight:60px;">' +
            params[i].marker + ' ' +
            params[i].seriesName +
            "： " +
            params[i].data + unit + '</p>';
        }
        return res;
    },
    textStyle: {
    // tooltip内文本样式设置
      color: '#666666',
      fontSize: 12,
      lineHeight: '100px',
    },
    extraCssText: 'box-shadow: 0px 1px 5px rgba(166, 188, 208, 0.4);padding: 10px;' // 外阴影设置
},