Echart的tooltip的部分的样式修改

在实际的项目中，我们在使用echart的时候，默认样式往往不能达到我们的目的，我们就需要在原来的插件上做修改。接下来介绍一下我使用到的一些关于tooltip部分的修改。

1: tooltip的弹窗部分默认样式为黑色透明底色，如下图

此时需要我们根据设计稿改变成想要的样式，如下图

1. 首先北京颜色和宽高的不同，tooltip有一个属性是extraCssText ，可以直接写自己需要的样式：

1. 我们需要写弹窗内的样式， 这个时候我们需要使用formatter函数来写，返回一个字符串模版的样式来写，

formatter: (params: any) => {
        const tooltipArr = tooltipData[(tabType ?? 'sent').toLowerCase()]?. [params[0].dataIndex] || [];
        return (
          `<span>
           <span style="${tooltip_title}">2021-02-05 (Total Actions)</span>
           <span style="${tooltip_number}">${numberFormat(176685041)}</span>
          ${Object.keys(tooltipArr).reduce(
            (
              pre: any,
              cur: any,
            ) => `${pre} <div style="${tooltip_item}" >
              <span style="${premium_style}"> </span>
              <span style="${premium_name}">${cur}</span>
              <span style="${premium_value}">(${numberFormat(get(tooltipArr, cur))})</span>
            </div>`,
            '',
          )}
         </span>`
        );
      },` 
           

1. 我们可以看到上图中的内容里，前面有个小圆点的部分是一个遍历出来的数据， 7由于tooltip的渲染机制，如果使用mp, forEach .会导致每次都是只会显示一条，使用reduce 来累加就会解决问题，把所有数据都渲染出来。从上述代码可以看到，每一个标签的样式都是直接写的style行内样式， 传入一个字符串 例如标题部分的样式如下：

const tooltip_title = `
  min-height: 20px;
  font-size: 12px;
  display: block;
  text-align: left;
  color: rgba(0, 0, 0, 0.54);
`;
           

1. 另外我们可以看到显示tooltip的时候根据鼠标移动，同时出现的那个竖线的颜色，也是修改过的，这个地方的修改，是在axisPointer 属性里面修改的， 可以更改线的颜色， 虚线还是实线等：

axisPointer: {
   type: 'line',
   lineStyle: {
    color: '#092147',
   },
},
           

1. 显示tooltip的时候与y轴数值焦点，部分样式的修改

   

   这个地方的修改是在series 里修改的，首先设置showSymbol 属性确定是否显示这个圆点， 然后如下设置

itemStyle: {
    borderWidth: 1,
    normal: {
       lineStyle: {
        color: '#00CCDB',
    },
    },
     emphasis: {
       color: '#00CCDB',
        borderColor: '#092147',
        },
  },