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页面引用该组件
![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毫秒加载数据。(请问各位大佬有没有更好的方法)
-
完成饼状图跟柱状图的编写,(注:柱状图模型数据没有贴出来,数据格式在官网CV的,下面是成功页面)