没有合适的资源?快使用搜索试试~ 我知道了~
vue之将echart封装为组件
11 下载量 74 浏览量
2020-08-27
09:42:49
上传
评论
收藏 203KB PDF 举报
温馨提示
试读
5页
主要介绍了vue之将echart封装为组件,本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的组件
资源推荐
资源详情
资源评论
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官网:
资源评论
weixin_38713099
- 粉丝: 4
- 资源: 906
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功