echarts修改tootip弹框样式：

echarts修改tootip样式：

应项目需求 数据的大小决定着tootip弹框的颜色

先在echarts中模拟实现：看效果： （Email 是名称 132 是实时数据）

看代码：

option = {
  title: {
    text: 'Stacked Line'
  },
  //主要代码==================================================
  tooltip: {
    trigger: 'axis',
    backgroundColor: null,
    borderRadius:30,
    padding:0,
    formatter: function(params) {
      var result = '';
        params.forEach(function (item) {
          if (item.value < 120) {
            result =`<div style="color:#ffffff;background:green;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
          }else if(item.value < 140)  {
            result =`<div style="color:#ffffff;background:red;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
          }else {
            result =`<div style="color:#ffffff;background:purple;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
          }
          
        });
      return result;
    }
  },
  //主要代码=====================================================
  legend: {
    data: ['Email']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

再送大家一套tootip：

tooltip: {
         
          shadowColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
          shadowBlur: 0,
          confine: true,
          trigger: "axis",
          // triggerOn: "click", //点击触发tootip
          // alwaysShowContent: false, //一段时间自动消失
          backgroundColor: null,
          borderRadius: 30,
          borderColor: null,
          padding: 0,
          formatter: function (params) {
            let result = "";
            params.forEach((item) => {
              if (item.value === undefined) {
                result += `<div style="padding:54px 0;background:rgba(0,0,0,0)">
                  <div style="width:116px;text-align:center;line-height:32px;color:#ffffff;height:32px;background:green;border-radius:30px">
                  数值：--
                  </div>
                  </div>`;
              } else {
                result += `<div style="padding:54px 0;background:rgba(0,0,0,0)">
                   <div style="width:116px;text-align:center;line-height:32px;color:#ffffff;height:32px;background:green;border-radius:30px">
                   数值：${item.value} 
                   </div>
                </div>`;
              }
            });
            return result;
          },
          position: function (point, params, dom, rect, size) {
            return [point[0], "0%"];
            // let obj = {top: "0%"};
            // obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 5;
            // return obj;
          },
        },

按需要自己在主要代码中自行修改样式…完~