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) 用 ...
随机推荐
- node.js实现web解析dns
var http = require('http'), //服务器创建 dns = require('dns'), //DNS查询,主要负责解析当前DNS域名,返回DNS服务器IP地址 fs = re ...
- CyclicBarrier源码阅读
一种允许多个线程全部等待彼此都到达某个屏障的同步机制 使用 多个线程并发执行同一个CyclicBarrier实例的await方法时,每个线程执行这个方法后,都会被暂停,只有当最后一个线程执行完awai ...
- hdfs、zookeepeer之HA模式
HA简介 1.所谓HA,即高可用(high available) 2.消除单点故障,避免集群瘫痪,hdfs中namenode保存了整个集群的元数据,如果namenode所在机器宕机,则整个集群瘫痪,H ...
- Golang协程实现流量统计系统(1)
# 学习内容: # 学习目标: 学习Golang的基础开发 常用的Golang编程技艺 精巧省力的Go Lib 协程的真实应用实践 与其他语言对比着学 协程并发模型的深度应用 Growth hacki ...
- legend3---lavarel常用artisan命令操作
legend3---lavarel常用artisan命令操作 一.总结 一句话总结: 帮助:php artisan可以调出帮助命令 1.npm安装后盾js? npm install hdjs node ...
- debian安装图形界面,使用mstsc远程登录
环境:debian 10.2 更新软件列表 apt-get update 安装最基本的gnome图形相关软件 apt install x-window-system-core gnome-core 安 ...
- Vue复杂路由器的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Redis 配置 CONFIG 命令
redis.conf 文件在 安装目录下 CONFIG 命令查看或设置配置项 先登陆 src/redis-cli -a -a 后面是密码,默认为空,没有密码直接登陆 src/redis-cli 1.查 ...
- golang开发问题
开发问题: How to find out which types implement which interface in Golang? How do you quickly find the i ...
- 阶段3 2.Spring_08.面向切面编程 AOP_9 spring基于注解的AOP配置
复制依赖和改jar包方式 src下的都复制过来. 复制到新项目里了 bean.xml里面复制上面一行代码到下面.把aop改成context. 配置spring容器创建时要扫描的包 Service的配置 ...