vue+echarts实现动态绘制图表及异步加载数据的方法

前⾔

　　背景：vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接⼝请求回来的。安装

　　cnpm install echarts --s (我这⾥⽤了淘宝镜像，不知道同学⾃⾏百度)实例化

　 在已有的项⽬中下载好了echarts 之后，可以打开官⽅⽂档，但是我觉得官⽅⽂档对于实例化介绍的不够清晰，这也是我为什么在这么多的⽂章中还要写的原因，前辈写的太模糊了，我决定好好给后来⼈，需要在项⽬中引⽤图表的⼈，⼀些实⽤，快捷的东西。

　　不废话，贴代码

1.在需要⽤图表的地⽅引⼊ 例如：hello.js

import echarts from 'echarts'

2.hello.vue 中写个容器

3.在hello.js

export default { name: 'hello', data () { return {

msg: 'Welcome to Your Vue.js App' } },

mounted(){

this.drawLine(); },

methods: { drawLine(){

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表

myChart.setOption({

title: { text: '在Vue中使⽤echarts' }, tooltip: {}, xAxis: {

data: [\"衬衫\⽺⽑衫\雪纺衫\裤⼦\⾼跟鞋\袜⼦\"] },

yAxis: {}, series: [{

name: '销量', type: 'bar',

data: [5, 20, 36, 10, 10, 20] }] }); } }}

这样就调⽤好了视⼒了，在页⾯刷新就可以了　　效果如图：

这样是很简单的⽅法，嗯重点来了，我的数据⼜不是写死的~数据都是后台给我的呀（官⽅，还真的没有怎么说，⽰例也是ajax异步请求的）

项⽬⼀开始是有完整的⼀个表格数据，也就是我要把表格数据绘制成图表，还有⼀堆的筛选条件，有点懵逼~　　感觉问题很多啊，给我五分钟，分析分析，分解分解⼀下

　　1.数据我都是有的，我需要绘制四条折线，表格数据循环复制给新的四个数组（筛选条件⼀变，四组数据也跟着变）　　2.横坐标也是动态，项⽬是时间（刚开始我还想偏了，⾃动填充⽇期的那种），表格的第⼀⾏就是⽇期，同样⽤新数组储存

　　3.数据重新请求了，我的图表也要跟着变才对呀（图表重新绘制）　　再次贴代码（废话再多，不如⼀⾏代码）

1.在调⽤筛选条件的⽅法那⾥，创建五个新的数组（四条折线），横坐标（⽇期） 这⾥没有代码2.横坐标动态的：

xAxis: {

type: 'category',

boundaryGap: false,

data: this.xData, //xData 就是⽇期这个数组 },

3.series （四条折线的数据）

series : [{

　　　　name:this.tooltipData[0],　　　　type:'line',　　　　stack: '总量',

　　　　data:this.new_userData,　　},　　{

　　　　name:this.tooltipData[1],　　　　type:'line',　　　　stack: '总量',

　　　　data:this.new_deviceData,　　},　　{

　　　　name:this.tooltipData[2],　　　　type:'line',　　　　stack: '总量',

　　　　data:this.active_userData,　　},　　{

　　　　name:this.tooltipData[3],　　　　type:'line',　　　　stack: '总量',

　　　　data:this.active_deviceData,　　}]

4.随着筛选数据，重新绘制图表

调⽤筛选条件⽅法的时候再调⽤这个实例化 drawline ⽅法就可以了 this.drawLine();

总结

以上所述是⼩编给⼤家介绍的vue+echarts实现动态绘制图表及异步加载数据的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！