echart vue 图表大小_vue之将echart封装为组件
最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的组件。
转载链接:https://www.jianshu.com/p/ec39019e2141
阅读之前,可以先看看我之前的一些文章,这样能更好的理解这次的内容:
《使用vue-cli(vue脚手架)快速搭建项目》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
1. 安装Echarts
首先第一步,肯定是安装Echarts了。通过cd命令进入项目根目录,然后敲以下命令行:
cnpm install echarts -S
安装成功会如下显示,package.json里的dependencies属性也会自动加上Echarts依赖:
安装Echarts
package.json
2.在vue项目中使用Echarts
安装成功以后,我们先要考虑的是如何在vue项目中导入Echarts,并成功初始化一个图表。
下面我会先建两个.vue文件 chart.vue 和 radar-chart.vue 作为这次示例的基础。 chart.vue的角色是调用雷达图,radar-chart.vue的角色是提供雷达图:
//chart.vue
//radar-chart.vue
好,正式创建一个Echarts图表了
(1)在radar-chart.vue导入echart :
// 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷达图组件 import 'echarts/lib/chart/radar' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend'
(2)创建图表配置数据,数据格式参考 Echarts官网:
const option = { tooltip: {}, radar: { indicator: [{name: '体育', max: '100'}, {name: '数学', max: '100'}, {name: '化学', max: '100'}, {name: '劳动', max: '100'}, {name: '物理', max: '100'}], center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: [58,56,78,64,98], name: '各项得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] }
(3)初始化图表:
const chartObj = echarts.init(document.getElementById('radar')) chartObj.setOption(option)
上面几步汇总为以下代码,另外补充一点就是,创建配置数据option和初始化的时候,都要放在mounted钩子函数里执行,这样才能保证获取dom的是时候,dom已完成渲染:
//chart.vue
//radar-chart.vue
出来的效果是这样的:
效果一
3.将Echarts封装为组件
上面我们已经成功创建一个雷达图了,但是很明显的是,radar-chart.vue里的数据写死的,无法重复调用。接下来着手封装的事情了。
封装的思路是这样的: (1)chart.vue向radar-chart.vue传递一组个性化数据 (2)radar-chart.vue通过props选项接收数据 (3)提炼接收到的数据,覆盖配置数据option (4)初始化图表 (如果对如何传递数据不理解,可以先看看我在开始的时候提到的,我的另一篇文章 —— “ vue之父子组件间通信实例讲解(props、$ref 、 $emit )”)
具体代码如下:
//chart.vue (父组件) //传递在子组件prop选项里约定好的数据
//radar-chart.vue (子组件)
封装以后,就能传递自定义的数据,反复调用了。上面代码最后的效果是这样的:
效果二
4.细节优化
基本的功能已经实现了,下面我们来优化下一些细节。
不知道大家有没发现radar-chart.vue里的-id是写死的,这会出现什么问题?当一个页面调用两次这个雷达图组件,id就会重复了,从而报错。
为了解决这个问题,我引入了uuid(vue-cli项目自带,不需另外安装),意在为每个生成的雷达图配一个不重复的随机id。还需要注意的是,我们要在created()方法里去做这个生成id的事情,如果写在mounted了就会出现无法初始化的情况,因为来不及渲染新的ID,就执行document.getElementById()了,具体代码如下:
成功解决重复id的问题:
效果三
整个封装echart的思路就是上面那样了,其实这个demo还不完美,像雷达图的宽高也是写死的,还没来得及做更多的优化,后面有空慢慢再完善它~
转载链接:https://www.jianshu.com/p/ec39019e2141
echart vue 图表大小_vue之将echart封装为组件相关推荐
- echart vue 图表大小_vue里echarts自适应窗口大小改变
echarts的图表提供了一个resize方法可以自适应屏幕窗口改变,而重新渲染图表大小的功能. 因此我们只要监听浏览器的窗口改变的resize事件,再结合echarts的图表,就可以实现我们想要的功 ...
- echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
- echart vue 图表大小_vue使用echarts切换tab出现图表被压缩,宽度变窄问题
在作项目的时候,遇到图表在切换试图的时候,发现图表会被压缩起来了,javascript 在tabs切换中有echarts的话,咱们会发现初始化的那个echarts是有宽度的,当点击tabs切换以后,切 ...
- echart vue 图表大小_cesium+vue,性能优化
平时在vue开发中,我们都习惯把所有数据挂载到vue的data对象上,这样做大大简化了我们的开发流程,响应式数据简直不要太爽 但是,针对地图业务的开发,使用了cesium这个开源库的话,其实完全不建议 ...
- vue 中引入阿里图标库,封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库 二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
- Echart自适应图表大小和字体大小
思路:监听window的resize事件,获取屏幕宽度,计算出设计图下的字体大小,通过通过echart实例的setOption()和resize()方法就可以.其中,setOption方法是用来重新设 ...
- vue 圆形 水波_vue 开发波纹点击特效组件
最近在使用 vue2 做一个新的 material ui 库,波纹点击效果在 material design 中被多次使用到,于是决定把它封装成一个公共的组件,使用时直接调用就好啦. 开发之前的思考 ...
- echart整体图形大小调整
https://blog.csdn.net/qq_31229137/article/details/80475231 注意:echart的demo页面的图表大小固定,在echart调整这些参数看不到大 ...
- Echart+Vue制作3d柱状图
Echart+Vue制作3d柱状图 先看一下效果图: 我是根据Echart官网上的实例稍加改变的:Echarts官网实例地址 下面直接上代码: HTML部分: <span class=" ...
最新文章
- opencv获取图像像素值的坑
- 面试官问:如果MySQL的自增 ID 用完了,怎么办?
- struts2+hibernate3+spring3(ssh2)框架下的web应用(1)
- 借助混沌工程工具 ChaosBlade 构建高可用的分布式系统
- C语言学习之时钟函数clock()函数
- Kafka学习-复制
- uac2.0驱动_关闭Vista中令人讨厌的HP驱动程序UAC弹出更新检查
- RedisUtil - Redis功能介绍,五种数据类型的使用,Spring和Redis的集成
- javascript 连续滚动
- Cron 定时任务表达式
- 华为网络技术大赛模拟题目
- word2016安装mathtype之后工具栏无显示
- 可视化图表告诉你,《人世间》《余生,请多指教》到底爆没爆?
- tipask 3.5问答系统部署说明,超详细命令行部署,挂载iso,可内网使用。
- Shell中EOF的用法
- pyqt win32发送QQ消息
- 为什么类只能单继承,而接口可以多继承?
- python语言的特点和优缺点
- 如何将乐家桌面替换成当贝纯净桌面 ,一个步骤轻松解决
- 四大主流云平台对比--CloudStack, Eucalyptus, vCloud Director和OpenStack。
热门文章
- 针对深度学习的GPU芯片选择
- HDU - 6769-In Search of Gold-二分+树形dp
- CF1028F. Make Symmetrical
- Rabbit的工作(2)
- Educational Codeforces Round 107 (Rated for Div. 2) 题解
- [ZOJ 3203] 灯泡
- 2021CSP:游记
- CF1370F2-The Hidden Pair(Hard Version)【交互题,二分】
- P7077-函数调用【拓扑排序,dp】
- P3261-[JLOI2015]城池攻占【左偏树】