如何学习ECharts - 《ECharts》

step1：配置项文档&API文档
step2：使用手册 & makeapie & Examples
setp3：github issues & echarts Instance
step4: 源码&底层Zrender

要想全面的了解ECharts
以下部分的内容是不可或缺的

step1：配置项文档&API文档

这部分内容是几乎没有什么理解成本的

配置项文档犹如查字典，只需要自己在官网任一Example中尝试，即可明白配置项的含义，进而在后续的使用中调用
ECharts Example有将配置项保存的功能，非常好用，只需要通过一个链接，就可以保存你自己敲过的DEMO，非常适合初学者
下面罗列一些自己近期敲过的demo，作为例子

1.填充俩条折线中间的区域 https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradient&code=PYBwLglsB2AEC8sDeAoWsDGwA2wBOAXLANoDkAxABwAMAYrQIICspANLBddQCLf1sdyAZgDsDAEz92Fel0oiBM2gCFaXUgF1WaWJDDYApkVTp0YAwA8wRUgHE8AQwAmEA9DCwAymAcYA1gZOsAx4Bg6wAMIAFg54YKQ6AL7aZsA4kCDGOmZ4EADmeQaEHA4WEADObNmwpRUACsAQ7kVZpqZgAJ4gRhwYeMDllSltsNgOAEYG2K0j6OO-fnn9AK7QThE4-DbkAGwOIgCclCzV6InV52fDhoVrM-hODj5EZAAyTQawAIyK79Cf4l-H1gQiB1gABYwZ8WBoksMwGlsONgBZ7rAAGZhMDLULo9DlBwANwMDHKAEkALYOQrGS6menJHRLCBOdGGDHWDhCACkVTauTyUS5pAhfOGc2AYERlJsvP5piw7gcTVeEymRDAeGWBnhOgsDDK5Re1RMI063RsGCeBjy-A6CraKNWjzwHVsDkymIc2HKBglpkezxIpAAsjBFAAVHWKADqgSjUWWilouUUnie6dWmguOi0Og6hoqJraZraFp6pCJPpjufQ-YJRVcxpIptOsGgDkplb-nx-AbMXUr2A-jtM5R8_hskalPrHBMnfm8jnMeQ6Nh92HnsHKlLSYCimu1_vbI-3g6hnxpgA7qyD0RqO2mbNylFgDfPB1KSjpt7fSesyxGEF5Xsg7boKAvgQJ0j4AHSUAOiqbIQpB4Hk8wABTUKwOF4QAlAkswviMBiUiAMTlMW4GzOgGLABgywtqQfq5AYlTPkhQYOC8XwQjhsDiEI4jsF81BfOw4g7BC7AHAJQj8ZJTDUHCbQkegZamJ23Y2L2gnbhWNhngY24Tgs06zluSFmf4y42muG7YFZ7a7vuh66MeSHGaBPSaW0d5OA-sBPsR1nvp-36_kQGI-n6SHAQ4PnXpBIDQbBwUIUh6BYLgxT_DesAGBgMRxOUcFLJ6UQQBgcG9rE9jOK47jYewAkCRJra0aYfm0cAGIYn6XI4RBIw5VsHDoeMLWCeIHXiEwTCESNVzLTRXWmH1A0GFyEmrdlKE2JNmEiCIolfAcSmLUR630rMGj4Zx7ZkRRDhUS2PV0QxTE2KxzbXWpXFPDxJAALRfOIAkg-IlAid8XxzQpkkQ-wCnyWJqkMnmKCJAA3EAA 2.markLine的使用 https://echarts.apache.org/examples/zh/editor.html?c=line-smooth&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiABwATAAMPLAAnADMqVnZ6QCMhbkALFnFqUVVubmZsMX56dahHhTUdP4Q0MrtpHgAtsDAYNpEYBxKA-hDjBwA1gAKwL1gbnEeQmAiMVsJSJ5dsvMYMtCMQ96SjOewDgceR503Q70XVzcSHw9PsLYEg9ZrB5ksADK9bzuIFhchDABGwH8Yn-6Fo0Bg_TRshAzAmAHoCRIGgA6bI8ACsuVJqQAwsUAGyk5JUmkFSmk3I8crFUkAdipXJ4qX5pMZJiZLJFPDJFPp5UpMspzMqzVJSpVpMqovFJkVbNpsvS5MNqQAXrASSaKTTKQyxYzZRqeMzWcVytrXdLdYz6Jl1dziibWalPaUw6TgxHw3Typ6OXzBZSleUbVSlb66ZTPRSPV741HnUq5cXLSTmbbOcl_TwTYySgBaE1q5um4raRt83L0NtK9Jt7Jt3LZIc2rsANWK2Q1_rbTpbXbr5K7AAlcn6Tf3lxSWzueMUJ7lq-XdazjyzYLX60298VBwfO93e1u64Ph6P34fp7OB_Xl-US7jsUq6iv6LqZOme7psU4JnrK1ZwWK54nsEsIAiC6B4PCSL-CYEDmt4ojJI0aZtP82GIsiADyABmtHhBsMSNOIlLpAApDIrTkehOx7KIohHPQowcAIYjcjkFTWMCyBXiJYkxBJJGtA81iAgkdhxJp6C2HYADcQA

