vue之将之将echart封装为组件封装为组件
主要介绍了vue之将echart封装为组件,本文将会以雷达图为案例,一步步讲解在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
}
</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官网: