Vue3 内嵌 go-view 网站图表 - ECharts 示例 - 常规

在 Vue3 中，可以使用第三方的图表库来实现内嵌 go-view 网站的图表。以下是使用 ECharts 图表库的示例：

首先，安装 ECharts 库：

npm install echarts --save

在 Vue 组件中引入 ECharts：

import * as echarts from 'echarts';

在 Vue 组件的mounted生命周期钩子中初始化图表：

mounted() {
  this.initChart();
},

methods: {
  initChart() {
    // 获取图表容器元素
    const chartContainer = document.getElementById('chart-container');

    // 创建 ECharts 实例
    const chart = echarts.init(chartContainer);

    // 设置图表配置项
    const options = {
      // 配置图表数据和样式
    };

    // 渲染图表
    chart.setOption(options);
  }
}

在 Vue 模板中添加图表容器：

<template>
  <div id='chart-container'></div>
</template>

在 Vue 组件中使用go-view网站提供的数据，根据需要将数据转换为 ECharts 图表所需的格式，并更新图表配置项，然后调用chart.setOption(options)重新渲染图表。

请注意，以上仅是使用 ECharts 库的示例，实际使用时可能需要根据具体需求进行适当的调整和配置。另外，还可以使用其他图表库，如 Chart.js、Highcharts 等，具体使用方法可以查阅它们的官方文档。