Vue 中使用 Highcharts 做一个动态饼状图

Vue 中使用 Highcharts 做一个动态饼状图

今天在vue中我们来使用Highcharts做一个动态饼状图跟一个动态柱状图。

一、先构建一个vue项目

1. 使用vue-cli脚手架快速构建一个vue项目(这里我不在概述)

2. highchars的导入

   npm install highcharts 
   

3. 然后我们在components下创建一个chart.vue文件**，用于搭建chart组件的架子**

   <template>
       <div class="x-bar">
           <div :id="id" :option="option"></div>
       </div>
   </template>
   <script>
       import HighCharts from 'highcharts'
       export default {
           // 验证类型
           props: {
               id: {
                   type: String
               },
               option: {
                   type: Object
               }
           },
           mounted() {
               // 静态数据，随页面打开自动创建
               // HighCharts.chart(this.id,this.option)
           }
           methods: {
               // 动态数据，当数据加载完毕调用此方法时再执行创建
               reload(){
                   setTimeout(() => {
                   	HighCharts.chart(this.id,this.option)
                   }, 200);
               }
           }
       }
   </script>
   

4. 构建完成之后我们创建一个options目录，里面创建一个options.js用来存放模拟的提取构建好的数据

   let Options = function() {
       this.pie= {
           chart: {
               type: 'pie',
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false
           },
           title: {
               text: ''
           },
           tooltip: {
               headerFormat: '{series.name}
   ',
               pointFormat: '{point.name}: {point.percentage:.1f}%'
           },
           plotOptions: {
               pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: true,
                   },
                   showInLegend: true,
                   events: {
                       click: function(e) {
                       }
                   }
               },
           },
           series: [{
               name: '',
               colorByPoint: true,
               // 动态接收数据
               data: []
           }]
       }
   };
   //会在页面中调用该方法
   Options.prototype.funcc = function (op) {
       if(op.pie != null){
           // 复制对象
           this.pie = Object.assign(this.pie, op.pie)
       }
   }
    
   export default new Options();
   

5. 之后再创建一个vue页面引用该组件

   ![0](D:\笔记\highcharts图表\0.png)<template>
     <div class="pie">
       <div id="pie1">
         <x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
       </div>
       <div id="pie2">
         <x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
       </div>
     </div>
   </template>
   
   <script>
     //引入HTTP请求后台数据，npm引入命令:npm install --save axios vue-axios
     const axios = require("axios");
     // 导入chart组件
     import XChart from './chart.vue'
     // 导入定义好的chart模型数据（饼状图）
     import options from './chart-options/options'
     // （柱状图）
     import options1 from './chart-options/options1'
   
     export default {
       data() {
         let option = options.bar
         return {
           id1: 'pie1',
           option1: null,
           id2: 'pie2',
           option2: null,
         }
       },
       components: {XChart},
       created() {
         this.chartPie1()
         this.chartPie2()
       },
       methods: {
         // 饼状图调用
         chartPie1() {
           return new Promise((resolve, reject) => {
             options.funcc({
               pie: {
                 title: {
                   text: '浏览器访问量'
                 },
                 series: [{
                   type: 'pie',
                   name: '浏览器访问量占比',
                   data: []
                 }]
               }
             });
             //请求后台数据
             axios.get("highcharts").then(({data}) => {
               //后台返回数据赋值到data中，数据格式不了解建议参考https://www.highcharts.com.cn/docs/column-and-bar-charts
               options.pie.series[0].data = data;
             })
             this.option1 = options.pie;
             resolve();
           }).then(resp => {
               //手动调用创建饼图，注意XChart1跟下面柱状图不同
               this.$refs.XChart1.me();
           })
         },
         //柱状图调用
         chartPie2() {
           return new Promise((resolve, reject) => {
             options1.funcc({
               chart: {
                 title: {
                   text: '企业销量调查（百万）'
                 },
                 series: [{
                   name: '总销量',
                   data: []
                 }]
               }
             })
             //请求后台数据
             axios.get("highcharts").then(({data}) => {
                options1.chart.series[0].data = data;
             })
              //options1.chart为柱状图中定义的数据模型
             this.option2 = options1.chart
             resolve()
            }).then(resp => {
               //手动调用创建饼图
               this.$refs.XChart2.reload()
           })
   
         }
       },
   
     }
   </script>
   
   

   现在我们已经构建完成了，然后开开心心运行，发现页面并不是我们想象中的页面，然后一顿操作发现，子模板组件在数据渲染之前已经挂载完毕了，就是还没赋值就已经把图画好了，然后我在子组件中加上了延迟200毫秒加载数据。（请问各位大佬有没有更好的方法）

6. 完成饼状图跟柱状图的编写，（注：柱状图模型数据没有贴出来，数据格式在官网CV的，下面是成功页面）

至此vue+Highcharts 的饼状图跟柱状图完成。（忽略杂乱的数据，自己手动添加）