vue之将echart封装为组件


Posted in Javascript onJune 02, 2018

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的组件。

阅读之前,可以先看看我之前的一些文章,这样能更好的理解这次的内容:

【使用vue-cli(vue脚手架)快速搭建项目】:https://3water.com/article/140498.htm

【vue之父子组件间通信实例讲解(props、$ref 、 $emit )】:3water.com/article/140581.htm

1. 安装Echarts

首先第一步,肯定是安装Echarts了。通过cd命令进入项目根目录,然后敲以下命令行:

cnpm install echarts -S

安装成功会如下显示,package.json里的dependencies属性也会自动加上Echarts依赖:

vue之将echart封装为组件

安装Echarts

vue之将echart封装为组件

package.json

2.在vue项目中使用Echarts

安装成功以后,我们先要考虑的是如何在vue项目中导入Echarts,并成功初始化一个图表。

下面我会先建两个.vue文件 chart.vue 和 radar-chart.vue 作为这次示例的基础。 chart.vue的角色是调用雷达图,radar-chart.vue的角色是提供雷达图:

//chart.vue 
<template>
 <radar-chart></radar-chart>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart
 }
</script>
//radar-chart.vue
<template>
</template>
<script>
 export default {
   name: "radar-chart"
 }
</script>

好,正式创建一个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 
<template>
 <radar-chart></radar-chart>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart
 }
</script>
//radar-chart.vue
<template>
 <div id="radar" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷达图组件
 import 'echarts/lib/chart/radar'
 // 引入提示框和图例组件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 export default {
  name: "radar-chart",
  mounted(){
   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'}}
      }
     ]
    }]
   }
   //初始化图表
   const chartObj = echarts.init(document.getElementById('radar'))
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

出来的效果是这样的:

vue之将echart封装为组件

效果一

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 (父组件)

<template>
 <radar-chart :items="items"></radar-chart> //传递在子组件prop选项里约定好的数据
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart,
  data () {
   return {
    items: [{name: '体育', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}]
   }
  }
 }
</script>
//radar-chart.vue (子组件)

<template>
 <div id="radar" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷达图组件
 import 'echarts/lib/chart/radar'
 // 引入提示框和图例组件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 export default {
  name: "radar-chart",
  props: {        //接受父组件传递来的数据
   items: {
    type: Array,
    default () {    //默认数据,没有数剧的情况下启用
     return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '语文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美术', value: 59, max: '100'}]
    }
   },
  },
  mounted(){
   let values = [] //提炼接收到的数据
   this.items.forEach(el => {
    values.push(el.value)  
   })            
   const option = { //覆盖配置数据option
    tooltip: {},
    radar: {
     indicator: this.items, 
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: values, 
       name: '各项得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }
   //初始化
   const chartObj = echarts.init(document.getElementById('radar'))
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

封装以后,就能传递自定义的数据,反复调用了。上面代码最后的效果是这样的:

vue之将echart封装为组件

效果二

4.细节优化

基本的功能已经实现了,下面我们来优化下一些细节。

不知道大家有没发现radar-chart.vue里的<template>-id是写死的,这会出现什么问题?当一个页面调用两次这个雷达图组件,id就会重复了,从而报错。

为了解决这个问题,我引入了uuid(vue-cli项目自带,不需另外安装),意在为每个生成的雷达图配一个不重复的随机id。还需要注意的是,我们要在created()方法里去做这个生成id的事情,如果写在mounted了就会出现无法初始化的情况,因为来不及渲染新的ID,就执行document.getElementById()了,具体代码如下:

<template>
 <div>
  <radar-chart :items="items_one"></radar-chart>
  <radar-chart :items="items_two"></radar-chart>
 </div>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart,
  data () {
   return {
    items_one: [{name: '体育', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}],
    items_two: [{name: '体育', value: 22, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}]
   }
  }
 }
</script>
<template>
 <div :id="elId" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷达图组件
 import 'echarts/lib/chart/radar'
 // 引入提示框和图例组件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 //引入uuid文件
 import uuidv1 from 'uuid/v1' 
 export default {
  name: "radar-chart",
  props: {
   items: {
    type: Array,
    default () {
     return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '语文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美术', value: 59, max: '100'}]
    }
   },
  },
  data () {
   return {
    elId: ''
   }
  },
  created(){
   this.elId = uuidv1() //获取随机id
  },
  mounted(){
   let values = []
   this.items.forEach(el => {
    values.push(el.value)
   })
   const option = {
    tooltip: {},
    radar: {
     indicator: this.items,
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: values,
       name: '各项得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }
   const chartObj = echarts.init(document.getElementById(this.elId));
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

成功解决重复id的问题:

vue之将echart封装为组件

效果三

整个封装echart的思路就是上面那样了,其实这个demo还不完美,像雷达图的宽高也是写死的,还没来得及做更多的优化,后面有空慢慢再完善它~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
搭建vue开发环境
Jul 19 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
详解如何运行vue项目
Apr 15 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
React学习笔记之高阶组件应用
Jun 02 #Javascript
浅谈node中的cluster集群
Jun 02 #Javascript
详解AngularJS 过滤器的使用
Jun 02 #Javascript
简化vuex的状态管理方案的方法
Jun 02 #Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 #Javascript
You might like
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
土木工程专业自荐信
2013/10/04 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
影视广告专业求职信
2014/09/02 职场文书