How to Use highCharts to draw a 3d pie chart in Vue, vuehighcharts

How to Use highCharts to draw a 3d pie chart in Vue, vuehighcharts

Highcharts is a well-known javascript-based chart library. Because the highcharts configuration in the vue on the Chinese official website is cumbersome and jquery needs to be introduced as the dependency, It is discarded.

Next, we will give a brief introduction to how to use and configure highcharts in vue.

First, use npm to install vue-highcharts in your project.

npm install vue-highcharts --save

Because vue-highcharts depends on highcharts, we also need to install the latter

npm install highcharts --save

After the installation is complete, go to the main. js project for Configuration:

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

After the above two items are introduced, because we need to use 3d charts, we also need to introduce:

import highcharts3d from 'highcharts/highcharts-3d'

Call 3d charts:

highcharts3d(highcharts)

OK. highcharts has been configured in vue so far. Next, draw a 3d pie chart based on the API.

Create a pie chart component:

<Template> <div class = "container"> <div: id = "id ": option = "option"> </div> </template> <script> import HighCharts from 'highcharts' export default {props: {id: {type: string}, // option is the chart configuration data option: {type: Object }}, mounted () {HighCharts. chart (this. id, this. option) }}</script> <style scoped>/* container */. container {width: 1000px; height: 550px ;}</style>

Configure option data on the page where you want to use a pie chart

<Template> <div class = "charts"> <pie: id = "id ": option = "option"> </pie> </div> </template> <script> import pie from '.. /components/pie 'import manes from '.. /components/list 'export default {components: {pie,}, data () {return {id: 'test', option: {chart: {type: 'pie ', // pie chart options3d: {enabled: true, // use the 3d function alpha: 60, // extend the oblique angle of the Y axis to 0, }}, title: {text: 'test use' // Title text of the chart}, subtitle: {text: ''// subtitle text}, plotOptions: {pie: {allowPointSelect: true, // can you select cursor: 'pointer 'for each sector? // The mouse pointer depth: 35. // The thickness of the pie chart dataLabels: {enabled: true, // whether to display the linear tip of the pie chart }}, series: [{type: 'pie ', name: 'test with 1', // unified frontend, non-required data: [['test 1', 12], // Module name and proportion, you can also {name: 'test 1', y: 12} ['test 2', 23], ['test 3', 19], ['test 4', 29]}] }},} </script> <style scoped> </style>

Check the effect.

For more configuration instructions, go to the Chinese official website to view the https://www.hcharts.cn/

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.