大家好，我是一叶，本篇是vue学习的第二篇，本篇将要讲述vue结合axios动态引用echarts。
在vue中，异步刷新使用的是axios，类似于大家常用的ajax，其实axios已经是vue的第二代异步工具了，第一代是vue-resource,不过官方已经停止更新了，axios各方面来说更好用，所以还是比较推荐的。
首先来说说我们的思路，echarts能渲染图表，是因为series里的data有数据，所以才能渲染出来。如果我们把axios请求过来的值赋给data，是不是意味着echarts就能够动态刷新了。凭借这个思路，于是本文就有内容了。
在这里我打算分两部分来写。一个是普通篇，仅仅是echarts和axios的用法；另一个是进阶篇，内容为vuex、echarts和axios的结合使用。vuex内容较多，这里只是引用，不进行详细讲解，关于vuex的详细用法，以后我会单独写一篇文章，到时候我会把链接放进来。
普通篇：
目录结构如图1所示：
图1
说得再好不如代码直观，主组件：index.vue
<!-- index.vue -->
<template>
<div><div id="echartContainer" style="width:500px; height:500px"></div></div>
</template> <script>
//从option.js中引入option
import { option } from '@/views/option';
export default {
name: 'bar-chart',
data() {
return {
};
},
methods: {
drawBarChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
// 绘制基本图表
myChart.setOption(option);
//加载动画
myChart.showLoading();
//axios异步获取数据
this.$axios
.get('static/data/asyncBarChart.json')
.then(res => {
setTimeout(() => {
// 获取到数据后隐藏加载动画
myChart.hideLoading();
// console.log(res.data);
myChart.setOption({
xAxis: [
{
data: res.data.cp //将异步请求获取到的数据进行装载
}
],
series: [
{
data: res.data.product
}
]
});
}, 500); //加载动画时长为0.5秒
})
.catch(err => {
console.log(err);
});
}
},
mounted() {
//调用drawBarChart()
this.drawBarChart();
}
};
</script>
<style></style>
接下来是渲染echarts图表的渲染函数：option.js
// option.js
export const option = {
// title: { text: '简单柱状图' },
tooltip: {},
xAxis: {
data: [],
name: '产品'
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [],
itemStyle: {
normal: {
color: 'rgb(145,199,174)'
}
}
}]
}
接下来是json文件：test.json
{
"data":[
{
"cp": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
"product": [7, 20, 31, 10, 13, 20, 15]
}
]
}
运行效果如图2所示。
图2
估计有小伙伴对myChart.showLoading()和myChart.hideLoading();这两个函数迷糊了吧，这是加载动画，前者显示加载动画，后者判断获得数据后隐藏加载动画。当你的图表数据还没进行渲染或者网速不好时，页面一片空白岂不是很尴尬，所以有这个加载动画来过渡一下避免这种尴尬。用法很简单，一看代码你就知道了。
//加载"加载动画"
myChart.showLoading();
setTimeout(() => {
自己定义的函数(){ }
// 获取到数据后隐藏加载动画
myChart.hideLoading();
}
以上就是普通篇的内容了，接下来就是进阶篇。什么是进阶篇，就是引用vuex，使用store仓库进行存储数据。这里我不会对vuex进行讲述，因为后面我会单独做一篇文章来讲解，这里只是当做工具引用而已，是帮助掌握vuex的小伙伴熟悉vuex和echarts的用法。
进阶篇：
我们先来看一看效果图，如图3所示。
图3 运行效果图
接下来是目录结构，如图4所示。
图4 目录结构图
在代码前我们说一下思路，说个屁，都说了不详细说vuex。翠花，上代码。
父组件pie.vue
<!-- pie.vue -->
<template>
<div class="EchartsCoponent">
<div >
<div v-for="(chardata,index) in rightData" :key="index">
<EchartsCoponent :chartData="chardata" autoresize />
</div>
</div>
</div>
</template> <script>
import EchartsCoponent from '@/components/EchartsComponent'
export default {
name: 'echarts',
data () {
return {
rightData:[]
}
},
mounted() {
this.bindData();
},
methods: {
bindData() {
this.$axios
.get('static/data/piedata.json')
.then(res => {
let pro = res.data;
this.$store.dispatch('axiostest', pro);
this.rightData = this.$store.state.MsgRight;
})
.catch(err => {
console.log(err);
});
}
},
components: {
EchartsCoponent
}
}
</script>
<style scoped>
</style>
子组件EchartsComponent.vue：
<!-- EchartsComponent.vue -->
<template>
<div class="xiao-ring"><div style="width:140px;height:140px;margin: 0 auto;" :id="echarts" class="echarts" ref="echarts"></div></div>
</template> <script>
// 引入echarts
import echarts from 'echarts';
export default {
name: 'EchartsComponents',
props: {
// 接收父组件传递过来的信息
chartData: {
type: Array,
default: () => []
}
},
data() {
return {};
},
methods: {
drawChart() {
const vm = this;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(this.echarts));
// 绘制图表
let options ={
//标题设置
title: {
text: 'ECharts测试',
x: 'center',
y: 'bottom',
textStyle: {
fontSize: 16,
fontWeight: 'bolder',
color: '#999'
}
},
// 鼠标移动到图上的文字显示
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '销量',
type: 'pie',
radius: ['50%', '65%'], //变成空心圆,分别类似于x，y
// data: [5, 20, 36, 10, 10, 20] label: {
normal: {
show: false, //隐藏指示文字
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'bold'
}
}
},
//饼图的指示线
labelLine: {
normal: {
show: false
}
},
data: this.chartData
}
]
}
myChart.setOption(options)
this.autoActive(myChart, options)
},
autoActive(chart, option) {
this.intervalFun(chart, option)
},
intervalFun(chart, option) {
let dataIndex = -1
let dataLen = option.series[0].data.length
this.interval = setInterval(() => {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex
})
dataIndex = (dataIndex + 1) % dataLen
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex
})
}, 1000)
} },
computed: {
echarts() {
return 'echarts' + Math.random() * 100000;
}
},
mounted: function() {
const vm = this;
vm.$nextTick(() => {
vm.drawChart();
});
},
created: () => {}
};
</script> <style scoped>
.xiao-ring {
float: left;
margin: 0 auto;
text-align: center;
}
</style>
数据文件piedata.json：
[
[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
]
]
代码我放到了百度云和github上了，下面是链接。
百度云：
git：
以上就是本文的所有内容了，如果有不明白的，或者需要改进的，都可以留言或者私信我。哦，对了，昨天才看到微信设置不让人加，所以联系到我就随缘了，随缘我们便能相见。