3d饼图 vue_在 Vue 中使用 highCharts 绘制 3d 饼图的方法

在 Vue 中使用 highCharts 绘制 3d 饼图的方法

highcharts 是国外知名基于 javascript 的图表库由于中文官网的 vue 中使用 highcharts 配置繁琐并且需要引入 jquery 作为依赖, 所以弃用

接下来, 给各位伙伴简要的讲叙下 highcharts 在 vue 中的使用和配置方法

首先使用 npm 在你的项目中安装 vue-highcharts

npm install vue - highcharts--save

由于 vue-highcharts 依赖于 highcharts, 我们还需要安装后者

npm install highcharts--save

安装完成后, 进入项目 main.js 进行配置:importhighchartsfrom'highcharts'

importVueHighChartsfrom'vue-highcharts'

引入以上两项之后, 因为我们需要使用 3d 图表, 还需要引入:

import highcharts3d from 'highcharts/highcharts-3d'

调用 3d 图表:

highcharts3d(highcharts)

OK, 到此为止已经在 vue 中配置好 highcharts, 接下来根据 API 绘制一份 3d 饼图

新建一个饼图的组件: