一笔浓墨画佳人的博客

在切换日期结合父子组件一起用的时候我们可能会遇到初始化不展示图表的情况，如果是这种情况的话，子组件展示数据的时候就需要加定时器了，这种情况的话可能定时器写1s还是不行，我这里写的是5s，因为5s一下的我这个都不行，目前具体是什么原因还没有找到，可以结合这个看。获取数据的函数跟子组件展示数据的函数不能弄反，不然还是不行，具体什么原因，看这个。

我初始化是只展示一部分，这时候我们给子组件里面展示数据的部分加一个定时器就好了。如果定时器写的一秒还是不行的话，就往大写几秒。

接下来就是值相加，我这里用的比较老的方法，for循环嵌套，思路：肯定是得判断日期如果相等的话，让三人的实际消费相加，计划消费相加，超出消费相加，既然要判断，那么if跟for肯定是必不可少的，数据当中有三个人在同一天日期，那么我们就需要写三个for循环，如果是两个的话，那么就写两个for。给大家看看效果，上面这个数据是我自己写的，跟效果图数据不一样，但是样式一样，因为这个效果图是昨天刚做好的，代码都是跟公司有关的，所以不方便放出来，自己就写了个格式一样的数据。2、去重，截取，获取日期的最后两位。

当我们在用vue写echarts的时候，有时候会发现，有的echarts占满div，有的占不满。这是因为你可能没有写grid属性，把这个加上就好了，根据自己的实际情况来设置上下左右间距。

在折线图中，我们可能会在每个数值上面加小圆点或者小圆圈，只需要在series中加symbol即可，以下是两种效果，当symbol值为none的时候，则没有小圆点或者小圆圈，当值为false或者‘ ’时，形状为小圆点，不写symbol属性的时候，形状为小圆圈，值为none的时候，没有小圆圈或者小圆点。我们还可能会设置折线图为曲线， 只需要在series里面添加smooth即可，值为0-1，值越大，曲线程度越大。

我们将获取到的data中需要的值push到一个数组里面，然后取最大最小值。我这里用的是sort排序，因为其他取值方法在我这个项目当中会有bug。取到最大最小值之后，把他们放到yAxis当中用max跟min来表示，这里的话我最大值+10，最小值-10，这样看着更加直观一点。我们在项目当中都是调用接口来获取数据，有的时候数据的值很有可能相差非常小，这时候他就会显示的跟一条直线一样，像这张图一样。这个时候的话测试可能会要求我们去修改一下，不这样展示，我们就可以来设置y轴的最大最小值。

normal就是用来判断我们颜色的，label是判断柱状图顶部的值显示与不显示。我的案例是vue接收后台的数据，并且对一个固定值进行判断显示。公司电脑不允许截图，只能手机拍照给大家看，见谅！这里我们可以输出params来看一下，效果如下。先看效果，如果是各位想要的，可以继续往下看。