本文归柯三(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. CodeForces 538F A Heap of Heaps

    题意 给定一个长度为n的数组A,将它变为一颗k叉树(1 <= k <= n - 1)(堆的形式编号). 问对于每一个k,有多少个节点小于它的父节点. 解题 显然,最初的想法是暴力.因为树的 ...

  2. BZOJ 1488 Luogu P4727 [HNOI2009]图的同构 (Burnside引理、组合计数)

    题目链接 (Luogu) https://www.luogu.org/problem/P4727 (BZOJ) https://www.lydsy.com/JudgeOnline/problem.ph ...

  3. BruteXSS

    0X01安装 我是按照下面这位大牛的博客来的 https://www.cnblogs.com/Pitcoft/p/6341322.html 0X02使用BruteXSS的使用 #在目录 BruteXS ...

  4. [CSP-S模拟测试]:最小值(DP+乱搞)

    题目背景 $Maxtir$更喜欢序列的最小值. 题目传送门(内部题128) 输入格式 第一行输入一个正整数$n$和四个整数$A,B,C,D$. 第二行输入$n$个整数,第$i$个数表示$a_i$. 输 ...

  5. 用过消息队列?Kafka?能否手写一个消息队列?懵

    是否有同样的经历?面试官问你做过啥项目,我一顿胡侃,项目利用到了消息队列,kafka,rocketMQ等等. 好的,那请开始你的表演,面试官递过一支笔:给我手写一个消息队列!!WHAT? 为了大家遇到 ...

  6. 为EasyUI的dataGrid单元格增加鼠标移入移出事件

    onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $( ...

  7. redis学习之路

    cp /home/zzq/桌面/M+.txt /home/zzq/mySercet#将桌面文件下的M+.txt 复制到mySercetrm -rf M+.txt#强制递归删除M+.txt1.网络适配器 ...

  8. 解决:linux eclipse 对‘dlopen’未定义的引用, 对‘xxx’未定义的引用

    如果是终端窗口执行的话直接: 在g++编译选项后面,加入dl的库,选项为-ldl,即可. 如果是在eclipse里的话: 在工程属性中->c/c++ build->gcc complier ...

  9. 搭建SVN服务器时报错:0x80004002

    一.错误信息 Cannot query proxy blanket: no such interface supported (0x80004002) 二.解决方案 这个错误只会在有NVIDIA独立显 ...

  10. JAVA基础面试汇总

    一.基础知识:1.JVM.JRE和JDK的区别:    JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性.                  java ...