1、npm安裝highchart

npm install highcharts --save npm install vue-highcharts --save

2、在main.js引入

import highcharts from 'highcharts' import VueHighCharts from 'vue-highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts)

3、在components文件下新建一個highchart.vue組件

<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>

4、在需要圖表的組件引入highchart.vue組件

<template><div class="charts"><pie :id="id" :option="option"></pie><pie :id="id1" :option="option1"></pie></div> </div> </template><script> import pie from '../components/highchart.vue' export default {components: {pie,},data() {return {id: 'test',option: {chart: {type: 'pie',//餅圖options3d: {enabled: true,//使用3d功能alpha: 60,//延y軸向內的傾斜角度beta: 0, }},title: {text: '3D餅狀圖'//圖表的標題文字},subtitle: {text: ''//副標題文字},colors: ['#AA4643', '#89A54E', '#80699B', '#3D96AE','#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],plotOptions: {pie: {allowPointSelect: true,//每個扇塊能否選中cursor: 'pointer',//鼠標指針depth: 35,//餅圖的厚度dataLabels: {enabled: true,//是否顯示餅圖的線形tip}}},series: [{type: 'pie',name: '',//統一的前置詞,非必須data: [['測試1',12],//模塊名和所占比，也可以{name: '測試1',y: 12}['測試2',24],['測試3',19],['測試4',290]]}]},id1: 'test1',option1: {chart: {type: 'column',margin: 75,options3d: {enabled: true,alpha: 35,beta: -10,depth: 0,}},title: {text: '3D柱狀圖'//圖表的標題文字},subtitle: {text: ''//副標題文字},xAxis: {categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],crosshair: true,labels: {formatter: function() {var labelVal = this.value;var reallyVal = '';var lvl = labelVal.length;if(lvl > 1){for(var i=1;i<=lvl;i++){reallyVal += labelVal.substr(i-1,1)+"<br/>";}}return reallyVal.substring(0,reallyVal.length-5);}}},plotOptions: {column: {depth: 25},series: { }},series: [{ data: [{'color':'#AA4643','y':11}, {'color':'#89A54E','y':12}, {'color':'#80699B','y':13}, {'color':'#3D96AE','y':14}, {'color':'#DB843D','y':15}, {'color':'#92A8CD','y':16}, {'color':'#A47D7C','y':17}], }]}}},} </script><style scoped></style>

這里是寫了兩個圖表的例子，一個3D餅狀圖，一個3D柱狀圖。

總結

以上是生活随笔為你收集整理的vue-cli项目引入highcharts的3D图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。