您现在的位置是:首页 > 文章详情

基于vue2定义自己的图表echart组件

日期:2018-12-13点击:273

先安装echarts cnpm i echarts -S,然后定义父组件

<template> <div> <echarts :option="echartOpion"></echarts> </div> </template> <script> import echarts from './echarts.vue' // 引入子组件 export default { data() { return { // 传给子组件的值,这里以柱状图的参数为例,可以参考官网 http://www.echartsjs.com/examples/ echartOpion: { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value' }], series: [{ name: '直接访问', type: 'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] }] }, cloneOption: null } }, components: { echarts //导入组件 }, mounted() { } } </script> 

然后是子组件

<template> <div> <div style="height:500px;width:500px" ref="myEchart"> </div> </div> </template> <script> import echarts from 'echarts' export default { data() { return { chart: null } }, props: { // 图表的数据是否远程请求 mapdata: { type: String, default: '' }, // 直接从父组件获取 option: Object }, watch: { // 监听父组件传过来的option值 option(val) { if(this.chart) { // 是否存在数据,存在则设置值否则清空 // 这里的setOption()和clear()方法为echart提供的方法,可参照http://www.echartsjs.com/api.html#echarts this.option ? this.chart.setOption(val) : this.chart.clear(); } } }, methods: { initChart() { // 初始化 this.chart = echarts.init(this.$refs.myEchart); // 把配置和数据放这里 this.chart.setOption(this.option); } }, mounted() { // 在这里上面定义了一个mapdata,如果存在则发送请求后设置值,方法一样 this.initChart(); }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose();// 销毁 this.chart = null; } } </script> 

这样就可以引入echart了,不过这里有一个问题就是不同的图配置不一样,而且我们肯很多地方都用到,所以我们要把配置也就是option里面的东西提出来作为公共的部分,这里以柱状图的配置为例:先新建一个options.js文件,文件代码如下:

export default { data() { return { // 暴露出公共配置 barOption: { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value' }], series: [{ name: '直接访问', type: 'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] }] } } }, methods: { // 深度拷贝对象或者数组 clone(obj) { return JSON.parse(JSON.stringify(obj)); } } } 

这时候只需要在需要的地方引入这个配置就可以,父文件修改如下

<template> <div> <echarts :option="echartOpion"></echarts> </div> </template> <script> import echarts from './echarts.vue' // 引入子组件 import chartsOps from './options.js' // 公共配置文件 export default { mixins: [chartsOps], // 这里mixins的作用比直接引入组件的好处是可以直接调用组件里面的方法和属性 data() { return { // 传给子组件的值,这里以柱状图的参数为例,可以参考官网 http://www.echartsjs.com/examples/ echartOpion: {} } }, components: { echarts }, mounted() { // 将配置拷贝一份出来赋值给echartOpion,这时候可以随意修改echartOpion里面的属性,赋值为自己的数据: // 如this.echartOpion.xAxis = xxx this.echartOpion = this.clone(this.barOption); } } </script> 

这里只是介绍了柱状图的配置,其他的如热力图,饼图等配置一样方法,可以将所有配置写在一个文件也可以每种图写一个文件好区分,个人爱好,以上

原文链接:https://my.oschina.net/u/3012119/blog/2987873
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章