Echart
web历史曲线卡顿问题—Echarts降采样策略
渲染绘制37W条数据3秒; 此时拖动图表底部滑块明显卡顿,并且第一眼看不到图表曲线趋势; 降采样策略: sampling: ‘average’, [cray…
ECharts实时曲线图表
代码: 示例:https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2 [crayon-62bfcd98…
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}]});Echart曲线、折线鼠标移入数据圆点显示值
当前状态: 一、 添加代码:
123tooltip: {trigger: 'item' // 鼠标移入圆点显示时间和值},效果: 二、 添加代码: [crayon-62bfcd9802a076…