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：坐标轴线相关设置
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！
折线图 —— 用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上
展开折线图的配置你会发现其实，还是很多！但实际上你只需要关注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的方式，请在留言交流，谢谢~
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
