echarts vue组件封装

为什么封装echarts组件

1、原生echarts不是vue组件风格的,不爽

2、原生echarts需要操作dom,麻烦

3、原生echarts没有响应式系统,太菜

在vue项目中使用echarts,步骤如下:

(1)安装echarts依赖

npm install echarts -S

(2)引入echarts,可全局引入和按需引入

全局引入:

// 引入echarts  --- 在 main.js 中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在 echarts.vue 中,初始化echarts实例进行绘制图形。

this.charts = this.$echarts.init(document.getElementById(id));

按需引入:

//在 echarts.vue 中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

(3)项目案例:

1.实现方式:

创建一个待渲染的dom

<template><div><div id="myLine" :style="echartStyle"></div></div>
</template>

绘制函数:

// 绘制折线图
drawLine(id){this.charts = this.$echarts.init(document.getElementById(id));this.charts.on("click", this.eConsole);this.charts.setOption({title: {left: 'center',text: this.titleText, //标题文本},tooltip: {trigger: 'axis'},legend: {left: 'left',data: this.opinion // 区域名称},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {   // x 轴type: 'category',boundaryGap: false,data: this.x},yAxis: {   // y 轴type: 'value'},series: this.opinionData  // 区域数据})
}

初始化挂载到页面上:

mounted(){this.$nextTick(function() {this.drawLine('myLine')})
},

props:

echartStyle: {  // 样式 - 1type: Object,default() {return {}}
},
titleText: {   //标题文本 - 1type: String,default: ''
},opinion: {    //区域名称 - 1type: Array,default() {return []}
},
opinionData: {   // 区域数据 - 1type: Array,default() {return []}
},
x: {  // x 轴type: Array,default() {return []}}

2.控件使用

调用实例:

<m-line:echartStyle="s":titleText="title":opinion="barName":opinionData="info":x="barX">
</m-line>

传递数据:

import mLine from '../components/line'
export default {components: {mLine,},data() {return {s: {height: ''},title: '动态统计',barName: ['文档数', '任务数'],barX: ['2019/03/01','2019/03/02','2019/03/03','2019/03/04','2019/03/05','2019/03/06','2019/03/07'],info: [{name:'文档数',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'任务数',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]}],}},created(){this.s.height = 300 + 'px'},
}

这里主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标

echarts vue组件封装相关推荐

  1. Vue 组件封装之 ScrollView 上拉加载更多

    Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...

  2. Vue 组件封装之 Questionnaire 问卷调查

    Vue 组件封装之 Questionnaire 问卷调查 前言 一.Questionnaire 组件 二.使用案例 三.API 使用指南 四.源代码 前言 问卷调查表也是目前前端比较常见的开发项目,目 ...

  3. Vue 组件封装之 Content 列表(处理多行输入框 textarea)

    Vue 组件封装之 Content 列表 一.Content 列表 二.使用案例 三.API 使用指南 四.源代码 一.Content 列表 组件说明: 实现 Content 列表布局排版. 效果展示 ...

  4. Vue 组件封装之 List 列表

    Vue 组件封装之 List 列表 一.List 列表 二.使用案例 三.API 使用指南 四.源代码 一.List 列表 组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...

  5. Vue 组件封装之 Search 搜索

    Vue 组件封装之 Search 搜索 一.Search 组件 二.使用案例 三.API 使用指南 四.源代码 一.Search 组件 组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...

  6. Vue组件封装,(面试回答)

    在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...

  7. Vue 组件封装之 Tab 切换

    Vue 组件封装之 tab 切换 一.Tab 切换组件 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tab 切换组件 组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...

  8. Vue组件封装的过程

    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...

  9. Vue 组件封装、组件传值、数据修改

    Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

最新文章

  1. 1、spring的概述
  2. 模型独立学习:多任务学习与迁移学习
  3. 移动**21*设置无法接通_电话打得出去,但别人打你的电话提示用户无法接通,是怎么回事?...
  4. 全球最神秘的9大葡萄园...
  5. swift-UITextfield控件的基本属性设置
  6. GraphX的三大图算法
  7. t3网络计算机浏览卡死,凭证一点打印 系统就卡死了 重启后还是这样
  8. 标准模块 os.stat
  9. vulkan sdk 下载地址
  10. 精密电阻选购及换算方法
  11. ps画画模糊笔刷_大量PS笔刷AI笔刷打包下载(超过1000款笔刷)
  12. 【3本精挑细选的书籍】网络爬虫推荐书籍(Python)【从0到实践】
  13. 2021智源大会AI TIME|大规模预训练模型离通用人工智能还有多远?
  14. nyist 第二次招新赛 I 董学姐与朱学姐的爱恨情仇
  15. jupyter查看python包
  16. 量化投资学习——多因子模型选股
  17. 纪中20日c组模拟赛T1 2121. 简单游戏
  18. 大数据——Spark GraphX中算法介绍
  19. 家谱文化研究①:乾隆干预民间修谱有哪些正面影响和负面影响?
  20. 电商节后巨头们无法言说的“秘密”

热门文章

  1. C++音视频开发的技术要点总结
  2. psd文件丢失了怎么恢复?分享原因及对应恢复方法
  3. Vue:生命周期函数的作用
  4. 用户SA登陆失败 | VS三层架构web项目的创建
  5. D 触发器 Multisim
  6. forEach循环中异步操作的问题
  7. mysql group by 和 having 用法
  8. video在某些浏览器默认静音
  9. 微信小程序实现数据监听
  10. jfinal ajax传值,JFINAL+Ajax传参 array 数组方法 获取request中数组操作