在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进⾏配置：
import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'
引⼊以上两项之后，因为我们需要使⽤3d图表，还需要引⼊：
import highcharts3d from 'highcharts/highcharts-3d'
调⽤3d图表：
highcharts3d(highcharts)
OK，到此为⽌已经在vue中配置好highcharts,接下来根据API绘制⼀份3d饼图
新建⼀个饼图的组件：
<template>
<div class="container">
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
id: {
type: String
},
//option 是图表的配置数据
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id, this.option)
}
}
</script>
<style scoped>
/* 容器 */
.container {
width: 1000px;
height: 550px;
}
</style>
在需要使⽤饼图的页⾯⾥配置option数据
<template>
<div class="charts">
<pie :id="id" :option="option"></pie>
</div>
</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',//饼图
options3d: {
enabled: true,//使⽤3d功能
alpha: 60,//延y轴向内的倾斜⾓度
beta: 0,
}
},
title: {
text: '测试⽤'//图表的标题⽂字
},
subtitle: {
text: ''//副标题⽂字
},
plotOptions: {
pie: {
allowPointSelect: true,//每个扇块能否选中
cursor: 'pointer',//⿏标指针
depth: 35,//饼图的厚度
dataLabels: {
enabled: true,//是否显⽰饼图的线形tip
}
}
},
series: [
{
type: 'pie',
name: '测试⽤1',//统⼀的前置词,⾮必须
data: [
['测试1',12],//模块名和所占⽐，也可以{name: '测试1',y: 12}
['测试2',23],
['测试3',19],
['测试4',29]
]
}
]
}
}
},
}
</script>
<style scoped>
</style>
看下效果。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。