在Vue中使用highchart图表(饼图)
先来介绍一下highchart图表吧,它其实和charts很相似,但又比charts多了许多功能,最近做的项目我发现好多图都是charts图表实现不了的,就认真研究了一下highchart,前天搞了一下午没搞出来,昨天上午过来灵机一动居然出来了。下面来说一下步骤吧1.安装highcharts:npm install highcharts --save2.新建一个comp.vue...
先来介绍一下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}%` //是为了让图例中显示百分比
7.做到这儿你会发现数据格式完全正确但是就是显示不出来,把数据直接放到data里面是完全没问题的,这就是我纠结了一下午的问题,尝试了各种方法都不行,它是一个异步问题,所以这个时候就需要用到v-if了,等有了数据再渲染。开始的时候让this.showchart=false,图表不渲染,当this.option.series[0].data有数据之后让this.showchart =true,图表中用v-if控制,注意一定要用v-if,v-show是不行的。
this.showchart=true
好了,这样图就可以出来了。
更多推荐
所有评论(0)