本文实例为大家分享了vue使用Highcharts实现3D饼图的具体代码，供大家参考，具体内容如下
1.安装vue-highcharts和highcharts
npm install vue-highcharts --save
npm install highcharts --save
2.option.js
let all={
pie:{
chart: {
type: 'pie',
options3d:
{
enabled: true,
alpha: 70,//展示顶部看到的范围
beta: 0
}
}
,
title: {
text: '2014年某网站不同浏览器访问量占比'
}
,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
,
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
depth: 75,//3D图的高度
dataLabels:
{
distance:50,
enabled: true,
format: '{point.name}'
}
}
}
,
series: [{
type: 'pie',
name: '浏览器占比',
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{name: 'Firefox', y: 45.0, sliced: true,},
{name: 'IE', y: 26.8, sliced: true,},
{
name: 'Chrome',
y: 12.8,
sliced: true,//每个部分的间隙
},
{name: 'Safari', y: 8.5, sliced: true,},
{name: 'Opera', y: 6.9, sliced: true,},
{name: 'Others', y: 0.7, sliced: true,}
]
}]
}
}
export default all
3.charts.vue
<template>
<div class="x-bar">
<div :id="id"
:option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
export default {
// 验证类型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
highcharts3d(HighCharts)
HighCharts.chart(this.id,this.option)
}
}
</script>
4.marry.vue
<template>
<div>
<div class="bootTitle ">
<span class="bigFoot" style="margin-left: 4%">3.请制定规划目标，报告会根据填入的信息生成。</span>
<span class="smallFoot ml-1" style="color:#b9b9bd ">全部规划确认上传可</span>
<span class="smallFoot ml-1"><a style="color: #54a0ff" href=" " rel="external nofollow" >预览生涯仿真图</ a></span>
<span style="float: right; margin-right: 3%" >
<yh-button class="yh-small yh-primary" style="border-radius: 8px">下一步</yh-button>
</span>
</div>
<div>
<div style="border-bottom: 1px #eaeaea solid;width: 90%;margin-left: 5%;margin-top: 2%;margin-bottom:10px;height: 60px;line-height: 60px">
<span style="font-size: 24px; letter-spacing:1px;margin-left: 1%">预计结婚时间为{{date}}年,婚礼总预算¥200,0000元</span>
<span style="float: right;margin-right: 1%"><yh-button style="border-radius: 8px">关联产品</yh-button></span>
<span style="float: right;margin-right: 2%"><yh-button class=" yh-primary" style="border-radius: 8px">确认规划</yh-button></span>
</div>
<span style="width: 90%;margin-left: 6%;color: #54a0ff;height:22px;margin-top: 5%">重新配置参数</span>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</div>
</div>
</template>
<script>
// 导入chart组件
import XChart from '../../charts'
// 导入chart组件模拟数据
import options from '../../../chart-options/options'
export default {
name: "marriage-planning",
data() {
let option = options.pie;
return {
id: 'test',
date:"2020",
option: option
};
},
components: {
XChart
},
methods: {
},
created: function() {},
mounted: function() {
}
}
</script>
