echarts Tooltip DataRoom 的通用配置文件

Tooltip 是鼠标移入后电视的弹出窗效果 原本官网的配置是

略微有点丑，没有单位也没有好一点的UI 效果 所以就参考 arco.desigin 的样式配置了一个项目中基本都通用的

实际效果如下

JavaScript文件

export const tooltip = (lengthList = []) => {
  function getUnit(seriesName) {
    if (lengthList.length > 0) {
      return lengthList.find((item) => item.name === seriesName)?.unit || '';
    }
    return '';
  }
  return {
    show: true,
    trigger: 'axis',
    backgroundColor: 'transparent',
    borderColor: '#F4F7FC',
    borderRadius: 6,
    padding: 0,
    textStyle: {
      color: '#1D2129',
      fontSize: 14,
    },
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
    formatter: (params) => {
      let realVal = '';
      for (let i = 0; i < params.length; i += 1) {
        realVal += `
                  <div
                    style="
                      min-width:164px;
                      height:32px;
                      display:flex;
                      gap:20px;
                      align-items: center;
                      justify-content: space-between;
                      background:rgba(255, 255, 255, 0.90);
                      border-radius:4px !important;
                      padding: 0 8px;
                      "
                    >
                    <div style="margin-right:5px;color:#4E5969">${
                      params[i].marker
                    }${params[i].seriesName}</div>
                    <div style="font-size:15px;">${
                      params[i].data &&
                      params[i].data != null &&
                      !isNaN(params[i].data)
                        ? parseFloat(params[i].data).toFixed(2)
                        : '-'
                    }&nbsp ${getUnit(params[i].seriesName)} </div>
                  </div>
                  `;
      }
      const render = `
                <div
                  style="
                    display:flex;
                    gap:8px;
                    flex-direction:column;
                    padding:8px;
                    border-radius:6px;
                    background:linear-gradient(180deg, #F4F7FC 0%, #F4F7FC 100%);
                    backdrop-filter: blur(10px);"
                >
                  <div>${params[0].name}</div>
                  ${realVal}
                  </div>
                </div>`;
      return render;
    },
  };
};

其中legendData 是自己定义的数组，或者说我们自定义的 legend ，下面是我项目中的部分代码， 最重要的就是 unit 这个属性与name 的属性，这个是对比上面的js 文件中的name 来获取单位的。 当然你也可以不传，就默认没单位就行

    if (props.datas.seriesData[key].legend) {
      legendData.push({
        name: props.datas.seriesData[key].name,
        icon:
          props.datas.seriesData[key].name == '当日预测功率'
            ? 'circle'
            : 'circle',
        itemStyle: {
          color: props.datas.seriesData[key].colors,
        },
        unit: props.datas.seriesData[key].unit || '',
      });
    }

然后在options 中正常使用就行

import { tooltip } from '@/utils/echartsTooltip';

let option = {
    tooltip: tooltip(legendData),
}

dataZoom 的内容同上，这个是属于消除了控制器的边，鼠标移入后滚轮控制缩放

使用方法同上，这里就直接贴代码了

// 只保留内部缩放控件，移除滚动条
export const dataZoom = [
  {
    type: 'inside',
    start: 0,
    end: 100,
    zoomOnMouseWheel: true, // 鼠标滚轮缩放
    moveOnMouseMove: true, // 鼠标移动平移
    preventDefaultMouseMove: false, // 允许鼠标拖拽页面
  },
];