echarts vue组件封装
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组件封装相关推荐
- Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...
- Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查 前言 一.Questionnaire 组件 二.使用案例 三.API 使用指南 四.源代码 前言 问卷调查表也是目前前端比较常见的开发项目,目 ...
- Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表 一.Content 列表 二.使用案例 三.API 使用指南 四.源代码 一.Content 列表 组件说明: 实现 Content 列表布局排版. 效果展示 ...
- Vue 组件封装之 List 列表
Vue 组件封装之 List 列表 一.List 列表 二.使用案例 三.API 使用指南 四.源代码 一.List 列表 组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
- Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索 一.Search 组件 二.使用案例 三.API 使用指南 四.源代码 一.Search 组件 组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
- Vue组件封装,(面试回答)
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
- Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换 一.Tab 切换组件 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tab 切换组件 组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
- Vue组件封装的过程
Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
- Vue 组件封装、组件传值、数据修改
Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...
最新文章
- 1、spring的概述
- 模型独立学习:多任务学习与迁移学习
- 移动**21*设置无法接通_电话打得出去,但别人打你的电话提示用户无法接通,是怎么回事?...
- 全球最神秘的9大葡萄园...
- swift-UITextfield控件的基本属性设置
- GraphX的三大图算法
- t3网络计算机浏览卡死,凭证一点打印 系统就卡死了 重启后还是这样
- 标准模块 os.stat
- vulkan sdk 下载地址
- 精密电阻选购及换算方法
- ps画画模糊笔刷_大量PS笔刷AI笔刷打包下载(超过1000款笔刷)
- 【3本精挑细选的书籍】网络爬虫推荐书籍(Python)【从0到实践】
- 2021智源大会AI TIME|大规模预训练模型离通用人工智能还有多远?
- nyist 第二次招新赛 I 董学姐与朱学姐的爱恨情仇
- jupyter查看python包
- 量化投资学习——多因子模型选股
- 纪中20日c组模拟赛T1 2121. 简单游戏
- 大数据——Spark GraphX中算法介绍
- 家谱文化研究①:乾隆干预民间修谱有哪些正面影响和负面影响?
- 电商节后巨头们无法言说的“秘密”