在Vue中使用highchart图表（饼图）

先来介绍一下highchart 图表吧，它其实和charts很相似，但又比charts多了许多功能，最近做的项目我发现好多图都是charts图表实现不了的，就认真研究了一下highchart,前天搞了一下午没搞出来，昨天上午过来灵机一动居然出来了。下面来说一下步骤吧

1.安装highcharts:

npm install highcharts --save

2.新建一个comp.vue的文件

3.把comp.vue引入你所需要的文件中，（别忘了注册组件哦）

import XChart from './comp.vue'
 components: {
            XChart
        },

4.在需要图表的地方（这里注意一下v-if）

this.showchart是一个变量，定义在data里

5.在data里边定义

showchart:false,
                option: {
                    title:null,
                            tooltip: {
                                headerFormat: '币种成交额占比
',
                                pointFormat: '{point.name}: {point.percentage:.1f}%'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: false
                                    },
                                    showInLegend: true // 设置饼图是否在图例中显示
                                }
                            },
                            series: [{
                                type: 'pie',
                                data:[],
                            }]
                }

 

6.重点来了，我主要想说一下异步获取数据，但是获取到的数据不显示的问题，我这里用的是feach获取的数据，根据需求也可以用ajax来获取。想必这个肯定都知道，我就不多说了，data是数组对象格式的，

 

 

 

fetch(this.HOST+"/exchanges/historical-statistics?eid="+this.eid).then(e=>{
                        return e.json();
                    }).then(e=>{
                     
                        for(var i=0;i<1;i++){  
                           this.option.series[0].data=new Array();
                            for(var j=0;j

注意

name:`${e.data[j].symbol}  ${e.data[j].proportion}%` //是为了让图例中显示百分比

 

 

7.做到这儿你会发现数据格式完全正确但是就是显示不出来，把数据直接放到data里面是完全没问题的，这就是我纠结了一下午的问题，尝试了各种方法都不行，它是一个异步问题，所以这个时候就需要用到v-if了,等有了数据再渲染。开始的时候让this.showchart=false,图表不渲染，当this.option.series[0].data有数据之后让this.showchart =true，图表中用v-if控制，注意一定要用v-if，v-show是不行的。

this.showchart=true

 

 

 

 

好了，这样图就可以出来了。