Echarts
一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表
引入官方的话来描述更加的清晰,接下来,看点实际的需求。
某一天一个产品小B给了程序员小A一张图片,“怎么实现我不管,半个小时我就要”。于是故事就这样开始了...
剧情总是始料未及,看到这个图片的小A由于没有用过echarts,心里仿佛一万个草泥马在奔腾,然后火燎火燎的赶往官网查看文档,然后...
文档那么多,怎么看?
此时程序员大佬小C出现,小C对小A说,“echarts很简单的,像这样的需求5分钟就可以写出来了”。接下来到了小C表演时间...(故事曲折离奇铺垫就此结束)
echarts文档比较多,看文档也是需要技巧的,首先,我们看一个最简单的官方例子
通过这个例子你会发现其实echarts配置项里面最主要的就三个属性。分别是xAxis、yAxis和series,以这三个属性为主干去拓展,以此看文档。
xAxis
直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
文档还是比较多,难道都要看完?并不需要,其实只需要关注三个属性,axisLine、axisLabel和axisTick,基本上我们百分之九十以上的项目xAxis只需要用到这三个属性。
axisLine:坐标轴线相关设置
这里只需关注两个属性, show(是否显示)和 lineStyle(基础样式设置),基本上项目只需要用到这两个属性,有其它的可以自己去看看。axisTick:坐标轴刻度相关设置 同理与axisLine一样,只需要关注show和lineStyle(不贴图啦)
axisLabel:坐标轴刻度标签相关设置
这属性基本都是样式设置,比较简单,并且经常用到,这里就讲一个属性rotate。正常显示有时候我们会遇到文本字段比较长,显示的时候图表默认会省略,这时如果要全部显示出来就可以考虑用这个属性,设置偏移。(很重要)
yAxis
直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠
同xAxis一样的是yAxis也需要关注axisLine、axisLabel和axisTick,这三个属性跟xAxis差不多,这里不重复描述了。不同的是yAxis要多关注几个属性,分别是min、max和splitNumber(百分之九十以上的需求只需要操作这几个属性)
min:坐标轴最值
max:坐标轴最大值
splitNumber:坐标轴的分割段数
series
系列列表。每个系列通过type决定自己的图表类型,整个echarts的精髓就在于它了,series!
足足有22种,实际上每一种类型图表的配置都有自己相应的特点,但归根到底无非就是那么四点“形状”、“大小”、“位置”和“颜色”。这里就拿折线图来讲讲,根据类型图自身的特点去看文档,才能更快的掌握哦。折线图 —— 用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上
展开折线图的配置你会发现其实,还是很多!但实际上你只需要关注7个“特点”属性,symbol、symbolSize、label、itemStyle、lineStyle、areaStyle和smooth。
symbol: 标记的图形
symbolSize: 标记大小
label: 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
itemStyle: 折线拐点标志的样式
lineStyle: 线条样式
这里有个注意点:修改 lineStyle 中的颜色不会影响图例颜色,如果需要图例颜色和折线图颜色一致,需修改 itemStyle.color,线条颜色默认也会取改颜色
areaStyle: 区域填充样式
smooth: 是否平滑曲线显示
还是那句话,百分之九十以上的折线图需求基本只需要关注这几个点
同理,以看折线图的方式,去看其它类型图,根据相应的特点学习,能以最大效率的快速掌握echarts。
很多同学都对自己没有接触过的知识,突然之间要做这样的需求,多少都会带有一种恐惧或者抵触的心理,echarts也好,其它也罢。文档资料都是第一步,但往往从0到1默默看文档,效率~,一般都比较低。
下面我们来实践一下,直接在官网示例的第一个最简单的图里面改。 根据第一张需求图片我们可以发现y轴是隐藏了,x轴是一条没有刻度的直线。
实现步骤如下: 1.隐藏y轴轴线axisLine设置show为false 2.隐藏y轴刻度axisTick设置show为false
但起始坐标是0,最大刻度值是1000,间隔是100,那用到的就是min、max和splitNumber
这时候你会发现y轴其实已经是差不多了
x轴就更简单了只需要隐藏刻度线就可以了度axisTick设置show为false就可以啦
效果如下:
series就留给感兴趣的同学们自己实现了,无非就是颜色和label设置。
接下来我们讨论一下如何在自己项目里面更好的引用echarts?我司的团队都是用vue技术栈,所以下面会在vue环境里面演示。
传统的实现方式代码:
当然如果是个人项目,自己这样写也行。但作为在公司团队里面开发项目,要考虑的是不是那么简单的东西了。如何把它封装成通用组件?应用到整个开发团队里面的,提高团队的开发效率,也就是基于echarts在vue里面的二次封装。说到二次封装,我们来看看另外一个库v-charts,很显然,早已经有人做了这部分的事情了
v-charts源码感想
v-charts —— 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。
v-charts对新手还是非常友好的,为什么这里要提v-charts呢?并不是帮它打广告,只因源于它的源码!
v-charts源码非常整洁,项目目录功能结构清晰明了,这里我们只需要关注core.js和packages里面的东西,其余的基本都是辅助函数。
core.js就相当于我们刚刚在vue里面传统实现整个echarts的一个流程,但现在被抽象了出来,暴露出的对象在跟packages里面的js对象合并,最后在注册成vue组件。在说一遍,代码非常的整洁明了,正所谓“高内聚低耦合”的经典例子了,感兴趣大家可以去看看GitHub上已经4000多个star了。
"拿来主义"
v-charts的二次封装正好是我所需要的,但对echarts的初始配置转换,我是不需要的。说说个人的观点,当你熟悉echarts时又要做比较复杂的场景时,v-charts的数据格式转换往往让我觉得有点赘余。不过这只是我个人看法哈,我更倾向的是需求来临时直接在官方找个差不多的花一两分钟改好,然后把配置直接扔自己的项目里面,所以我删除了v-charts的数据转换逻辑,留了个枝干。
代码少之又少,恰恰又是我需要的,这样用的好处就是,这个东西做成了通用组件,引用的是echarts原始的配置。于是乎...
我就可以每次把我改好的配置直接扔项目里面,然后这样引入,跟后端同学对接的时候无非就是对象里面几个属性改变而已,这样就极大的提高了团队用echarts开发项目的效率了。正所谓别人开发的东西是迎合大众口味的,改成符合自己的才是最好的,当然非常感谢v-charts提供了这个基础,让我少写很多代码。在说一遍,我是拿,不是偷,说错了,是改,不是复制粘贴。其实,随便啦。
结语
文章就写到这了,希望能对首次接触echarts的同学略有帮助。最后提一点echarts里面还有一些隐藏的api,当你发现你当前配置项目并没有暴露出你要实现的需求时,如果其它相同的配置项里面有这个,你就可以那样写。比如:series各个类型的color默认从取色板获取,但实际上你发现是可以用图片代替的,但这个api只在全局backgroundColor里面出现过。没想到吧,骚年!如果喜欢请点个赞,本人水平有限,那些地方讲错了,麻烦请指出来,万分感谢!如有更好的应用或者学习echarts的方式,请在留言交流,谢谢~