前言

背景：在vue写作的后台管理中，需要将表格数据绘制成图表(折线图和直方图)，所有的图表数据都是通过接口请求的。

装置

Cnpm安装echarts(我这里用的是淘宝镜，不知道同学们是不是自己去百度了)

实例化

在已有项目中下载echarts后，就可以打开正式文档了，但是我觉得正式文档不够清晰，没有介绍实例化，所以才要写这么多文章。前辈写的太模糊了，所以我决定给后期需要在项目中引用图表的人一些实用快捷的东西。

官方文件：http://echarts.baidu.com/tutorial.html#5在几分钟内开始使用电子竞技

不废话，粘贴代码

1.比如介绍hello.js哪里需要图表。

从“echart”导入echart

2.在2.hello.vue中写一个容器

div id=' myChart ' style=' width:600 px；高度：600px'/div3。在hello.js中

导出默认{ name: 'hello '，data () { return { msg: '欢迎使用您的Vue.js App' } }，mounted(){ this . draw line()；}，methods: {drawLine(){ //基于准备好的dom，Initialize echarts实例让mychart=this。$ echart . init(document . getelementbyid(' mychart ')//制作图表my chart。set option({ title : { text : ' use echart in Vue ' }，tooltip : {}，xaxis 3360 {data : ['衬衫'，'毛衣'，'雪纺衬衫'，'长裤'，'高跟鞋'，'袜子' Yaxis : {}，系列： [{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 . tooltip data[0]，type:' line '，stack3360' total amount '，data:this.new _ userdata，}，{name3360this.tooltip data [1]，Type:' line '，stack3360' total amount '，data:this。new _ devicedata，}，{name:this。工具提示数据[2]，类型3360 '行'，堆栈3360 '总金额'，数据：此。active _ userdata，}，{name: this。工具提示数据[3]，键入： '行'，stack3360 '总金额'，data:这个。active _ devicedata，}] 4。用过滤数据重绘图表

调用filter方法时，只需调用这个实例化的drawline方法

this . draw line()；

摘要

以上是边肖介绍的vue echarts动态绘制图表和异步加载数据的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！