00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成这样的一个业务。也就是说啊,一个容器当中,哎,放置多个图表。那么我们刚刚完成了多个容器显示多个图标,那接下来呢,咱们就去完成一个容器放置多个图标。那怎么去实现呢?其实啊,利用的就是系列这个属性serious。那它的属性值啊,是一个数组,你数组当中如果放置一个配置对象叫做派,那么就会出现一个相应的丙图。那如果说啊,你有一个配置对象,它的typeb值为烂,那就会多出一个折线图。那如果说你的系列当中又多了一个配置对象叫做棒,那就会多出一个柱状图。那所以说啊,接下来呢,咱们去完成一个容器当中展示多个图表。
01:05
那咱们呢,去新建咱们的第三个案例。那咱们呢,新建一个叫做零三。零三,那这个呢,是一个容器,哎,一个容器。显示多个图表。好,那当然啊,基本的结构啊,老师就不再写了,我把第一个呢,直接给它拷贝过来啊,那咱们呢,给它考的稳一些,CTRLCCTRLV,那咱们呢给它带回来。那咱们呢,先运行一下,那咱们呢,先看一下它现在的这个程序是长成什么样子。那这个呢,就是咱们最开始绘制的这个图表,一个柱状图,当然啊,目前咱们的只是有一个容器,那么目前而言呢,咱们的容器当中啊,只有一个柱状图,在哪儿呢?在这在serious。
02:07
所以说啊,这里呢,咱们做一下笔记,这个是谁呢?这个是相应的柱状图。那么除此之外,咱们呢,还需要再来一个。比如说啊,在这个容器当中,老师呢还想来一个折线图,那咱们呢,可以再添加一个,比如说type,为什么呢,为蜡。那么它的数据呢,咱们呢,可以给他一些,比如说啊,咱也是十二十三十和40。当然咱们呢,保存一下刷新,你看,你会发现这个容器当中不仅仅只是展示柱状图了,那咱们的折线图也有了。那当然,那咱们呢,也可以去展示,当然这也可以来个颜色color,比如说咱给他来一个粉色啊,上颜色pink。对吧,那咱们呢,可以去看一下子是不是变成咱们的喜欢的这个粉色啊,这是没问题的。
03:06
那以及啊,老师呢,还想在这个容器当中显示一个饼图,那这老师做一下笔记,那这个是什么呢?是咱们的这个折线图。那一集啊,还有咱们的这个饼图,那咱也来一个,那这老师也做一下笔记,叫做饼图。哎,丙图。那这块呢也是一样,也需要给他来一个type。派,为什么呢?就是为咱们的这个叫做派。那么它的数据有哪一些呢?比如说咱给他来一个叫做贝塔,贝塔呢,比如说咱来一个,呃,十二十三十和40。对不,那咱们看一下的有没有这样的一个饼图,已经有了。对吧,但是呢,咱们呢,去看一下子咱们的这个啊,那首先说啊第一个。人家的这个饼图啊,在最外面,线的最外面是不是有文字,而咱们的是没有,那怎么去写呢?那当然你得看人家的这个什么呀文档。
04:10
所以说啊,咱们呢,搜一下子,一看一下子,该如何让这个文字这块显示文字。对不,那当然,那咱们呢,还是得找人家相应的文档。那咱们呢,去看一下的配置项,当然是关于丙图的。那找到咱们的这个系列,找到这个饼图对吧?哎,这是没问题的,那咱们呢,去看一下人家有没有案例,有吧,你看这是不是有人家这玩意儿吧,是咋的呢?哎,可是有这个文字的,但是咱没有,那你看人家这玩意儿是怎么实现的啊,你看啊。首先说人家的这个丙图当中啊,这个数据它可不是一个数组。简简单单的放一些数字,人家呢是由value和内组成的,内幕是什么呢?就是显示的这个文字。
05:01
对不,哎,那么以及呢,这个Y流是啥呢?就是你这个要展示的这个数值。对吧,那所以说啊,咱们这里就可以怎么办呢,可以这么办,哎,放置一个对象。比如说展示的名字咱叫做X,那Y6呢,比如说咱给他来个十,当然它是几个呢?它是四个,那咱再来呗内,比如说叫Y,那值是多少呢?是20,那以及咱们再来对吧I name,比如说叫做Z。那么Y6的值啊,当然这块写错了,应该是K冒号V对吧,那这块呢,应该是Y6为20。对吧,那以及内为ZY6呢,咱们给它来一个30,这样好整对吧?以及咱们再给他来一个,比如说内为XYZ,那这个咱就叫做嗯嗯T吧,哎,值为多少呢?Y6为40,那咱们呢,当然啊,这块你得给我对准了逗号啊,当然那咱们呢,得回到咱们的程序当中去看一下。
06:05
对不刷新看一下,你看能不能看见文字是可以的,但是啊,咱的这个。病毒啊,有点儿大。对吧,而且它只是放在了中间位置,所以说呢,咱们要调调它的宽度和高度。对不,那咱们看一下能不能调它的宽度和高度啊,瞄一眼。瞄眼哎,可以的,这不有宽和高嘛,那所以说啊,咱们呢,可以去调一下它的这个宽度啊,比如说咱给他来个Y的哎,WTH,比如说咱给他来一个呢,150。对不那么高度呢,咱呢也给它来一个he GT高度呢,咱也给他来一个150。对不,那咱们呢,保存一下子刷新看一下子是不是小了那么一丢丢。对吧,当然它的这个位置咱们要调调那位置呢,它呢也有调的,比如说left和top,那咱也调调left来left比如left咱也来个一百五吧,Top呢,咱给他来个比如说100,那咱们先看它的位置有没有变化。
07:11
看一下有没有变化,有吧,但是你会发现一件事啊,什么呢,就是咱们的这个饼图啊,它是多大的呢?它是看一下子,它呢,是这个一百五乘一百五的。对,不,但是你会发现文字它显示不全了,那为啥呢?就是因为地方不够了。对不,它溢出隐藏了,那这玩意儿怎么整呢?这玩意儿咱可以调一下这个,呃,这个这个饼图的这个半径,让半径它稍微小一点。对不,咱们找一下的他呢,应该有一个叫做radiOS,看一下有没有叫radiOS。找一下叫做reducer啊,叫做2a dius,咱们瞄一眼这呢,对吧,Reduce就是这个丙图的半径,因为它至少是个圆啊,2a BI us,比如说啊,咱给他来个15,那咱们先看一下子,你看这个文字它有没有显示出来,是不是就显示出来了。
08:09
对不?所以说这块要注意,当然咱这个数据可以调,比如半径呢,咱让它大一点,比如说来一个25,那这回看一下能不能显示出来,所以说这个数据呢,你是需要调的。对吧?哎,这是没问题的,也就是说整个这个图表是一百五乘150,而你这个圆的半径呢,只是多少,只是25,所以说地方够你就能显示出来了,地方不够那你就隐藏了。对不,那所以说这块要注意,咱们做一下笔记。也就是说饼图,哎,饼图你可以显示文字,但是date的写法得如下面的这种写法了。那一集啊,咱们呢,也可以设置整个图表,哎,就是这个饼图的啥呀,宽度与高度。
09:01
对不,那以及它的位置也是可以调的,就是这个丙图的位置也可以调。当然,那么丙图呢,它是一个圆,这块也要一定要注意它的宽和高是什么?是整个宽是150,高是150,对吧?而你显示丙图这块的呢,它的半径是多少呢?是25,让它稍微小一点,这样文字能出来对不?那这个是什么呢?是丙图的半径,哎,丙图的。半径。那所以说在一个容器当中可不可以展示多个,哎,这个图形是可以的。对吧,那以及咱们的饼图呢,这里呢,也需要注意一下。
我来说两句