Vue 系列(一): Vue + Echarts 开发可复用的柱形图组件
本文归柯三(kesan)所有,转载请注明出处 https://www.cnblogs.com/kesan/p/11255859.html
前置条件
系统中已经安装如下组件
- node.js
- npm
- vue
- vue-cli
安装echarts
npm install echarts
引入echarts
在组件源码处引入echarts组件
import echarts from 'echarts'
如果需要按需引入,请参考官方文档
点此查看官方文档
柱形图组件开发
先定义一个宽高均为500px的div以供echarts绘出组件
<template>
<div>
<div id="test" style="width:500px;height:500px">
</div>
</div>
</template>
定义组件需要的属性
在本例中,我们定义了两个需要由用户来提供数据的属性
- xData 即x轴的数据
- yData 即y轴的数据
props: {
'xData': Array,
'yData': Array
}
初始化柱形图组件
首先我们需要定义柱形图的option (title也可以抽出来设置为属性)
option: {
title: {
text: 'Vue柱形图组件'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
}
** 初始化组件 **
this.chart = echarts.init(document.getElementById("test"))
this.option.xAxis.data = this.xData
this.option.series[0].data = this.yData
this.chart.setOption(this.option)
在何时初始化组件?
首先来看一看著名的Vue生命周期图:
很显然在Created时组件都还没渲染,因此比较合适的时机是在mounted完成之后执行ECharts组件初始化的操作。
也就是说我们要将ECharts初始化工作放到mounted函数中执行,如果放入到Created中就会出错,因为Created时组件还未进行渲染工作。
完整的代码
<template>
<div>
<div id="test" style="width:500px;height:500px">
</div>
</div>
</template>
<script>
/* eslint-disable */
import echarts from 'echarts'
export default {
name: 'Histogram',
data: function () {
return {
option: {
title: {
text: 'Vue柱形图组件'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
},
chart: {}
}
},
props: {
'xData': Array,
'yData': Array
},
methods: {
updateData: function () {
console.log("update data")
}
},
created: function (){
console.log(this.xData)
console.log('created')
},
mounted: function(){
this.chart = echarts.init(document.getElementById("test"))
this.option.xAxis.data = this.xData
this.option.series[0].data = this.yData
this.chart.setOption(this.option)
}
}
</script>
记得注册组件!!!
Vue.component('组件名', 组件)
Vue 系列(一): Vue + Echarts 开发可复用的柱形图组件的更多相关文章
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue系列之 => vue组件创建
创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue系列——在vue项目中使用echarts
该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- vue系列之vue cli 3引入ts
插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
随机推荐
- Max Sum Plus Plus(最大m字段和,优化)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description Now I t ...
- sqli-labs(1)
0x01字符注入 今天是第一天的学习sqli-labs Lesson1:字符型注入 首先测试一下 ' 发现报错 然后 ''发现 不报错 这种大概率就是字符注入了 接下来我们进行列查询 查询语句 h ...
- springboot 测试发送邮件
首先在pom文件引入依赖: <!--email依赖 --> <dependency> <groupId>org.springframework.boot</g ...
- 2019java第十二周课程总结
本周主要还是学习图形界面 各种容器使用方法 如下代码: package text10; import java.awt.*; import java.io.File; import javax.swi ...
- Shell中的条件测试和循环语句
1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...
- 排序算法总结(java实现)
排序算法 介绍:排序分为内部排序和外部排序,内部排序指在内存中进行的排序过程:外部排序指在外存中进行排序的过程,但是此过程建立在多次访问内存的基础上(分成一段段利用内部排序进行排序). 以下排序均属于 ...
- 定时刷新指定div层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- navicat常用快捷键与SQL基本使用
一.Navicat常用快捷键 1,Ctrl+q就会弹出一个sql输入窗口 2,Ctrl+r就执行sql了 3,按f6会弹出一个命令窗口 4,Ctrl+/ 注释 5,Ctrl +Shift+/ 解除注释 ...
- 全面解读php-函数
一.静态变量 二.函数的参数 三.函数的引用返回 四.外部文件的导入 五.内置函数 1.时间日期函数 2.IP处理函数 3.打印函数: 分类 函数名 说明 语言结构 print() 只能打印一个变量 ...
- android打包生成apk时自定义文件名版本号。自定义项目字段等等
早期的AS2.0版本左右中这样配置: app---->build.gradle中设置 applicationVariants.all { variant -> variant.output ...