|
|
@@ -9,7 +9,7 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div id="main" style="width:380px;height:300px"></div>
|
|
|
+ <div id="main" style="width:340px;height:300px;margin:auto"></div>
|
|
|
|
|
|
<script src="./echarts.min.js"></script>
|
|
|
<script type="text/javascript" src="../luckysheet/dist/plugins/js/uni-webview-js0.0.3_index.js"></script>
|
|
|
@@ -59,17 +59,84 @@
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ // formatter: function(value) {
|
|
|
+ // const result = value.replaceAll('-', '').substring(0,
|
|
|
+ // 9);
|
|
|
+ // return result
|
|
|
+ // }
|
|
|
+ formatter: '{value}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ type: 'scroll',
|
|
|
+ top: 0
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ show:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundColor: 'rgba(50,50,50,0.5)',
|
|
|
+ formatter: function(params) {
|
|
|
+ let result = ''
|
|
|
+ for (let i in params) {
|
|
|
+ if (i == 0) {
|
|
|
+ result += params[i].axisValueLabel
|
|
|
+ .substring(9, 17)
|
|
|
+ }
|
|
|
+ let value = '--'
|
|
|
+ if (params[i].data !== null) {
|
|
|
+ value = params[i].data
|
|
|
+ }
|
|
|
+ result += '\n' + params[i].seriesName + '：' +
|
|
|
+ value
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ show: true,
|
|
|
+ start: 0,
|
|
|
+ end: 10
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <script>
|
|
|
document.addEventListener('UniAppJSBridgeReady', function() {
|
|
|
uni.getEnv(function(res) {
|
|
|
const id = GetQueryString('id')
|
|
|
const startTime = GetQueryString('startTime')
|
|
|
const endTime = nowDate()
|
|
|
const token = window.localStorage.getItem('C_TOKEN')
|
|
|
+ var echartsData
|
|
|
let chartParams = {
|
|
|
id: id
|
|
|
}
|
|
|
$.ajax({
|
|
|
- url: "" + id,
|
|
|
+ url: "",
|
|
|
type: 'GET',
|
|
|
beforeSend: function(xhr) {
|
|
|
this.url =
|
|
|
@@ -80,44 +147,108 @@
|
|
|
},
|
|
|
success: function(res) {
|
|
|
if (res.code === 200) {
|
|
|
- const chartData = res.data.chartItemList
|
|
|
- const timeData = chartData[0].valueTimeList
|
|
|
-
|
|
|
- const series = chartData.map(item => {
|
|
|
- return {
|
|
|
- name: item.describe ? item.describe : item.itemName,
|
|
|
- data: item.valueList,
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- var chart = echarts.init(document.getElementById('main'));
|
|
|
- let option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: timeData
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 10
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- show: false,
|
|
|
- start: 0,
|
|
|
- end: 10
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- chart.setOption(option)
|
|
|
+ echartsData = res.data.chartItemList
|
|
|
+
|
|
|
+ getServerData(echartsData)
|
|
|
+
|
|
|
+ getEmit(res)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ function initEcharts() {
|
|
|
+ var chart = echarts.init(document.getElementById('main'));
|
|
|
+ chart.setOption(option)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getServerData(echartsData) {
|
|
|
+ const chartData = echartsData
|
|
|
+ const timeData = chartData[0].valueTimeList
|
|
|
+
|
|
|
+ const series = chartData.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.describe ? item.describe : item.itemName,
|
|
|
+ data: item.valueList,
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ option.xAxis.data = timeData
|
|
|
+ option.series =series
|
|
|
+ initEcharts()
|
|
|
+ }
|
|
|
+
|
|
|
+ function getEmit(res) {
|
|
|
+ const {
|
|
|
+ bucketType,
|
|
|
+ bucketValue
|
|
|
+ } = res.data
|
|
|
+ var time = null
|
|
|
+ switch (bucketType) {
|
|
|
+ case 0:
|
|
|
+ time = 86400000 * bucketValue
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ time = 3600000 * bucketValue
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ time = 60000 * bucketValue
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ time = 1000 * bucketValue
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ var lineTime = setInterval(() => {
|
|
|
+ const currentTime = nowDate();
|
|
|
+ var lastTime = localStorage.getItem('sTime');
|
|
|
+ localStorage.setItem('sTime', currentTime)
|
|
|
+ $.ajax({
|
|
|
+ url: "",
|
|
|
+ type: 'GET',
|
|
|
+ beforeSend: function(xhr) {
|
|
|
+ this.url =
|
|
|
+ `http://192.168.0.40:8081/chart/getChartById?id=${id}&startTime=${lastTime}&endTime=${currentTime}`
|
|
|
+ xhr.setRequestHeader("Authorization", "Bearer " +
|
|
|
+ token);
|
|
|
+ xhr.setRequestHeader("token", token);
|
|
|
+ },
|
|
|
+ success: function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ let chartItemList = res.data.chartItemList;
|
|
|
+ chartItemList.forEach((item, index) => {
|
|
|
+ if (item.itemId === echartsData[
|
|
|
+ index].itemId) {
|
|
|
+ if (item.valueList.length !== 0) {
|
|
|
+ //执行将新数据添加进去，旧数据去除一个
|
|
|
+ echartsData[index].valueList =
|
|
|
+ echartsData[index].valueList
|
|
|
+ .concat(item.valueList)
|
|
|
+ echartsData[
|
|
|
+ index]
|
|
|
+ .valueList.splice(0, item
|
|
|
+ .valueList.length)
|
|
|
+ echartsData[index]
|
|
|
+ .valueTimeList = echartsData[
|
|
|
+ index]
|
|
|
+ .valueTimeList.concat(item
|
|
|
+ .valueTimeList)
|
|
|
+ echartsData[
|
|
|
+ index]
|
|
|
+ .valueTimeList.splice(0,
|
|
|
+ item
|
|
|
+ .valueTimeList.length)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getServerData(echartsData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, time)
|
|
|
+ }
|
|
|
})
|
|
|
})
|
|
|
</script>
|
Zt