在vue下封装echarts公共组件的总结

　　这几天公司里边有一个项目，叫做日控制台，该项目是在webview下的一个webapp，使用vue构建，项目中要求使用许多自定义的图表。考察了许多图表组件之后，发现echarts是所有表库中，最灵活，特效最好看的一种。一、构建基础公共组件1。实现基础功能
　　在echart官网上搜索到，如何使用1。获取一个用于挂在echarts的DOM元素letechartsDOMdocument。getElementById（echartsdom）2。初始化letmyEchartsecharts。init（echartsDOM）3。设置配置项letoption｛。。。｝4。为echarts指定配置myEcharts。setOption（option）
　　使用echart的步骤也就这几部，就是先获取到承载echart实例的dom实例，然后调用init（）方法初始化图标实例，最后调用setOption（）方法传入配置项
　　这几步都要在vue的mounted方法下实现。mounted（）｛letechartsDOMdocument。getElementById（echartsdom）letmyEchartsecharts。init（echartsDOM）letoption｛title：｛text：ECharts入门示例｝，tooltip：｛｝，legend：｛data：〔销量〕｝，xAxis：｛data：〔衬衫，羊毛衫，雪纺衫，裤子，高跟鞋，袜子〕｝，yAxis：｛｝，series：〔｛name：销量，type：bar，data：〔5，20，36，10，10，20〕｝〕｝myEcharts。setOption（option）｝｝
　　注：在Vue中，首先我们需要使用importechartsfromecharts以引入echarts。二、组件化
　　思路很简单，就是将业务上用到的图表，比如柱状图、折线图，通通封装成组件，然后再mainapp文件中调用，通过分析，可以通过传props，来改变setOption（）方法中的对象，达到封装不同图表组件的目的。ocEchartsclassechartscontainer：optionsocoptions
　　将之前的options转移到mainapp中的data对象之中。
　　注：echarts图表要求承载的容器具有固定的宽高才能正常显示。echartscontainer｛width：100；height：20rem；｝1。组件优化props的series校验
　　如果在传入组件的props中传入了空对象，就会发现，图表会抛出一个错误，即
　　Error：Optionshouldcontainsseries。
　　原因就是传入的option配置对象不含有series键，所以，默认值处理是需要存在的，即当调用方传入的对象为空或不存在series配置时，应在页面上显示一些提示（对用户友好的提示，而不是对编程人员），即避免因报错而造成空白的情况。
　　此外，当我们像之前那样给option这一参数进行类型限制后，倘若调用方传入非对象类型，Vue会直接抛出错误这一结果也不是我们想要的。我们应该取消类型限制，并在option发生变化时进行依次以下判断：1。是否为对象；exportfunctionisObject（option）｛returnObject。prototype。isPrototypeOf（option）｝2。是否为空对象；exportfunctionisEmptyObject（option）｛returnObject。keys（option）。length0｝3。是否包含series键；exportfunctionhasSeriesKey（option）｛return！！option〔series〕｝4。series是否为数组；exportfunctionisSeriesArray（option）｛returnArray。isArray（option〔series〕）｝5。series数组是否为空。exportfunctionisSeriesEmpty（option）｛returnoption〔series〕。length0｝exportfunctionisValidOption（option）｛returnisObject（option）！isEmptyObject（option）hasSeriesKey（option）isSeriesArray（option）！isSeriesEmpty（option）｝
　　然后在组件中引入最后的isValidOption方法作为判断，我们先使用一个watch监听options的变化watch：｛options（options）｛this。checkAndSetOption（）｝｝，methods：｛checkAndSetOption（）｛letoptionsthis。optionsif（isValidOption（options））｛this。myEcharts。setOption（options）this。isOptionAbnormalfalse｝else｛this。isOptionAbnormaltrue｝｝｝
　　这里的checkAndSetOption方法是判断传入的option是否合法，如果合法，就执行setOption，isOptionAbnormal变量是监控页面是否显示options非法的flag。
　　同样的dom样式上的改变，也要使用vshow来判断isOptionAbnormal是否要渲染图表和渲染错误信息。数据为空。ocechartscontainer，。echarts｛width：100；height：100；｝。shadow｛width：100；height：100；display：flex；justifycontent：center；alignitems：center；fontsize：1rem；color：8590a6；｝2。增强组件功能数据加载提示数据加载中。。。
　　在组件内部需要一个外部的props，isLoading，但是这里需要注意，在Vue中，vshow使用display控制组件的显隐。而当echartinit的时候，如果其挂载DOM的vshow处于false状态，则其init的对象宽高都是0。即使之后vshow状态改变，由于mounted生命周期不会再次触发，从而使得echarts显示不正常。所以需要使用css的visibility来控制显隐。computed：｛isChartVisible（）｛return！this。isLoading！this。isOptionAbnormal｝｝，3。组件复用随机ID
　　echarts进行init挂载时使用的是DOM元素的ID。而在组件中，我们设置的ID是固定的（注意与scopedcss进行区分）。如果多个组件的ID是相同的，只有一个组件会被echarts挂载。
　　所以我们要设定一个随机的randomId，赋值到承载echarts图表的dom元素的id中三、延迟加载
　　延迟加载是组件的一个优化，在业务的开发中可以看到，一个页面往往有着许多的图表，图标伴随着许多异步请求和canvas渲染，如果一次性渲染所有的图表会导致许多的性能问题。这里想到的一个解决方案就是延迟加载。
　　用通俗的话讲就是，页面滚动到哪张图表就去渲染哪一张图表。
　　完成这一功能需要以下步骤：监听页面滚动事件；滚动事件中获取echarts的位置；在页面当前位置达到echarts位置的时候进行echarts的初始化。1。监听页面滚动
　　如果要监听页面滚动，需要用到dom的监听器，addEventListener（scroll，〔funciton〕）。这样就能为每一个组件附上监听事件。2。获取当前滚动下边界和组件的上边界
　　这一个步骤需要封装成一个函数，checkPosition（）checkPosition（）｛letwindowHeightdocument。documentElement。clientHeightwindow。innerHeightletscrollTopdocument。documentElement。scrollTopdocument。body。scrollTopletwindowBottomscrollTopwindowHeightconstselfTop。get（this。refs，selfEcharts。offsetTop，0）；if（windowBottomselfTop）｛this。isPositionReadytruethis。checkAndSetOption（）window。removeEventListener（scroll，this。scrollEvent）｝｝，windowBottom（滑动的下边界）scrollTop（屏幕当前滑动的距离）windowHeight（窗口的高度）selfTop（当前组件的顶部位置）
　　当第一个变量大于第二个变量时，就认为滑动到了该图表组件，就开开启加载3。初始化data（）｛return｛myEcharts：null，isOptionAbnormal：false，randomId：echartsdomDate。now（）Math。random（），scrollEvent：。throttle（this。checkPosition，500），滑动事件isPositionReady：false，控制数据异步与页面滚动先后顺序的flag｝｝，mounted（）｛letechartsDOMdocument。getElementById（this。randomId）if（！echartsDOM）returnthis。myEchartsecharts。init（echartsDOM）第一次未滑动的时候this。checkPosition（）滑动之后的监听window。addEventListener（scroll，this。scrollEvent）｝，
　　checkPosition方法不仅要在scroll监听事件中调用，在组件第一次渲染的时候也要调用一次进行初始化，不然，组件无法正常渲染图表。4。节流
　　组件代码经过测试之后发现，如果滚动过于快速，会不停的调用checkPosition（），关键是这个方法会不停的去setOption（），所以以上代码均采用了lodash的throttle节流方法，在500毫秒内只允许调用一次。5。解绑监听事件
　　解绑事件，组件中有设定监听器，如果该图表已经被加载了，那么这个监听器就没有作用了。window。removeEventListener（scroll，this。scrollEvent）
　　这段代码就是解绑监听器，多多少少会优化一下速度吧。因为增加监听和解绑监听的时间函数要求一致，所以在data中新增了scrollEvent，顺便把节流函数一起加了上去。6。请求异步控制setOption
　　由于用于渲染echarts的数据常常是异步获取的，也就是说，option可能会在异步调用结束之后更新，从而触发option的watch，进而导致this。checkOption（）执行，最终使得setOption在页面没有滚动到合适位置时就触发了。
　　为了解决这个问题，我们应该让setOption的过程受制于一个标识位，而该标识位会在页面滚动到合适位置时置为true，从而杜绝由于option更新、触发watch而导致的漏洞。
　　首先，我们要添加一个新的data，取名为为isPositionReady，然后，在checkAndSetOption（）中加入对该标识位的判断：最后，在位置检测方法checkPosition（）中，当达到合适位置时，将该标识位置为truecheckPosition（）｛。。。。if（windowBottomselfTop）｛this。isPositionReadytrue。。。。｝｝，checkAndSetOption（）｛。。。。if（！this。isPositionReady）return。。。。｝四、echarts重绘
　　这里的重绘指的是ehcarts中的resize（）方法。用于在某些时刻进行echarts的调整，包括：组件宽度设置为百分比，浏览器宽度发生变化时；页面收缩元素状态改变，如侧边栏收缩导致内容区宽度变化；1。页面宽度改变
　　继续增加监听器就能完成window。addEventListener（resize，。throttle（（）｛this。myEcharts。resize（）console。log（）｝，500））