Vue.js 中使用 Highcharts 构建响应式图表 - 综合指南

了解如何使用 Highcharts 在Vue.js应用程序中创建响应式图表。交互式数据可视化中常见挑战的分步设置、配置提示和解决方案。

Highcharts 设置 Vue.js 项目

我将向您展示如何使用Highcharts Vue 包装器生成交互式网络图表。既然学习的最好方法是通过实践，我将带你完成演示应用程序包含在存储库中；

（演示中使用了以下技术/工具：NodeJS、Vue、Vue-CLI 和 Webpack。建议具备 Javascript 和 ES6 的基础知识。）

本文分为两个主要部分。第一部分是关于设置环境，第二部分是关于如何使用包装器本身。

环境设定

构建环境需要使用打包器 ( Webpack )、转译器 ( babeljs ) 和加载器 ( vue-loader )。这些工具的描述超出了本文的范围。您现在需要知道的是， Vue-cli会为您完成所有繁重的配置，例如 webpack 配置、应用程序骨架等。

要设置环境，请创建一个新目录并导航到该目录（使用终端），然后使用此命令安装 Vue-cli ：npm install -g vue-cli

然后输入以下命令，运行新的vue项目vue init webpack-simple

进入创建的目录cd yourFolder，运行以下命令安装 Highcharts 和 Highcharts Vue 包装器：

npm install --save highchartsnpm install highcharts-vue

安装完成后，您将看到配置文件已自动添加到您的目录中，例如index.html，App.vue，main.js等。很酷，对吧？

就是这样；环境设置已完成:)。

如何使用包装器

让我们尝试一下包装纸吧！打开main.js文件并添加以下代码：

然后，使用Vue.use在全局范围内注册包装器：vue.use<(HighchartsVue)

该演示显示了三种不同的图表：样条图、股票图和地图图。为了更好的可视性和维护性，让我们为每个图表创建一个组件。进入 src 目录并创建一个名为 components 的新目录。添加三个空文件：Chart.vue、MapChart.vue 和 StockChart.vue。每个文件都有三个部分：模板元素、脚本元素和样式元素。

模板

注册包装器后，您可以通过将自定义标签添加到组件中来使用 Highcharts-vue 组件。

chart默认设置了构造函数类型属性，因此无需添加。但是，股票和地图图表需要构造函数类型属性：

脚本

脚本元素是存储图表选项和数据的位置

不要忘记将这些选项和数据包装到组件对象中以便以后使用：Export default { … }

风格

style元素没有什么特别之处，因为它主要是CSS。值得一提的是，该元素使用了＜style-scoped＞属性，该属性将样式的范围仅限于该组件。您可以从这个GitHub链接复制三个组件文件的内容。

接下来，将这些组件导入到App.vue文件中：

对于其余的代码，请随时从这个GitHub链接复制代码。

在运行演示之前，请使用以下命令安装软件包：npm install

启动演示：npm run build

就是这样。

去用Highcharts vue包装器创建你自己的图表吧！