Vue是由一个个小模块组成的,模块可以让页面简介还可以复用:

1、不固定数据数量传到子组件

父组件:

<chartVue v-for="(item, index) in chartList" :key="index" :dtu-id="item.dtuId" :name="item.name" :dtu-fatcor="item.dtuFatcor" :data="item.data" :data-type="item.dataType" style="width:1000px;height:400px;" />
<script>
     import echarts from 'echarts'
     import chartVue from '@/views/history/chart'
     import { flatMap, toArray } from 'rxjs/operators'
   export default{
components:{ chartVue },
data(){
chartList: [],
},
//方法
methods: {
// from方法解析数组
from(factor(id)).pipe(
flatMap(value=>{
this.chartList = []
if(value.code == 200){
return from(value.data)
}
}),
toArray(),
map(val =>{
this.chartList = val
return val
})
).subscibe()
}
}
</script>

子组件(ref接收的值是不固定的):

<template>
<div ref="chart" class="app-container" />
</template> <script>
import echart from 'echarts'
import moment from 'moment'
export default {
name: 'Chart',
props: [
'dtuId',
'dtuFatcor',
'name',
'data',
'dataType'
],
mounted() {
// 获取历史数据时间
var that = this
var chart = echart.init(this.$refs.chart)
var xdata = []
var ydata = []
this.data.forEach(val => {
xdata.push(moment(val.createdTime).format('YYYY-MM-DD HH:mm:ss'))
if (this.dataType === '2011') {
ydata.push(val.factorData)
} else {
ydata.push(val.factorAvgData)
}
})
chart.setOption({
title: {
text: that.name
},
tooltip: {
trigger: 'axis'
},
legend: {
data: that.name
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xdata
},
yAxis: {
type: 'value'
// axisLabel: {
// formatter: "{value} °C"
// }
},
series: [
{
name: that.name,
type: 'line',
data: ydata,
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [{ type: 'average', name: '平均值' }]
}
}
]
})
}
}
</script>

VUE——添加组件模块(图表)的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  3. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  4. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  5. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  6. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  7. 从零开始学 Web 之 Vue.js(六)Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  9. Vue常见组件

    每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 根组件 <div id= ...

随机推荐

  1. Ethical Hacking - GAINING ACCESS(9)

    Server Side Attack Nexpose - Analysing Scan Results and Generating Reports OS and Software Inforatio ...

  2. Ethical Hacking - NETWORK PENETRATION TESTING(3)

    Change MAC Address using macchanger.  Packet Sniffing Basics Airodump-ng airodump-ng is a program pa ...

  3. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  4. 题解 洛谷 P3734 【[HAOI2017]方案数】

    可以先考虑没有障碍物的情况,设计状态\(f_{i,j,k}\),表示到达坐标 \((x,y,z)\)二进制下,\(x\)有\(i\)位,\(y\)有\(j\)位,\(z\)有\(k\)位的方案数. 得 ...

  5. python Scrapy 从零开始学习笔记(一)

    在之前我做了一个系列的关于 python 爬虫的文章,传送门:https://www.cnblogs.com/weijiutao/p/10735455.html,并写了几个爬取相关网站并提取有效信息的 ...

  6. Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗

    如需转载,请注明出处:Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗 功能点: 1.更新弹窗UI 2.强更与非强更且别控制 3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消 ...

  7. vue学习(十三) 删除对象数组中的某个元素

    //html <div id="app"> //v-for循环就不写了 每一条数据最后都有一个删除的超链 .prevent阻止默认的跳转行为 只执行点击事件 <a ...

  8. 还不懂mysql的undo log和mvcc?算我输!

    最近一直没啥时间写点东西,坚持分享真的好难,也不知道该分享点啥,正好有人要问我这些东西,所以腾出点时间,写一下这个主题.同样本篇可以给读者承诺,听不懂或者没收获算我输,哈哈! 众所周知,mysql中读 ...

  9. shell 中的${},##, %% , :- ,:+, ? 的使用

    假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.txt 可以用${ }分别替换得到不同的值:${file#*/}:删掉第一个/ 及其左边的字符串:dir1/dir2 ...

  10. Vue+ElementUI搭建一个后台管理框架

    参考 :https://www.cnblogs.com/taotaozhuanyong/p/11903750.html https://gitee.com/qianhongtang-share/vue ...