echarts 时序图，tooltip提示框添加vue组件渲染到页面上

在这里插入代码片
const option = {
        title: {
          // text: 'Graph on Cartesian',
        },
        //这里是提示框点击触发
        tooltip: {
          alwaysShowContent: true,//提示框不消失
          extraCssText: 'width:470px;min-height:275px',//提示框样式
          enterable: true,
          triggerOn: 'click',//点击弹出提示框
          className: 'echarts-tooltip',//提示框添加类名
        },
        xAxis: {
          type: 'category', // 使用类别类型
          boundaryGap: false,
          data: years, // 显示年份标签
          axisLine: {
            show: false,
          },
          position: 'top', // 将横坐标移动到上方
        },
        yAxis: {
          type: 'category',
          data: clusterKeywords,
          axisLine: {
            show: false,
          },
          position: 'right', // 将纵坐标移动到右侧
          axisLabel: {
            formatter: function (value, index) {
              // 获取组颜色
              // const color = groupColors[value];
              // 计算反向索引
              // const reverseIndex = clusterKeywords.length - 1 - index;
              // 每4个字符添加一个换行符，并在文字前加上 # 和索引
              const formattedValue = value.split('').reduce((acc, char, i) => {
                return acc + char + ((i + 1) % 4 === 0 ? '\n' : '');
              }, '');
              // return `{color${index}|#${reverseIndex} ${formattedValue}}`;
              return `{color${index}| ${formattedValue}}`;
            },
            rich: clusterKeywords.reduce((acc, keyword, index) => {
              acc[`color${index}`] = {
                color: groupColors[keyword],
                fontWeight: 'bold', // 设置纵坐标文字加粗
                fontSize: 14, // 可以调整字体大小
              };
              return acc;
            }, {}),
            align: 'left', // 文字左对齐
            padding: [0, 0, 0, 20], // 调整文字位置，向右移动10个像素
            fontWeight: 'bold',
            fontSize: 14,
          },
        },
        series: [series],
      };

在这里插入代码片
// 配置 series 对象
      const series = {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
        symbolSize: 40,
        label: {
          show: true,
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: seriesData,//这里是数据源
        links: links,
        lineStyle: {
          normal: {
            show: true,
            width: 2,
            opacity: 0.3,
            curveness: 0.2,
          },
        },
        markLine: {
          data: markLineData, // 使用动态生成的 markLine 数据
          // y轴辅助线去掉起始的圆
          symbol: ['none', 'arrow'],
        },
      };

在这里插入代码片
import Vue from 'vue';
import router from '@/router';
import echartsTooltip from './echartsTooltip.vue';
const seriesData = parsedResult.flatMap((item) =>
        item.evolutionKeywords.map((keyword) => {
          // console.log('keyword',keyword)
          if (!keywordCounter[item.clusterKeyword]) {
            keywordCounter[item.clusterKeyword] = 0;
          }
          keywordCounter[item.clusterKeyword] += 1;

          // 添加唯一标识符
          /* clusterKeywords  纵坐标 */
          const uniqueName = `#${
            clusterKeywords.length -
            1 -
            clusterKeywords.indexOf(item.clusterKeyword)
          }_${keyword.keyword}`;

          // 获取组颜色
          const color = groupColors[item.clusterKeyword];

          return {
            name: keyword.keyword,
            id: uniqueName,
            clusterKeyword: item.clusterKeyword,
            value: [
              years.indexOf(keyword.year),
              clusterKeywords.indexOf(item.clusterKeyword),
              keyword.count,
            ],
            // symbolSize: keyword.count / 100,
            symbolSize: getCircleSize(keyword),
            obj: { ...keyword },
            itemStyle: {
              color: color,
            },
            label: {
              show: true,
              position: 'bottom', // 文字位置
              offset: [0, 10], // 文字偏移量，下移10个像素
              //这里是提示框里面自定义的vue组件
              formatter: function (value) {
                let str = value.name;
                let max = 6;
                if (str.length > max) {
                  return str.slice(0, max) + '\n' + str.slice(max, str.length);
                }
                return str;
              },
              fontWeight: 'bold',
            },
            tooltip: {
              show: true,
              formatter: function (value, ticket, callback) {
                let question = value.data.clusterKeyword + '+' + value.name;
                const div = document.createElement('div');
                let mapTooltip = new Vue({
                  router,
                  render: (h) =>
                    h(echartsTooltip, {
                      props: {
                        name: value.name,
                        count: keyword.count,
                        year: keyword.year,
                        question: question,
                      },
                      on: {
                        changeList: (payload) => {
                          console.log('Received event:', payload);
                        },
                        closeTooltip: () => {
                          console.log('closeTooltip');
                          let tooltipElement =
                            document.querySelector('.echarts-tooltip');
                          tooltipElement.style.display = 'none';
                        },
                      },
                    }),
                });
                that.$nextTick(() => {
                  mapTooltip.$mount(div);//vue组件挂载到div标签上，div标签消失，是替换
                  callback(ticket, mapTooltip.$el);//更新tooltip内容，不调用callback，tooltip内容不会更新
                });

                return `
                  <span style="font-weight:bold;">关键词：</span>${value.name}
                  <br>
                  <span style="font-weight:bold;">文献数量：</span>${keyword.count}
                    <br>
                  <span style="font-weight:bold;">学术高峰年：</span>${keyword.year}年
                 `;
              },
            },
          };
        })
      );