首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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还不完美，像雷达图的宽高也是写死的，还没来得及做更多的优化，后面有空慢慢再完善它~

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

vue之将echart封装为组件

- Author -

四小七

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由
Jun 28 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js的参数有长度限制吗？发现不能超过2083个字符
Apr 20 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JavaScript字符串对象slice方法入门实例（用于字符串截取）
Oct 16 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
详解VUE 数组更新
Dec 16 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 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
多维数组(1) Spring-Retry(1) Sqlite(2) 多线程(6) Fragment(1) Spring Boot(5) EventBus(1) IDEA(2) OpenLayer(1) android studio(3)
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php提取微信账单的有效信息
2018/10/01 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
VUE接入腾讯验证码功能（滑块验证）备忘
2019/05/07 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
python爬虫入门教程--利用requests构建知乎API（三）
2017/05/25 Python
深入理解Python中的super()方法
2017/11/20 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python正则表达式指南 推荐
2018/10/09 Python
python自动化生成IOS的图标
2018/11/13 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
StubHub德国：购买和出售门票
2017/09/06 全球购物
初一英语教学反思
2014/01/11 职场文书
《将心比心》教学反思
2014/04/08 职场文书
超市创意活动方案
2014/08/15 职场文书
暑期培训心得体会
2014/09/02 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
趵突泉导游词
2015/02/03 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
python读取mnist数据集方法案例详解
2021/09/04 Python