vue使用Highcharts实现3D饼图

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。