vue项目如何雅的封装echarts


这篇文章主要介绍“vue项目如何雅的封装echarts”,在日常操作中,相信很多人在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图表,主要代码如下效果如下可以尝试拖动浏览器的大小,可以看到,图表也是随着浏览器的拖动自动缩放的。按代码总览的目录去代码里找着看就行了。https://github.com/liyoro/vue-skillEcharts用到的各种图表,基本上都可以在Echarts官方示例和Echarts可视化作品分享上找到,特别是Echarts可视化作品分享,做项目的时候,可以去参考。以上,封装了chart组件,按照上述方式,把图表的option配置和相关处理都放options文件夹下面,调用图表时传对应的option,也就几行代码的事情,算是比较方便了。chart组件很方便复用的,直接就可以使用了。评论里说想动态修改option里面的属性,稍微做了个例子,动态修改pie图表的datacolor属性,这个是直接生产就可以使用的例子了,直接参考代码就行了,不详细说了。想修改什么属性,直接传参就行。传具体参数可以,想修改的属性多了就把参数封装成一个json传也可以。懂得在封装的option里面灵活使用就行。以下是新增的参考代码代码使用都是直接一行调用的效果如下:加上:play-highlight="true"属性就行主要实现的代码在如下文件的playHighlightAction方法里面,参考的echarts 饼图调用高亮示例 dispatchAction实现的。只是简单的高亮轮询,具体各种实现就自己看文档调样式了。到此,关于“vue项目如何雅的封装echarts”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家免费云主机域名学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: PHP对象基础实例分析

这篇文章主要介绍“PHP对象基础实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP对象基础实例分析”文章能帮助大家解决问题。面向过程和面向对象区别类:class,定义面向对象主体的最外层结构,用来包裹主体的数…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/14 11:55
下一篇 01/14 11:55

相关推荐