vue+echarts实现动态绘制图表及异步加载数据的方法
6 浏览量
2020-10-17
20:57:42
上传
评论 6
收藏 62KB PDF 举报
vue+echarts实现动态绘制图表及异步加载数据的方法实现动态绘制图表及异步加载数据的方法
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇
文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
前言前言
背景：vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。
安装安装
cnpm install echarts --s (我这里用了淘宝镜像，不知道同学自行百度)
实例化
在已有的项目中下载好了echarts 之后，可以打开官方文档，但是我觉得官方文档对于实例化介绍的不够清晰，这也是我为
什么在这么多的文章中还要写的原因，前辈写的太模糊了，我决定好好给后来人，需要在项目中引用图表的人，一些实用，快
捷的东西。
官方文档：
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
不废话，贴代码
1.在需要用图表的地方引入 例如：hello.js
import echarts from 'echarts'
2.hello.vue 中写个容器
<div id='myChart' style='width：600px;height:600px'>
</div>
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异步请求的）
资源评论
