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

1.安装highcharts:

npm install highcharts --save

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

<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)
        }
    }
</script>

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

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

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

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

<x-chart  :option=this.option id="id" width="244px" height="244px" v-if="this.showchart==true"></x-chart>

5.在data里边定义

showchart:false,
                option: {
                    title:null,
                            tooltip: {
                                headerFormat: '币种成交额占比<br>',
                                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            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<e.data.length;j++){
                                e.data[j].proportion=parseFloat((e.data[j].proportion*100).toFixed(2));
                                     this.option.series[0].data.push(eval({name:`${e.data[j].symbol}  ${e.data[j].proportion}%`,y:e.data[j].proportion})
                                }
                              
                            }
                            this.option.series[0].data=eval(this.option.series[0].data)
                    
                           
                    })

注意

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

 



 

 

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

this.showchart=true

 

 

 

 

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

 

 

 

 

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue