最近在做一个移动端的小项目,然后里面用到了echarts,由于之前从未在移动端用过,所以花了很多时间来处理这个图表,今儿借此机会来这里简单整理一下:
当然了,什么东西还是看文档比较方便echarts官网;如果有什么地方不对,还请不要手下留情,给指出来----
首先,如果画出一个环形
如果要画出如图效果呢----
我们先来看看这个图表,首先要画出一个圆环,so easy,然后就是左上角的标题,那个也很简单,在我们的文档中有一个“legend”, 我们来看看其中设置的参数:
这个里面有几个参数不需要过多介绍,大家都是成年人,一看便懂!!
简单的说说“selectedMode”这个参数可以设置true,false,single;至于什么效果,这里不做过多阐述,如果大家有兴趣可以自己尝试,当然,我们一般默认都会选择“true”对吧,因为我们每件事都想做对!!!
说完了左上角,那么我们再来说说那个小黑屋,是怎么做到的呢!!!
我们可以找到“tooltip”这个参数
他里面有一个formatter,这个地方就是控制小黑屋里面的显示的!
咦,为什么不是这样的呢!!!
这个是图表中默认的,当然没有这么绚丽的小黑屋了,那么问题来了,到底怎么操作呢,请看代码
这个label里面的normal中的formatter就是处理我们小黑屋的;这里需要解释下:
'{a|'+name+'}'+' '+'{per|'+percent+'}'+'\n{hr|}\n'+'{b|'+value+'元}'
这一行乱七八糟的东西是什么啦!!!
在文本中,可以对部分文本采用 rich 中定义样式。这里需要在文本中使用标记符号:`{styleName|text content text content}` 标记样式名。 (注意,换行仍是使用 '\n')'{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'。
然后就是写样式,这个洒洒水啦!!!
接着,咋来说说中间的那个“1234”----啥也不说,直接上代码!!!
前者只是标题,后者是图形元素组件graphic,这个可以作出很绚丽的图表,有兴趣的可以去这里研究图形元素组件graphic。
讲完了吧,额,对了还有给圆环中每个单项设置颜色,看着这个颜色属于渐变色对吧,上代码
当然,我们可以直接设置color: ['red', 'yellow', 'blue'],
上述图片中有一个参数globalCoord,讲讲:线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置,默认缺失的时候是false。
然后里面的type,我们都知道有线性渐变就有径向渐变
好了,好像说完了,当然了在一个vue项目中使用:
首先在我们的项目的main.js中要引入echarts组件,然后全局注册
然后在我们的项目中使用
然后就没有然后了,好像就这样屡屡咯!!!
最后上一张效果图,还很OK吧!!!