echarts自定义tooltip

<template>
  <div :style="{ width: '800px', height: '500px' }"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
      value1: 999,
      name: "李银河",
      arr: [
        {
          level: 0,
          reported: 58,
          reportedRate: 12,
          color: "red",
        },
        {
          level: 1,
          reported: 58,
          reportedRate: 12,
          color: "green",
        },
        {
          level: 2,
          reported: 58,
          reportedRate: 12,
          color: "orange",
        },
        {
          level: 3,
          reported: 58,
          reportedRate: 12,
          color: "purple",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      var that = this;
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          showContent: true,
          triggerOn: "mousemove",
          confine: false,
          position: function (point, params, dom, rect, size) {
            console.log(point, params, dom, rect, size);
            // 固定在顶部
            return [point[0], "10%"];
          },
          formatter: function (params, ticket, callback) {
            let str = `
              <li style='border-radius:35px' class="g2-tooltip-list-item" >
                <span
                  style="background-color:${that.arr[0].color};"
                  class="g2-tooltip-marker"
                ></span>
                <span style="color:${that.arr[0].color}">${"重点"}</span> ${
              "已汇报" + " " + that.arr[0].reported + "人"
            } ${"汇报率" + " " + that.arr[0].reportedRate + "%"}
              </li>
              <li  style='border-radius:35px' class="g2-tooltip-list-item" >
                <span
                  style="background-color:${that.arr[1].color};"
                  class="g2-tooltip-marker"
                ></span>
                <span style="color:${that.arr[1].color}">${"重点"}</span> ${
              "已汇报" + " " + that.arr[1].reported + "人"
            } ${"汇报率" + " " + that.arr[1].reportedRate + "%"}
              </li>
              <li style='border-radius:35px'  class="g2-tooltip-list-item" >
                <span
                  style="background-color:${that.arr[2].color};"
                  class="g2-tooltip-marker"
                ></span>
                <span style="color:${that.arr[2].color}">${"重点"}</span> ${
              "已汇报" + " " + that.arr[2].reported + "人"
            } ${"汇报率" + " " + that.arr[2].reportedRate + "%"}
              </li>
              <li style='border-radius:35px'  class="g2-tooltip-list-item" >
                <span
                  style="background-color:${that.arr[3].color};"
                  class="g2-tooltip-marker"
                ></span>
                <span style="color:${that.arr[3].color}">${"重点"}</span> ${
              "已汇报" + " " + that.arr[3].reported + "人"
            } ${"汇报率" + " " + that.arr[3].reportedRate + "%"}
              </li>
            `;
            return str;
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
      };
      this.chart.setOption(option);
    },
  },
};
</script>

效果如下:

自定义tooltip样式.png