【echarts】tooltip 自定义样式 legend数值文字对齐

一、样式结果

二、实现

   使用echarts的时候难免会有一些不一样的页面需求，这次讲一下如何使用echarts的formatter属性自定义自己想要的悬浮tooltip样式。

如代码所示：

option = {
        color: [
          "#165DFF",
          "#0FC6C2",
          "#00B42A",
          "#F7BA1E",
          "#F53F3F",
          "#722ED1",
        ],
        grid: {
          with: "80%",
          height: "40%",
        },
        tooltip: {
          trigger: "item",
          confine: true,
          backgroundColor: "rgba(0, 0,0, 0.5)",
          formatter(params){
            var  res=`<div style="display:flex;justify-content:space-between;margin-top:5px;">
            <div ><span style="color:${params.color};margin-right:5px">●</span>${params.name}</div>
            <div style="margin-left:20px;font-weight:600">${params.value}</div>
            </div>`
            return  params.seriesName + res
          },
          textStyle: {
            color: "#FFFFFF", // 文字的颜色
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },

        },
        legend: {
          top: "center",
          right: "5%",
          icon: "circle",
          selectedMode: false,
          itemGap: 16,
          orient: "vertical",
          textStyle: {
            color: "#4E5969",
            fontSize: 14,
            align: "left",
            rich: {
              name: {
                // width: 100,
                padding: [0, 10, 0, 0],
              },
              target: {
                // width: 50,
                // align: "right",
                align: "right",
                padding: [0, -180, 0, 0],
              },
            },
          },  
      };

三、legend样式文字对齐

其中legend可是使用我们的富文本样式标签，rich 结合formatter属性设置我们想要的内容展示布局。超长文本可以使用省略号，鼠标移入legend展示所有文本的话，需要用到tooltip属性。

 legend: {
          top: "center",
          right: "5%",
          icon: "circle",
          selectedMode: false,
          itemGap: 16,
          orient: "vertical",
          textStyle: {
            color: "#4E5969",
            fontSize: 14,
            align: "left",
            rich: {
              name: {
                // width: 100,
                padding: [0, 10, 0, 0],
              },
              target: {
                // width: 50,
                // align: "right",
                align: "right",
                padding: [0, -180, 0, 0],
              },
            },
          },
          //图例大小
          itemHeight: 9,
          formatter: function (name) {
            var target = 0; // 遍历拿到数据
            for (var i = 0; i < self.warningTypeData.length; i++) {
              if (self.warningTypeData[i].name == name) {
                target = self.warningTypeData[i].value|| 0;
              }
            }
            return `{name|${
              name.length > 10 ? name.substring(0, 9) + "..." : name
            }}{target|${target}}`;
          },
          tooltip: {
            show: true,
            trigger: "item",
          },
        },