vue使用Highcharts實(shí)現(xiàn)3D餅圖

更新時間：2022年03月28日 09:52:01 作者：高級前端工程師Vue方向

這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)3D餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue使用Highcharts實(shí)現(xiàn)3D餅圖的具體代碼，供大家參考，具體內(nèi)容如下

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年某網(wǎng)站不同瀏覽器訪問量占比'
? ? ? ? }
? ? ? ? ,
? ? ? ? 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 {
? ? ? ? // 驗(yàn)證類型
? ? ? ? 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.請制定規(guī)劃目標(biāo)，報告會根據(jù)填入的信息生成。</span>
? ? ? ? <span class="smallFoot ml-1" style="color:#b9b9bd ">全部規(guī)劃確認(rèn)上傳可</span>
? ? ? ? <span class="smallFoot ml-1"><a style="color: #54a0ff" href=" " rel="external nofollow" >預(yù)覽生涯仿真圖</ 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%">預(yù)計(jì)結(jié)婚時間為{{date}}年,婚禮總預(yù)算￥200,0000元</span>
? ? ? ? ? ? ? ? <span style="float: right;margin-right: 1%"><yh-button style="border-radius: 8px">關(guān)聯(lián)產(chǎn)品</yh-button></span>
? ? ? ? ? ? ? ? <span style="float: right;margin-right: 2%"><yh-button class=" yh-primary" style="border-radius: 8px">確認(rèn)規(guī)劃</yh-button></span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <span style="width: 90%;margin-left: 6%;color: #54a0ff;height:22px;margin-top: 5%">重新配置參數(shù)</span>
? ? ? ? ? ? <div id="app">
? ? ? ? ? ? ? ? <x-chart :id="id" :option="option"></x-chart>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</template>
?
<script>
? ? // 導(dǎo)入chart組件
? ? import XChart from '../../charts'
? ? // 導(dǎo)入chart組件模擬數(shù)據(jù)
? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: