vue
Highchart图表-实时曲线
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243splineChart(type, item) {let equipNm = '';let no = 0;let physicMax = 0; // 上限值let physicMin = 0; // 下限值let seriesList = [];let that = this;if (type === 'C') {equipNm = item.ycNm;no = item.ycNo;physicMax = item.valMax;physicMin = item.valMin;seriesList = [{name: '实时值',color: '#3875ff',animation: true,style: {color: '#d3d8e2'},data: (function() {let data = [],time = new Date().getTime(),i;for (i = -9; i <= 0; i += 1) {data.push({x: time + i * 1000,y: Number(that.getEquipCurve(no))});}return data;})()},{name: '上限值',color: '#f54551',animation: true,type: 'spline',marker: {enabled: false // 曲线是否显示值圆点},dashStyle: 'shortdot',style: {color: 'red'},data: (function() {let data = [],time = new Date().getTime(),i;for (i = -9; i <= 0; i += 1) {data.push({x: time + i * 1000,y: physicMax});}return data;})()}, {name: '下限值',color: '#f5bb36',animation: true,type: 'spline',marker: {enabled: false},dashStyle: 'shortdot',style: {color: 'red'},data: (function() {let data = [],time = new Date().getTime(),i;for (i = -9; i <= 0; i += 1) {data.push({x: time + i * 1000,y: physicMin});}return data;})()},]} else {equipNm = item.yxNm;no = item.yxNo;seriesList = [{name: '实时值',color: '#3875ff',animation: true,style: {color: '#d3d8e2'},data: (function() {let data = [],time = new Date().getTime(),i;for (i = -9; i <= 0; i += 1) {data.push({x: time + i * 1000,y: +Number(that.getEquipCurve(no))});}return data;})()}]}this.equipChartNm = equipNm;Highcharts.chart('containerE', {chart: {type: 'spline',margin: [40, 23, 80, 60],backgroundColor: {linearGradient: {x1: 0,y1: 0,x2: 1,y2: 1},stops: [[0, '#252833'],[1, '#252833']]},events: {load: function() {let series = this.series[0];let chart = this;let seriesPhysicMax = [];let seriesPhysicMin = [];if (type === 'C') {seriesPhysicMax = this.series[1];seriesPhysicMin = this.series[2];}that.activeLastPointToolip(chart);if (this.timeChart) {clearInterval(this.timeChart);}this.timeChart = setInterval(function() {if (!typeof(that.getEquipCurve(no)) === 'number') {return;}let x = new Date().getTime(),y = Number(that.getEquipCurve(no));series.addPoint([x, y], true, true);if (type === 'C') {seriesPhysicMax.addPoint([x, physicMax], true, true);seriesPhysicMin.addPoint([x, physicMin], true, true);}that.activeLastPointToolip(chart);}, that.IntervalTime);}},borderColor: '#252833',plotBackgroundColor: '#252833',plotBorderColor: '#999fa8'},title: {text: ''},xAxis: {lineColor: '#999fa8',type: 'datetime',tickPixelInterval: 130,labels: {style: {color: '#d3d8e2'}},axisLine: {lineStyle: {type: 'solid',color: 'red', // 左边线的颜色width: '2' // 坐标线的宽度}},axisLabel: {textStyle: {color: 'red' // 坐标值得具体的颜色}}},yAxis: {gridLineColor: '#3b4357',gridLineWidth: 1,title: {text: '',style: {color: '#999fa8'}},labels: {style: {color: '#d3d8e2'}}},tooltip: {backgroundColor: '#000',formatter: function() {return ('<b>' +this.series.name +'</b><br/>' +Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>' +Highcharts.numberFormat(this.y, 3));},style: {color: '#d3d8e2'}},legend: {enabled: type === 'C',layout: 'horizontal',x: 0,verticalAlign: 'top',y: -5,floating: true,align: 'right',labelFormatter: function() {return '<span style="color:rgba(240, 244, 255, 0.64)"> ' + this.name + '</span>';}},plotOptions:{spline:{animation: true,}},credits: {//配置右下角的版权信息enabled:false,//是否显示版权信息,默认:true。若想去除图表右下角highcharts官网链接则设置为false。text:" ",//版权信息显示内容,默认:Highcharts.com。href:" "//版权信息链接地址,默认:http://www.highcharts.com。},series: seriesList});},ECharts图表-历史曲线
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143//图表需要的数据【时间数组、时间所对应的数据数组】historyTime = equipHistory.times;historyValue = equipHistory.values;this.hisChart = this.$echart.init(document.getElementById('historyData'),'light');this.hisChart.setOption({grid: {left: '1%',top: '10%',right: '2%',bottom: '11%',containLabel: true,color: 'red'},tooltip: {style: {color: 'red'}},xAxis: {type: 'category',splitLine: {show: false,lineStyle: { // x网格线color: 'red'}},axisLine: {lineStyle: {color: '#999fa8',width: 1 // 这里是为了突出显示加上的}},axisLabel: {margin: 12,textStyle: {color: '#d3d8e2',fontSize: '13'}},labels: {style: {color: '#d3d8e2'}},style: {color: '#d3d8e2'},data: historyTime},yAxis: {gridLineColor: '#3b4357',gridLineWidth: 1,type: 'value',axisLine: {show: false},axisTick: {show: false},axisLabel: {margin: 12,textStyle: {color: '#d3d8e2',fontSize: '13'}},style: {color: '#d3d8e2',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'},title: {style: {color: '#d3d8e2',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'}},labels: {style: {color: '#d3d8e2'}},splitLine: {show: true,lineStyle: { // x网格线color: '#373f51'}}},// 图表时间轴滑块dataZoom: [{height: 30,xAxisIndex: [0],start: 0,end: 10,handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',handleSize: '110%',handleStyle: {color: '#3b4357',shadowBlur: 3,shadowColor: '#3b4357',shadowOffsetX: 2,shadowOffsetY: 2,textStyle: {color: '#d3d8e2'}},style: {color: '#d3d8e2'},borderColor: '240, 244, 255, 0.16',color: 'red',fontColor: 'red',textStyle: {color: '#d3d8e2'}},{type: 'inside',start: 0,end: 10,height: 15}],series: [{data: historyValue,type: 'line',animation: false,// showSymbol :false,sampling: 'average', //降采样策略-明显优化拖动滚动条卡顿smooth: false}]});vue父子组件传值,监听传值改变
需求描述 左侧顶部显示设备列表的数量,封装成组件多个页面共用便于后期统一管理; 子组件
12345678910111213141516171819202122232425262728293031323334353637383940<template><p v-if="state" class="gw-left-hearder-title-font"><span class="title">{{title}}</span><span class="number"> · {{number}}</span></p></template><script>/** @file 组件 **/export default {name: 'GWLeftHearderTitle',props: ['GWLeftHearderTitle'],data () {return {title: '',number: 0,btn: '',state: true,msg: null};},// 监听父组件传值【传过来的值有改变就会触发】watch: {GWLeftHearderTitle (n, o) {console.log('新值-n--', n);console.log('旧值-o--', o);this.title = this.GWLeftHearderTitle[1];this.number = this.GWLeftHearderTitle[2];}},mounted () {},methods: {}};父组件 引用组件 [cra…
Vue项目报错:error ‘pageNo’ is defined but never used
解决方法: 在package.json文件内加入如下代码:
12345678"rules": {"generator-star-spacing": "off","no-tabs": "off","no-unused-vars": "off","no-console": "off","no-irregular-whitespace": "off","no-debugger": "off"},Vue-cli4脚手架搭建
Vue-cli4脚手架搭建 随着vue.js越来越火爆,更多的项目都用到vue进行开发,在实际的开发项目中如何搭建开发脚手架呢,今天跟大家分享一下: Node.js 环境(npm包…
极客《 Vue 开发实战》
链接: https://pan.baidu.com/s/1Dxs8FHEPtkjLw3JCli6ENw 提取码: 134m
vue 路由传参 params 与 query 两种方式的区别
用法: query要用path来引入,接收参数都是this.$route.query.name。 params要用name来引入,接收参数都是this.$route.params….
$router和$route的区别
$router $router是编程式导航,this.$router.push(‘要跳转的路径名’),还有this.$router.go(-1)返回上一页面…
声明式导航&编程式导航—Vue
共同点 都能进行导航,都可以触发路由,实现组件切换 区别 写法不一样 声明式导航是写在组件的template中,通过router-link来触发。 编程式导航写在js函数中,通过t…
非父子组件通讯—Vue
非父子组件通讯传值 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。 使用 evenHub 事件中心,相当于调度…