本文归柯三(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 开发可复用的柱形图组件的更多相关文章

  1. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  2. Vue系列之 => vue组件创建

    创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. Vue系列---理解Vue.nextTick使用及源码分析(五)

    _ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...

  4. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  5. Vue系列——在vue项目中使用echarts

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...

  6. [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  7. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  8. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  9. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

随机推荐

  1. node.js实现web解析dns

    var http = require('http'), //服务器创建 dns = require('dns'), //DNS查询,主要负责解析当前DNS域名,返回DNS服务器IP地址 fs = re ...

  2. CyclicBarrier源码阅读

    一种允许多个线程全部等待彼此都到达某个屏障的同步机制 使用 多个线程并发执行同一个CyclicBarrier实例的await方法时,每个线程执行这个方法后,都会被暂停,只有当最后一个线程执行完awai ...

  3. hdfs、zookeepeer之HA模式

    HA简介 1.所谓HA,即高可用(high available) 2.消除单点故障,避免集群瘫痪,hdfs中namenode保存了整个集群的元数据,如果namenode所在机器宕机,则整个集群瘫痪,H ...

  4. Golang协程实现流量统计系统(1)

    # 学习内容: # 学习目标: 学习Golang的基础开发 常用的Golang编程技艺 精巧省力的Go Lib 协程的真实应用实践 与其他语言对比着学 协程并发模型的深度应用 Growth hacki ...

  5. legend3---lavarel常用artisan命令操作

    legend3---lavarel常用artisan命令操作 一.总结 一句话总结: 帮助:php artisan可以调出帮助命令 1.npm安装后盾js? npm install hdjs node ...

  6. debian安装图形界面,使用mstsc远程登录

    环境:debian 10.2 更新软件列表 apt-get update 安装最基本的gnome图形相关软件 apt install x-window-system-core gnome-core 安 ...

  7. Vue复杂路由器的实现

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Redis 配置 CONFIG 命令

    redis.conf 文件在 安装目录下 CONFIG 命令查看或设置配置项 先登陆 src/redis-cli -a -a 后面是密码,默认为空,没有密码直接登陆 src/redis-cli 1.查 ...

  9. golang开发问题

    开发问题: How to find out which types implement which interface in Golang? How do you quickly find the i ...

  10. 阶段3 2.Spring_08.面向切面编程 AOP_9 spring基于注解的AOP配置

    复制依赖和改jar包方式 src下的都复制过来. 复制到新项目里了 bean.xml里面复制上面一行代码到下面.把aop改成context. 配置spring容器创建时要扫描的包 Service的配置 ...