vue之将之将echart封装为组件封装为组件
最近的新项目里，有大量数据图表类的需求，为了增强代码的复用性，减少冗余，我开始思考如何将echart封装为组件调用。
本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件。
阅读之前，可以先看看我之前的一些文章，这样能更好的理解这次的内容：
【使用vue-cli（vue脚手架）快速搭建项目】：//www.jb51.net/article/140498.htm
【vue之父子组件间通信实例讲解（props、$ref 、 $emit ）】：www.jb51.net/article/140581.htm
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
<template>
<radar-chart></radar-chart>
</template>
<script>
import RadarChart from '../components/radar-chart'
export default {
name: "chart",
components: {RadarChart},
component: RadarChart
}
剩余6页未读，继续阅读
资源评论
