Example sharing of drawing 3d pie chart with highCharts in Vue

This article mainly introduces you to an example of drawing a 3D pie chart in Vue with highCharts. Highcharts is a well-known foreign chart library based on JavaScript. Since the configuration of using highcharts in Vue on the Chinese official website is cumbersome and requires the introduction of jquery as a dependency, it is deprecated. Hope this article can help everyone.
Next, let me give you a brief introduction to the use and configuration of highcharts in vue.

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

npm install vue-highcharts --save

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

npm install highcharts --save

After the installation is completed, enter the project main.js for configuration:

import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'

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

import highcharts3d from 'highcharts/highcharts-3d'

调用3d图表：

highcharts3d(highcharts)

OK, so far highcharts has been configured in vue. Next, draw a 3d pie chart according to the API
Create a pie chart component:

Configure the option data in the page where the pie chart needs to be used

See the effect.

More configuration instructions can be viewed on the Chinese official website https://www.hcharts.cn/
Related recommendations:

How to use highcharts in angular

HighCharts draws 2D line chart with Label effect example sharing

highcharts example tutorial 2: Combining PHP and MySQL to generate pie charts, highcharts example tutorial_PHP tutorial

The above is the detailed content of Example sharing of drawing 3d pie chart with highCharts in Vue. For more information, please follow other related articles on the PHP Chinese website!