因为最近工作上遇到了一些问题，很大一部分原因是因为要完成的工作中需要的知识以前没有接触过，所以导致没能来得及更新博客。其中一个问题就是Echarts的使用，因为我深知每一个开发者们的时间都是非常昂贵且有限的，并且能看到这篇博客肯定是遇到了和我同样的或者有关联的问题。因此我会尽量将我在使用echarts中遇到的问题，以及怎么解决这些问题的给出尽可能详细的步骤。这是最后的效果图：

        当然，任何的文档或者博客都不可能是完美无缺的，所以我得提前暴露出这篇博客的缺陷：这篇博客主要是以Vue框架为主导，并在此基础上使用Echarts的，因此，如果是使用React和Angular框架的道友可以直接看Ecahrts的使用部分以及分析过程。

        1.如何在Vue框架中使用Echarts?

        在很多情况下，开发者们为了快速构建页面，实现便捷操作，往往会采用大量的jquery函数，那么使用jquery后，再结合Vue框架，就必然会在$关键字下出现问题，一般，我们操作jquery函数，this使用的是$代替，操作css时，必然如下图所示:

       但是，Vue框架也默认的是用$绑定的this，那么必然会出现问题，因此，如果需要同时引用jquery和vue或者其他框架的情况下，一定要注意快捷符号的使用。

      首先在Vue框架中使用Echarts必须要给Echarts一个宽高，并给定一个id,这样是为了方便后续操作，如下图所示:

      关键点来了：如何在通过vue来使用Echarts？只需要通过下面这行代码即可

      通过将echarts绑定至Vue的原型prototype即可，因为任意对象的构建都离不开构造函数，而构造函数中包含的原型属性和方法等其实都是由原型链提供的，因此，只要将当前文档下的echars绑定zhiu至Vue对象原型链下，必然可以让当前的Vue安心的使用Echarts的方法和属性。

   2.怎么使用Echarts进行绘图？

       毫无疑问，使用Echarts主要是为了方便快捷，虽然Echarts给我们提供了他们认为“尽可能完善的文档”。但是，奈何需求的多样化，使得文档里只给出了最简便的图例，而这，完全不够应用于我们现实场景中。这就好比，官网给了你1+1=2这个案例，但是公司需求确是让你计算：1876开三次方根，乘以lg897的4次方，毫无疑问，这种情况下，就只能找那些有经验的大佬们吸点欧气补充体力继续奥里给了。不好意思，又忍不住虾扯蛋了。

     下面给出图例，其实我们只需要在对象中运用setOption这个属性，然后将需要的属性进行填充即可

     当然，因为Echarts中的属性过于复杂，因此有的博主进行了大量整合工作，对我的任务完成进度也起到了不小的帮助，在这里，我给出一个较为详细的折线图属性大全地址，如果有需要用到折线图的伙伴可以点击这个链接：Echarts折线图属性，但是个人在运用的过程中仅使用到了以下一些最为实用的属性，如下：

•   grid  -- 控制Echarts图形在DOM元素中的位置
•   legend  -- 在图像的上方给出你绘制图像的描述
•   datazoom  -- 图像下方的滑动条
•   tooltip  -- 悬浮块，这个属性特别主要，结合数据进行动态展示
•   xAxis  -- 图像的X轴
•   yAxis  -- 图像的Y轴
•   sereis -- 涉及到数据交互和展示过程

       Echarts属性大部分都可查，而且有很多详细的文档，但是，唯有tooltip这个属性，是我在遇到众多坑中最坑，也是最难以找到满意答案的属性，在查遍了大量的博客和文章（包括知乎、简书、官网等），均未能找到满意答复，为此，我将结合图片和浏览器展示来说明这个属性的应用。

   首先，给出我们要实现的效果图：

       左边图是没有将鼠标放置至 图形上的效果，右边图是将鼠标放置于柱状图上时的效果，很显然，在大多数情况下，如果给出了相应的echarts图形，那么必然会要求有相应的描述，而实现这个功能的属性就是tooltip，在tooltip中最麻烦也是最难懂的地方，就是怎么获取到数据进行展示，这里就需要用到formatter函数，在给出的图形中formatter函数的具体内容如下：

        显然，所有的数据都来源于formatter函数中的形参p，那么这个p究竟是什么？怎么获取到这个p呢？最开始的时候，我被这个问题折磨的不清，查遍了博客以及各种渠道，仍然没能得到有用的答案，要么就是说这个很简单，然后直接给了一个例子，下面贴了一张图，仿佛在说：“你看，就是这么简单”，完全没有说明，这个东西怎么使用，只是给了一个可有可无的案例，个人觉得博客之所以受欢迎，我觉得最大的帮助并不是给别人鸡汤，而是能确确实实的帮助他人解决问题；有一些博主们确实是想方设法的去说明这个事情，但是却感觉总是隔靴搔痒，找不到重心。因此，虽然是费用心机，想要想方设法的帮助他人，可是人家毕竟是工作了好多年的大佬，完全不会知道这是今天才刚刚上手echarts小白需要什么，为此，作为一个深受其害的小白，我要以一个小白的角度来写这个知识点。

   1.设置tooltip的触发方式，也就是是触发什么的时候能够令悬浮框出现，这里我采用的是axis，因此属性设置的时候就是

       通过设置trigger属性为axis来进行触发，axisPointer这个属性就是设置了出现悬浮框时候周围会存在阴影，如果我们没有设置trigger这个属性，那么放置在柱状图上想获取悬浮框的时候就会报错，报错信息如下：

     报错信息是不能获取到属性name,在源码下找到1007行，如下：

    为什么不能够识别到name属性呢，于是在原代码中，我将formatter中的p信息进行打印console.info(p)，然后查看

     结果发现，这个p不是一个数组，而是一个对象，这个对象中只存在抄表量，而不存在最高气温，最低气温，以及日均抄表量，仅仅只是输出了柱状图中抄表量的信息，显然，是因为触发tooltip事件的时候，我们仅仅只包含了抄表量的信息，那么，为什么会出现这种问题？就是因为我们没有在tooltip中设置相应的轴线触发事件，从而导致tooltip采用了默认的方式，仅仅只是输出了一个对象，那么增加trigger:'axis'后，会发生什么情况呢？

此时,console.info(p)中的p变为了一个包含4个对象的数组，为了详细点，将数组进行展开：

等到了这个时候，就可以根据formatter(p)函数中的p来设置任意你想要的悬浮框内容了。那么p的内容来自于哪儿呢？其实就是series中的数据了，因为是通过轴线进行触发的，而轴线上包含的数据就有4个，为此，我们只要设定好series中的data数据，即可实现你想要的悬浮框内容了。