如何在vue中将echart封装为组件

这篇文章主要介绍“如何在vue中将echart封装为组件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何在vue中将echart封装为组件”文章能帮助大家解决问题。

成都创新互联公司主营叶县网站建设的网络公司,主营网站建设方案,app软件定制开发,叶县h5微信小程序开发搭建,叶县网站营销推广欢迎叶县等地区企业咨询

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




 .container{width: 500px;height: 400px;}

出来的效果是这样的：

效果一

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 （父组件）

//radar-chart.vue （子组件）





 .container{width: 500px;height: 400px;}

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

效果二

4.细节优化

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

不知道大家有没发现radar-chart.vue里的