<speedscope>标签

在Vue中使用`<speedscope>`标签是为了嵌入Speedscope图表。这个标签实际上是基于HTML5的Custom Element（自定义元素），它允许你在Vue组件中直接引用Speedscope组件并传入处理好的数据。这是一个简单的示例：

<template>
  <div>
    <!-- 使用speedscope标签 -->
    <speedscope :config="speedscopeConfig" :data="speedscopeData" @rendered="onChartRendered"></speedscope>
  </div>
</template>

<script>
import SpeedScope from '@speedscope/speedscope';

export default {
  components: {
    SpeedScope,
  },
  data() {
    return {
      speedscopeConfig: {}, // 初始化配置，比如图表标题、颜色方案等
      speedscopeData: null, // 存储Speedscope解析后的数据
    };
  },
  methods: {
    onChartRendered() {
      // 图表渲染完成后执行的回调函数
      console.log('Speedscope chart has been rendered');
    },
  },
  mounted() {
    // 在组件挂载时加载和处理数据
    // 这里假设已经有一个名为loadSpeedscopeData的方法处理数据
    this.loadSpeedscopeData().then(data => {
      this.speedscopeData = data;
    });
  },
};
</script>

在`<speedscope>`标签中，`config`属性用于传递配置选项，`data`属性用于传入可视化所需的数据，而`@rendered`事件则是在图表渲染完毕后触发，你可以在这里执行后续操作。