值得注意的一点是，文档中有些内容并不准确
1.部分配置项是没有效果或者不符合预期的
比如rich并不会继承label中的样式等
2.配置项并不完整
比如常见的border等属性，其实在某些未在配置项中申明的地方也可以使用
这里需要有对ECharts底层库Zrender的理解
其实在ECharts任何设置样式的地方，你都可以逐一尝试Zrender的图形配置项
https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable
3.API文档不够完整
比如做数据与坐标的映射，虽然API文档中暴露了convertToPixel和convertFromPixel俩个方法
但其实并不能满足所有需求，因为该方法只对series图形有效

比如以上俩个方法无法满足，在dataZoom中绘制标记线的需求

要在zoomSlider中绘制线，其实应该先获取该组件的外接矩形，然后基于该矩形进行定位，通过graphic或者customSeries，直接以像素进行绘制

但文档中并没有提到获取组件外接矩形的相关API

step2：使用手册 & makeapie & Examples

https://echarts.apache.org/handbook/zh/get-started/
乍看之下似乎只是echarts的理论集，不过中间穿插了很多实用的例子

在应用篇中，可以找到【如何监听点击空白处】的示例，也可以找到如何实现一个【动态柱状排序图】，可以说是从配置项到活用ECharts的例子

makeapie则是旧版的echarts社区
https://www.makeapie.cn/echarts
目前只有国内的镜像还在维护

官网的examples中很多部分也是由此而来
可以找到很多开发自己封装的轮子

比如机场甘特图中，如何在canvas中实现滚动效果
https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight
仅在外部浏览，是获取不到这个轮子的相关信息的，必须体验例子之后才能get到
所以每个Example和demo都值得细看

setp3：github issues & echarts Instance

对于上述的问题，其实可以在github的issues中找到相关的蛛丝马迹

issues是一个相当鱼龙混杂的地方，菜鸟和高手都混迹其中，官方开发及维护人员也会偶尔出现，但实际上更多的还是提出问题的初学者，所以很多一部分问题其实都是没有营养的。官方主力开发【沈毅】也曾表示在社区维护初期，他无法理解用户为什么会提出很low的问题，但后来他逐渐理解，每个人的水平和思考方式都是有差异的。

如果你经常逛issues，可能会发现一些热心高手在解答问题，记得关注他的动向，收集他的回答，从而进一步学习ECharts，在这些高手的回答中，你可能会学习到没有写在文档中的API，以及一些奇技淫巧

如果遇到无法解决且其他人没有遇到过的问题，也可以尝试在issues下艾特官方开发人员，或者直接发送邮件。

这里罗列一些常用的关键API

let myChart = echarts.init().setOption({})
// 获取某个组件的图形信息
let someComponentModel = myChart.getModel().getComponent(${some component name like 'xAxis'},${componentIndex, default as 0})
let someComponentView = myChart.getViewOfComponentModel(someComponentModel)
// 获取某个系列的图形信息
let someSeriesModel = myChart.getModel().getSeries()
let someSeriesModel1 = myChart.getModel().getSeriesById()
let someSeriesModel2 = myChart.getModel().getSeriesByName()
...

除了在issue中沙海淘金，你也可以尝试把echartsInstance挂载到window上，然后在chrome的devtools里进行调试，逐层打印对象及方法，获取API文档中没有提及的部分。

不过很多方法对于ECharts的初学者，在文档没有提及的情况下实际上是难以使用的
方法含义及传参列表均没有在文档中说明

step4: 源码&底层Zrender

对于上述的问题，可以尝试在源码中检索，通过在源码中搜索API的使用，找到API的定义及面向的场景
尤其需要注意某个API的test文件，在测试中会列举API不同参数的用法，可以深刻理解API的应用场景

另外便是学习Zrender的API，因为所有绘图元素都是通过Zrender绘制的，所以在静态图表中，可以通过getZr()或者getViewOfComponentModel等方法，获取到绘制层的zrender实例，通过zrender的api，直接操作绘制层对象，改变视图层的展现效果。

不过需要注意的是，该方法并不适用于动态图表，因为echarts独特的更新机制（具体可以参考另一篇文章中的内容https://www.yuque.com/fangkuaier-klqlh/lhiid8/xm6whi）