Echarts的使用和学习心得体会（二）

     上一篇初步介绍了Echarts的下载和学习时的一些心得，这次将详细介绍笔者在学习和使用期间碰到的一些问题和解决的办法。

        

     一、Echarts初始化时的基本设置

         

                 1、坐标双轴设置

                 由于在一些场景的数据展示时，需要一个X轴和左右两个Y轴去显示，此时在option的yAxis中设置。具体代码如下图所示：     

                                              

                                         

如此，便可在设置出双Y轴。

                   2、图例（legend）在每个option中是唯一的

                  由于图例在每个option中是唯一的，如果想使用图例的功能，就设置legend中的show参数为true（要是没写，默认为true）。值得注意的是，在显示数据时，要是加入了legend功能，那么它的name参数值需要和series的name参数值是一一对应的。

                                       

再仔细对比series的name参数：

                                                       

                 3、series的yAxisIndex参数设置

                在对于yAxis，相信也不陌生了，是设置Y轴的一些参数。那么对于yAxisIndex，可以隐约猜出这个参数的用途。当有双Y轴

时，它可以设置链接到的Y轴是具体哪一个。当只有一个Y轴时，该参数默认为0，且链接的就是一个Y轴；有双轴时，从0 开始，依次累加1。

               具体的代码如上图所示，大家可以参考学习。

                 4、图表的大小控制

                在option中，有一个grid的参数，它自己有四个参数分别是 x，y，x2，y2。这四个分别控制Echarts图表中左、上、右、下的

距离。在一些实际情况中，可根据具体的需求实际的去设置参数值，从而实现想要的效果。代码如下：

                                                                                 

                总之：对于具体的参数可以设置不同的效果，需要什么功能和效果，可以具体的查看API文档的说明。（PS：项目中的图表

效果是使用echarts-min.js插件实现的）。

                

    二、Echarts异步加载双轴数据

         在使用Echarts实现图表的数据显示期间，因为需求，需要使用异步的加载方式来请求数据并显示。在实现期间碰到许多的问

题，如请求失败时，重复的请求但必须限制请求的的次数；又如，异步加载数据，实现双Y轴的数据显示。这些问题一个个看似虽

小，但对于初步学习Echarts插件和Ajax的人来说，要费一番功夫去克服困难。

               在实现 双Y轴的异步加载数据时，需要注意：只有同时设置series的data参数，才能显示出相应折线图的折线变化或者柱状图

的累积图形。具体可以参考下图的代码：

   

 

                switch语句的代码段中有另外一个case，大部分的代码几乎是一样的，就不上图了。其中，这两个 case 就是要分别显示

双轴的数据，当我异步请求到双轴需要显示的数据后，同时设置series的data，才可以显示出图表的效果图。如果只是一个case设置

其中的一个data，那么即使后面调用了setOption方法，也是不成功显示的。

                总之：在Echarts的官网中所给的异步加载的例子，加载了单轴的数据，使用setTimeout方法模拟异步加载的方式，真正在

异步请求加载数据时，都会有或多或少的问题和麻烦。只有根据实际的需求，动手去实现，反复的练习和操作，才能学到更多的东

西。（PS：因为项目的原因，本人使用WeX5开发Hybrid APP。因此，希望与各位同行可以有更多的学习和交流，欢迎各位的留言和交流。