|
|
@@ -1,183 +1,158 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view @click="echarts.onClick" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
|
|
|
- </view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts ref="lineChart" type="line" :opts="opts" :chartData="chartData" :ontouch="true" canvas2d
|
|
|
+ canvasId="canvasId" :disableScroll="true" :onzoom="true" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ nowDate,
|
|
|
+ timeToDate
|
|
|
+ } from '../../utils/date.js';
|
|
|
+ import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ echartsData: Object
|
|
|
+ },
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ chartData: {},
|
|
|
+ //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
|
+ opts: {
|
|
|
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
|
+ "#ea7ccc"
|
|
|
+ ],
|
|
|
+ padding: [15, 10, 0, 15],
|
|
|
+ enableScroll: true,
|
|
|
+ legend: {},
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ scrollShow: true,
|
|
|
+ itemCount: 2,
|
|
|
+ format:"yAxisDemo1"
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: "dash",
|
|
|
+ dashLength: 2
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: "straight",
|
|
|
+ width: 2,
|
|
|
+ activeType: "hollow"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ time: [],
|
|
|
+ series: []
|
|
|
+ };
|
|
|
},
|
|
|
- onLoad() {},
|
|
|
- methods: {
|
|
|
- onViewClick(options) {
|
|
|
- console.log(options)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<script module="echarts" lang="renderjs">
|
|
|
- let myChart
|
|
|
- export default {
|
|
|
mounted() {
|
|
|
- if (typeof window.echarts === 'function') {
|
|
|
- this.initEcharts()
|
|
|
- } else {
|
|
|
- // 动态引入较大类库避免影响页面展示
|
|
|
- const script = document.createElement('script')
|
|
|
- // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
|
|
- script.src = 'static/echarts.min.js'
|
|
|
- script.onload = this.initEcharts.bind(this)
|
|
|
- document.head.appendChild(script)
|
|
|
- }
|
|
|
+ this.getEmit()
|
|
|
},
|
|
|
methods: {
|
|
|
- initEcharts() {
|
|
|
- myChart = echarts.init(document.getElementById('echarts'))
|
|
|
- // 观测更新的数据在 view 层可以直接访问到
|
|
|
- var data1 = [];
|
|
|
- var data2 = [];
|
|
|
- var data3 = [];
|
|
|
- var random = function(max) {
|
|
|
- return (Math.random() * max).toFixed(3);
|
|
|
+ getServerData() {
|
|
|
+ const chartData = this.echartsData.chartItemList
|
|
|
+
|
|
|
+ const timeData = chartData[0].valueTimeList
|
|
|
+ const time = timeData.map(item => {
|
|
|
+ return item.substring(0, 19).replaceAll('-', "")
|
|
|
+ })
|
|
|
+ this.time = time
|
|
|
+ this.series = series
|
|
|
+ const series = chartData.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.describe ? item.describe : item.itemName,
|
|
|
+ data: item.valueList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let res = {
|
|
|
+ categories: time,
|
|
|
+ series: series
|
|
|
};
|
|
|
- for (var i = 0; i < 500; i++) {
|
|
|
- data1.push([random(15), random(10), random(1)]);
|
|
|
- data2.push([random(10), random(10), random(1)]);
|
|
|
- data3.push([random(15), random(10), random(1)]);
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
+ },
|
|
|
+ getEmit() {
|
|
|
+ const {
|
|
|
+ bucketType,
|
|
|
+ bucketValue
|
|
|
+ } = this.echartsData
|
|
|
+ let 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;
|
|
|
}
|
|
|
- let option = {
|
|
|
- animation: false,
|
|
|
- legend: {
|
|
|
- data: ['scatter', 'scatter2', 'scatter3']
|
|
|
- },
|
|
|
- tooltip: {},
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 'dataMin',
|
|
|
- max: 'dataMax',
|
|
|
- splitLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 60, // 自定义显示X轴坐标显示间隔
|
|
|
- textStyle: {
|
|
|
- color: '#626262',
|
|
|
- fontSize: '10',
|
|
|
- },
|
|
|
- formatter:(value, index)=> {
|
|
|
- console.log(value)
|
|
|
- return value + 'kg';
|
|
|
- }
|
|
|
+ this.getServerData()
|
|
|
+ this.lineTime = setInterval(() => {
|
|
|
+ const currentTime = nowDate();
|
|
|
+ let lastTime;
|
|
|
+ uni.getStorage({
|
|
|
+ key: 'sTime',
|
|
|
+ success: (o) => {
|
|
|
+ lastTime = o.data;
|
|
|
}
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 'dataMin',
|
|
|
- max: 'dataMax',
|
|
|
- splitLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- type: 'slider',
|
|
|
- show: true,
|
|
|
- xAxisIndex: [0],
|
|
|
- start: 1,
|
|
|
- end: 35
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- show: true,
|
|
|
- yAxisIndex: [0],
|
|
|
- left: '93%',
|
|
|
- start: 29,
|
|
|
- end: 36
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- xAxisIndex: [0],
|
|
|
- start: 1,
|
|
|
- end: 35
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- yAxisIndex: [0],
|
|
|
- start: 29,
|
|
|
- end: 36
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- name: 'scatter',
|
|
|
- type: 'scatter',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0.8
|
|
|
- }
|
|
|
- },
|
|
|
- symbolSize: function(val) {
|
|
|
- return val[2] * 40;
|
|
|
- },
|
|
|
- data: data1
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'scatter2',
|
|
|
- type: 'scatter',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0.8
|
|
|
+ })
|
|
|
+ let chartParams = {
|
|
|
+ id: this.echartsData.id,
|
|
|
+ startTime: lastTime,
|
|
|
+ endTime: currentTime
|
|
|
+ }
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'sTime',
|
|
|
+ data: currentTime
|
|
|
+ })
|
|
|
+ uni.$http.get('/chart/getChartById', chartParams).then(res => {
|
|
|
+ let chartItemList = res.data.data.chartItemList;
|
|
|
+ chartItemList.forEach((item, index) => {
|
|
|
+ if (item.itemId === this.echartsData.chartItemList[index].itemId) {
|
|
|
+ if (item.valueList.length !== 0) {
|
|
|
+ //执行将新数据添加进去，旧数据去除一个
|
|
|
+ this.echartsData.chartItemList[index].valueList.push(...item
|
|
|
+ .valueList)
|
|
|
+ this.echartsData.chartItemList[index].valueList.splice(0, item
|
|
|
+ .valueList.length)
|
|
|
+ // this.echartsData.chartItemList[index].valueList.slice(item
|
|
|
+ // .valueList.length, this.echartsData.chartItemList[
|
|
|
+ // index].valueList.length)
|
|
|
+ this.echartsData.chartItemList[index].valueTimeList.push(...
|
|
|
+ item
|
|
|
+ .valueTimeList)
|
|
|
+ this.echartsData.chartItemList[index].valueTimeList.splice(0,
|
|
|
+ item
|
|
|
+ .valueTimeList.length)
|
|
|
+ // this.echartsData.chartItemList[index].valueTimeList.slice(
|
|
|
+ // item
|
|
|
+ // .valueTimeList.length, this.echartsData.chartItemList[
|
|
|
+ // index].valueTimeList.length)
|
|
|
}
|
|
|
- },
|
|
|
- symbolSize: function(val) {
|
|
|
- return val[2] * 40;
|
|
|
- },
|
|
|
- data: data2
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'scatter3',
|
|
|
- type: 'scatter',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0.8
|
|
|
- }
|
|
|
- },
|
|
|
- symbolSize: function(val) {
|
|
|
- return val[2] * 40;
|
|
|
- },
|
|
|
- data: data3
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- myChart.setOption(option)
|
|
|
- },
|
|
|
- updateEcharts(newValue, oldValue, ownerInstance, instance) {
|
|
|
- // 监听 service 层数据变更
|
|
|
- myChart.setOption(newValue)
|
|
|
- },
|
|
|
- onClick(event, ownerInstance) {
|
|
|
- // 调用 service 层的方法
|
|
|
- ownerInstance.callMethod('onViewClick', {
|
|
|
- test: 'test'
|
|
|
- })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }, time)
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .echarts {
|
|
|
- margin-top: 100px;
|
|
|
+<style scoped>
|
|
|
+ /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
|
+ .charts-box {
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 540rpx;
|
|
|
}
|
|
|
</style>
|
Zt