写在前面最近因为一些不可抗力的因素，跳槽到一家为高校提供教育服务的公司.刚加入的时候正好赶上PC端项目的重构，主要负责数据可视化这个模块，其实做起来并不复杂，但是过程中也踩了一些坑使用Echarts。这是vue项目实战echarts的第二部分。还没有阅读过上一部分的朋友，请点击这里阅读。学习了上一篇文章，相信大家对如何在vue中使用echarts应该有了初步的了解，可以熟练的在项目中画出自己想要的任何echarts。上一篇文章链接：Vue深入前端丨如何在项目中优雅地使用Echarts（上）没看过的朋友一定要学学上一篇，实践一下~希望看完之后，可以在项目中掌握Echarts的正确使用方式，也可以在我的基础上避免一些坑。学完前面的部分，相信大家会觉得很简单，但是我们实际做项目的时候，我们的数据是通过接口请求返回的。Echarts中如何显示返回的数据？带着这个问题跟我一起学习吧。正文为了保证各位小伙伴能够顺利进行，可以将下面的代码复制到data中，作为request后的调用。chartData={attenceRate：0.125，homewordRate：0.125，topicRate：0.125，starRate：0.125，interactRate：0.125，classAttenceRate：0.125，classHomewordRate：0.125，classTopicRate：0.125，classStarRate：0.125，classInteractRate：0.12雷达图的例子比较简单，所以我们就把数据一个一个放上去，给出option>series的代码，小伙伴们可以照着照搬。系列：[{类型：“雷达”，数据：[{值：[this.userAnalycomplexEchart.attenceRate，this.userAnalycomplexEchart.homewordRate，this.userAnalycomplexEchart.topicRate，this.userAnalycomplexEchart.starRate，this.userAnalycomplexEchart.interactRate]，名称："个人学生"},{值:[this.userAnalycomplexEchart.classAttenceRate,this.userAnalycomplexEchart.classHomewordRate,this.userAnalycomplexEchart.classTopicRate,this.userAnalycomplexEchart.classStarRate,this.userAnalycomplexEchart.classInteractRate],name:"ClassAverage}"}]实际开发中，只需要在接口请求的then中调用Echarts绘图的方法即可。但。..很多时候直接这样填是不行的。比如折线图、直方图等数据比较多的时候，接口给我们返回一个数组。我们需要准确的获取到数组的值，并推送到对应的地方。.下面我将以折线图为例。knowledgeChartData=[{timeDay:“01-08”,knowledgeCount:24},{timeDay:“01-09”,knowledgeCount:23},{timeDay:“01-10”,knowledgeCount:32},{timeDay:“01”-11",knowledgeCount:43},{timeDay:"01-12",knowledgeCount:12},{timeDay:"01-13",knowledgeCount:53},];先给接口数据，请把它自己复制到数据中。下面我也把折线图的选项配置在我的页面给大家，大家也可以复制我的或者复制官方的例子到自己的项目中。option={tooltip:{trigger:"axis"},legend:{orient:"vertical",left:"5%",data:["知乎"]},color:["#FF507C"],网格:{left:"3%",right:"4%",bottom:"3%",containLabel:true},xAxis:{类型:"category",boundaryGap:false,data:[]},yAxis:{splitLine：{lineStyle：{type：“dotted”}}，nameTextStyle：{color：“#b5b8ba”}，type：“value”}，series：[{name：“Knowledge”，smooth：true，type：“line“，数据：[]}]};好的，这里你已经有了一个空的折线图。通过阅读代码，可以看到选项中有xAxis和yAxis，分别对应X轴和Y轴。而里面的数据就是X轴和Y轴对应的数据项。现在我们把knowledgeChartData的值取出来，通过循环放入对应的数据中。this.knowledgeChartData.map(i=>{option.xAxis.data.push(i.timeDay);option.series[0].data.push(i.knowledgeCount);});myChart.setOption(选项);在调整好option后，执行setOption，所有的数据都可以正确显示在页面上了~当然在实际开发中，还是会返回各种界面数据，更多的时候返回的数据需要我们比较，拆分，排序、合并等步骤就可以成为我们真正需要的数据结构。结束语本文主要是介绍一下，让小伙伴们知道如何在vue项目中使用Echarts，真正能够在项目中使用简单的Echarts。越来越多的深入研究需要小伙伴们自己去完成。在处理数据的时候，一些对数组的操作是不可避免的。如果对数组的常用操作不了解，可以查看这篇文章。相信大家学完之后，能够从容地将各种接口返回的数据处理成自己想要的东西。需要的格式，才能在项目中使用各种Echarts~结语以上就是本文的全部内容，如有不妥之处还望指正。感谢阅读，觉得有用请点赞/转发。前端深入系列是一个踩坑系列。是对自己在工作学习中遇到的问题和踩过的坑的探索和总结。在此记录和分享，也是对自己技术的反思和质疑。.前路漫漫，陷阱不断。前端深入系列持续更新中……以上为2020-01-15。
