vue中使用Highcharts动态饼状图数据不显示怎么解决
作者：一个BUG搞一天。
在Vue项目中使用Highcharts创建动态饼状图和柱状图时,你是否遇到数据不显示的问题？本文通过实例讲解如何导入Highcharts、构建图表组件,并解决子组件数据渲染前挂载导致的空白问题,提供延迟加载等实用技巧,帮助你快速实现动态图表
Vue 中使用 Highcharts 做一个动态饼状图
今天在vue中我们来使用Highcharts做一个动态饼状图跟一个动态柱状图。
先构建一个vue项目
使用vue-cli脚手架快速构建一个vue项目(这里我不在概述)
highchars的导入
npm install highcharts
然后我们在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>
构建完成之后我们创建一个options目录
里面创建一个options.js用来存放模拟的提取构建好的数据
let Options = function() {
this.pie= {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
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();
之后再创建一个vue页面引用该组件
<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毫秒加载数据。（请问各位大佬有没有更好的方法）
完成饼状图跟柱状图的编写
（注：柱状图模型数据没有贴出来，数据格式在官网CV的，下面是成功页面）
至此vue+Highcharts 的饼状图跟柱状图完成。（忽略杂乱的数据，自己手动添加）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。