在Vue中使用SpreadJS创建图表（包含源代码）

数据可视化是用来展示数据趋势和模式的有用工具。如果没有直观的视觉效果中呈现的定量信息，就会浪费时间来理解数据的意义和重要性。

SpreadJS是一个类Excel的纯前端表格控件，允许您在不同的JavaScript框架中工作。SpreadJS以富有创意，富有洞察力和灵活性的方式显示数据。本教程演示了如何使用Vue中的SpreadJS添加图表和更改导入的电子表格。

在本教程中，我们将使用 VSCode 编辑和运行项目，以及在 Google Chrome 中调试和运行项目。点击了解如何设置VS Code以使用Google Chrome调试Vue项目。

使用Vue应用中的SpreadJS创建图表

SpreadJS Vue安装

这是一个设置SpreadJS Vue项目的教程。我将详细介绍这个特定项目的具体步骤。首先，以管理员身份打开命令提示符，然后导航到您希望为项目创建的文件夹。

使用以下命令为Vue安装命令行界面：

npm install -global vue-cli

这是安装创建和运行Vue项目所需的库，现在你可以使用“vue init”来创建项目了：

vue init webpack SpreadJS-Vue-Project

开始创建项目，根据提示输入更多信息。大多数提示可以用“否”回答，如下所示：

使用Vue应用中的SpreadJS创建图表

创建项目后，可以通过NPM安装所需的Spread文件：

npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-charts

创建项目

为了方便组织，我将在项目的“src”文件夹中创建一个标有“components”的单独文件夹。在该文件夹中，创建一个包含此示例代码的Vue文件（在这种情况下，该文件将被称为“IncomeStatement.vue”）。

创建该文件和文件夹后，我们可以编辑“src”文件夹中的App.vue文件，将其定向到这个新文件：

 <template>
      <div id="app">
        <IncomeStatement/>
      </div>
    </template>

    <script>
    import IncomeStatement from './components/IncomeStatement'

    export default {
      name: 'App',
      components: {
        IncomeStatement
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    </style>

Income Statement 代码

要开始编写此页面的代码，我们可以添加模板和样式部分，模板是页面的实际结构。样式将是该模板中各部分的样式：

<template>
      <div class="financialKPI">
        <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='spreadInitHandle'>
        </gc-spread-sheets>
        <input type="file" class="fileSelect" @change='fileChange($event)' />
      </div>
    </template>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .spread-host {
        width: 100%;
        height: 500px;
        border: 1px solid lightgray;
      }

      .fileSelect {
        width: 100%;
        margin-top: 20px;
      }
    </style>

下一步是添加一个脚本标记，我们将为此示例编写所有代码。让我们首先通过NPM导入我们在项目中安装的CSS和脚本文件，以及设置我们的许可证密钥：

 <script>
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

      import '@grapecity/spread-sheets-vue'
      import * as GC from '@grapecity/spread-sheets'
      import Excel from '@grapecity/spread-excelio'
      import Charts from '@grapecity/spread-sheets-charts'

      GC.Spread.Sheets.LicenseKey = <YOUR LICENSE KEY HERE>;
    </script>

接下来，让我们在本地注册我们的组件：

 export default {
      name: 'IncomeStatement',
      data () {
        return {
          hostClass : 'spread-host'
        }
      }
    }

在数据部分之后，我们可以添加“methods”部分，在其中我们将定义初始化SpreadJS的“spreadInitHandle”函数，以及“fileChange”，我们的大部分代码将在其中进行：

 methods: {
      spreadInitHandle: function (spread) {
        this._spread = spread;
      },
      fileChange: function (e) {
        if (this._spread) {
          let fileDom = e.target || e.srcElement;
          let excelIO = new Excel.IO();
          let spread = this._spread;
        }
      }
    }

一旦在函数中初始化Spread，我们就可以在用户选择要在“fileChange”函数中加载到Spread中的文件时运行代码。我们将设置一些变量以便以后更容易访问，然后使用ExcelIO open函数将Excel文件加载到SpreadJS中：

 excelIO.open(fileDom.files[0], (data) => {
      spread.fromJSON(data);
      let sheet = spread.getSheet(1);
    })

在我正在使用的Excel文件中，我想在数据下方显示一个图表，但数据占用了大量的屏幕空间，因此我将对这些行进行分组和折叠，如下所示：

 sheet.rowOutlines.group(14, 2);
    sheet.rowOutlines.group(20, 6);
    sheet.rowOutlines.group(30, 3);
    sheet.rowOutlines.expand(0, false);

    sheet.addRows(38, 20);

现在我们已准备好添加图表，因此我们可以参考表格的收入区域的整个数据区域：

<pre> <code="language-javascript">
var chart = sheet.charts.add('RevenueChart', GC.Spread.Sheets.Charts.ChartType.columnClustered, 15, 600, 1600, 400, "E8:P12", GC.Spread.Sheets.Charts.RowCol.rows);
</code="language-javascript"> </pre>

我们可以快速设置图表的标题：

var title = chart.title();
    title.text = "Revenue";
    title.fontFamily = "Cambria";
    title.fontSize = 28;
    title.color = "#696969";
    chart.title(title);

创建图表的下一个也是最后一个任务是在图表中定义系列的名称。我们将通过单元格引用从工作表中获取。在这种情况下，我们选择的数据中有一个空行，不需要包含在图表中，因此我们可以删除该函数曲线（Series）：

 var series = chart.series();
    series.remove(0);
    var productSeries = series.get(0);
    productSeries.name = "Sheet1!$B$10";
    var servicesSeries = series.get(1);
    servicesSeries.name = "Sheet1!$B$11";
    var otherSeries = series.get(2);
    otherSeries.name = "Sheet1!$B$12";
    chart.series().set(0, productSeries);
    chart.series().set(1, servicesSeries);
    chart.series().set(2, otherSeries);

使用Vue应用中的SpreadJS创建图表