vue+echarts实现动态绘制图表及异步加载数据的方法_vue数据异步加载,vue异步请求渲染echarts图表 - CSDN文库

异步加载数据

163 浏览量更新于2023-03-03 评论 6 收藏 62KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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异步请求的）

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38748382

粉丝: 6
资源: 923

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