本文小编为大家详细介绍“vue项目中如何封装echarts”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue项目中如何封装echarts”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1、Echarts使用时，都需要写一堆的option，如果每个图表都要写一个，一个文件里面的代码量是很大的2、不方便复用1、方便复用2、展示类的图表，数据与业务、样式分离，只传数据就行3、项目里需要用到的图表会有多个，实现少代码自动化导入，不需要一个个import4、本人图表用在大屏数据可视化的情况比较多，采用的是等比缩放的方式，所以图表也能根据界面缩放自动缩放，不需要手动调用5、图表可配置涉及的文件如下（具体参考代码）：这里定义了一个名为ChartView 的组件，开放了4个可配置的属性：宽度width，高度height， 是否自动调整大小autoResize（默认是）， 图表的配置chartOption。这里默认用Canvas 渲染图表了，也可以用SVG的，自选吧具体代码如下这里主要利用require.context，把options里面定义的图表遍历导入，这样就不需要在代码里一个个import了，特别是图表多的时候。这里展示下如何封装自己想要的图表在Echarts官方示例上随便选了个示例在options下新建一个bar目录，bar目录下新建一个index.js文件。（个人习惯而已，喜欢每个图表都独立文件夹存放。不喜欢这种方式的，可以不放目录，直接js文件，但是components–chart–index.js要对应修改下）直接复制示例的option代码index.js具体代码如下testBar方法是可以传参的，具体使用的时候，图表所需要配置的属性，如：data数据、图表颜色……等都可以作为参数传。这里全局引入下封装的Echarts组件，方便界面调用。（至于单个引用的方式，就不必多说了）具体代码如下：这里展示下如何调用封装的bar图表，主要代码如下效果如下可以尝试拖动浏览器的大小，可以看到，图表也是随着浏览器的拖动自动缩放的。按代码总览的目录去代码里找着看就行了。Echarts用到的各种图表，基本上都可以在Echarts官方示例和Echarts可视化作品分享（已停服）上找到。以上，封装了chart组件，按照上述方式，把图表的option配置和相关处理都放options文件夹下面，调用图表时传对应的option，也就几行代码的事情，算是比较方便了。chart组件很方便复用的，直接就可以使用了。评论里说想动态修改option里面的属性，稍微做了个例子，动态修改pie图表的data和color属性，这个是直接生产就可以使用的例子了，直接参考代码就行了，不详细说了。想修改什么属性，直接传参就行。传具体参数可以，想修改的属性多了就把参数封装成一个json传也可以。懂得在封装的option里面灵活使用就行。以下是新增的参考代码代码使用都是直接一行调用的效果如下：效果图加上:play-highlight="true"属性免费云主机域名就行主要实现的代码在如下文件的playHighlightAction方法里面，参考的echarts 饼图调用高亮示例 dispatchAction（见文末）实现的。只是简单的高亮轮询，具体各种实现就自己看文档调样式了。读到这里，这篇“vue项目中如何封装echarts”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。
这篇文章主要讲解了“thinkphp如何实现全选和删除功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“thinkphp如何实现全选和删除功能”吧！ 一、全选功能实现1.在视图文件中，我们需要添加一个全选的按钮…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
