229 lines
11 KiB
Vue
229 lines
11 KiB
Vue
<template>
|
||
<view class="charts-box">
|
||
<qiun-data-charts
|
||
type="line"
|
||
:opts="opts"
|
||
:chartData="chartData"
|
||
:ontouch="true"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
chartData: {},
|
||
//这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
opts: {
|
||
timing: "easeOut",
|
||
duration: 2000,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [15,10,0,15],
|
||
fontSize: 13,
|
||
fontColor: "#666666",
|
||
dataLabel: false,
|
||
dataPointShape: false,
|
||
dataPointShapeType: "solid",
|
||
touchMoveLimit: 60,
|
||
enableScroll: true,
|
||
enableMarkLine: false,
|
||
legend: {
|
||
show: true,
|
||
position: "top",
|
||
float: "center",
|
||
padding: 5,
|
||
margin: 5,
|
||
backgroundColor: "rgba(0,0,0,0)",
|
||
borderColor: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
fontSize: 13,
|
||
fontColor: "#666666",
|
||
lineHeight: 11,
|
||
hiddenColor: "#CECECE",
|
||
itemGap: 10
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
disabled: false,
|
||
axisLine: true,
|
||
axisLineColor: "#CCCCCC",
|
||
calibration: true,
|
||
fontColor: "#666666",
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
marginTop: 5,
|
||
rotateLabel: true,
|
||
rotateAngle: 45,
|
||
labelCount: 20,
|
||
itemCount: 300,
|
||
boundaryGap: "center",
|
||
splitNumber: 5,
|
||
gridColor: "#CCCCCC",
|
||
gridType: "solid",
|
||
dashLength: 4,
|
||
gridEval: 1,
|
||
scrollShow: true,
|
||
scrollAlign: "left",
|
||
scrollColor: "#A6A6A6",
|
||
scrollBackgroundColor: "#EFEBEF",
|
||
title: "时间",
|
||
titleFontSize: 13,
|
||
titleOffsetY: 0,
|
||
titleOffsetX: 10,
|
||
titleFontColor: "#666666",
|
||
format: ""
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridColor: "#CCCCCC",
|
||
padding: 10,
|
||
showTitle: true,
|
||
data: [
|
||
{
|
||
type: "value",
|
||
position: "left",
|
||
disabled: false,
|
||
axisLine: true,
|
||
axisLineColor: "#CCCCCC",
|
||
calibration: true,
|
||
fontColor: "#666666",
|
||
fontSize: 13,
|
||
textAlign: "left",
|
||
title: "温度（℃）",
|
||
titleFontSize: 14,
|
||
titleOffsetY: -10,
|
||
titleOffsetX: 5,
|
||
titleFontColor: "#333333",
|
||
min: 0,
|
||
max: 50,
|
||
tofix: 1,
|
||
unit: "",
|
||
format: ""
|
||
},
|
||
{
|
||
type: "value",
|
||
position: "right",
|
||
disabled: false,
|
||
axisLine: true,
|
||
axisLineColor: "#CCCCCC",
|
||
calibration: true,
|
||
fontColor: "#666666",
|
||
fontSize: 13,
|
||
textAlign: "right",
|
||
title: "湿度（%RH）",
|
||
titleFontSize: 14,
|
||
titleOffsetY: -10,
|
||
titleOffsetX: 0,
|
||
titleFontColor: "#333333",
|
||
min: 0,
|
||
max: 100,
|
||
tofix: 1,
|
||
unit: "",
|
||
format: ""
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "straight",
|
||
width: 2,
|
||
activeType: "hollow",
|
||
linearType: "none",
|
||
onShadow: false,
|
||
animation: "vertical"
|
||
},
|
||
tooltip: {
|
||
showBox: true,
|
||
showArrow: true,
|
||
showCategory: false,
|
||
borderWidth: 0,
|
||
borderRadius: 0,
|
||
borderColor: "#000000",
|
||
borderOpacity: 0.7,
|
||
bgColor: "#000000",
|
||
bgOpacity: 0.7,
|
||
gridType: "solid",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
boxPadding: 3,
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
fontColor: "#FFFFFF",
|
||
legendShow: true,
|
||
legendShape: "auto",
|
||
splitLine: true,
|
||
horizentalLine: false,
|
||
xAxisLabel: false,
|
||
yAxisLabel: false,
|
||
labelBgColor: "#FFFFFF",
|
||
labelBgOpacity: 0.7,
|
||
labelFontColor: "#666666"
|
||
},
|
||
markLine: {
|
||
type: "solid",
|
||
dashLength: 4,
|
||
data: [
|
||
{
|
||
value: 0,
|
||
lineColor: "#DE4A42",
|
||
showLabel: false,
|
||
labelAlign: "left",
|
||
labelOffsetX: 0,
|
||
labelOffsetY: 0,
|
||
labelPadding: 6,
|
||
labelText: "",
|
||
labelFontSize: 13,
|
||
labelFontColor: "#666666",
|
||
labelBgColor: "#DFE8FF",
|
||
labelBgOpacity: 0.8
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
};
|
||
},
|
||
onReady() {
|
||
this.getServerData();
|
||
},
|
||
methods: {
|
||
getServerData() {
|
||
//模拟从服务器获取数据时的延时
|
||
setTimeout(() => {
|
||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||
let res = {
|
||
categories: ["00:00","00:05","00:10","00:15","00:20","00:25","00:30","00:35","00:40","00:45","00:50","00:55","01:00","01:05","01:10","01:15","01:20","01:25","01:30","01:35","01:40","01:45","01:50","01:55","02:00","02:05","02:10","02:15","02:20","02:25","02:30","02:35","02:40","02:45","02:50","02:55","03:00","03:05","03:10","03:15","03:20","03:25","03:30","03:35","03:40","03:45","03:50","03:55","04:00","04:05","04:10","04:15","04:20","04:25","04:30","04:35","04:40","04:45","04:50","04:55","05:00","05:05","05:10","05:15","05:20","05:25","05:30","05:35","05:40","05:45","05:50","05:55","06:00","06:05","06:10","06:15","06:20","06:25","06:30","06:35","06:40","06:45","06:50","06:55","07:00","07:05","07:10","07:15","07:20","07:25","07:30","07:35","07:40","07:45","07:50","07:55","08:00","08:05","08:10","08:15","08:20","08:25","08:30","08:35","08:40","08:45","08:50","08:55","09:00","09:05","09:10","09:15","09:20","09:25","09:30","09:35","09:40","09:45","09:50","09:55","10:00","10:05","10:10","10:15","10:20","10:25","10:30","10:35","10:40","10:45","10:50","10:55","11:00","11:05","11:10","11:15","11:20","11:25","11:30","11:35","11:40","11:45","11:50","11:55","12:00","12:05","12:10","12:15","12:20","12:25","12:30","12:35","12:40","12:45","12:50","12:55","13:00","13:05","13:10","13:15","13:20","13:25","13:30","13:35","13:40","13:45","13:50","13:55","14:00","14:05","14:10","14:15","14:20","14:25","14:30","14:35","14:40","14:45","14:50","14:55","15:00","15:05","15:10","15:15","15:20","15:25","15:30","15:35","15:40","15:45","15:50","15:55","16:00","16:05","16:10","16:15","16:20","16:25","16:30","16:35","16:40","16:45","16:50","16:55","17:00","17:05","17:10","17:15","17:20","17:25","17:30","17:35","17:40","17:45","17:50","17:55","18:00","18:05","18:10","18:15","18:20","18:25","18:30","18:35","18:40","18:45","18:50","18:55","19:00","19:05","19:10","19:15","19:20","19:25","19:30","19:35","19:40","19:45","19:50","19:55","20:00","20:05","20:10","20:15","20:20","20:25","20:30","20:35","20:40","20:45","20:50","20:55","21:00","21:05","21:10","21:15","21:20","21:25","21:30","21:35","21:40","21:45","21:50","21:55","22:00","22:05","22:10","22:15","22:20","22:25","22:30","22:35","22:40","22:45","22:50","22:55","23:00","23:05","23:10","23:15","23:20","23:25","23:30","23:35","23:40","23:45","23:50","23:55"],
|
||
series: [
|
||
{
|
||
name: "温度(℃)",
|
||
index: 0,
|
||
data: [18.2,17.9,17.5,17.1,16.8,16.5,16.3,16.1,15.9,15.8,15.7,15.6,15.5,15.4,15.3,15.2,15.1,15,14.9,14.8,14.7,14.6,14.5,14.4,14.3,14.2,14.1,14,13.9,13.8,13.7,13.6,13.5,13.4,13.3,13.2,13.1,13,12.9,12.8,12.7,12.6,12.5,12.4,12.3,12.2,12.1,12,12.1,12.2,12.3,12.4,12.5,12.6,12.7,12.8,12.9,13,13.2,13.4,13.6,13.8,14,14.3,14.6,14.9,15.2,15.5,15.8,16.1,16.4,16.7,17,17.3,17.6,17.9,18.2,18.5,18.8,19.1,19.4,19.7,20,20.3,20.6,20.9,21.2,21.5,21.8,22.1,22.4,22.7,23,23.2,23.4,23.6,23.8,24,24.2,24.4,24.6,24.8,25,25.1,25.2,25.3,25.4,25.5,25.6,25.7,25.8,25.9,26,26.1,26.2,26.3,26.4,26.5,26.6,26.7,26.8,26.9,27,27.1,27.2,27.3,27.4,27.5,27.6,27.7,27.8,27.9,28,28.1,28.2,28.3,28.4,28.5,28.6,28.7,28.8,28.9,29,29.1,29.2,29.3,29.4,29.5,29.6,29.7,29.8,29.9,30,29.8,29.6,29.4,29.2,29,28.8,28.6,28.4,28.2,28,27.8,27.6,27.4,27.2,27,26.8,26.6,26.4,26.2,26,25.8,25.6,25.4,25.2,25,24.8,24.6,24.4,24.2,24,23.8,23.6,23.4,23.2,23,22.8,22.6,22.4,22.2,22,21.8,21.6,21.4,21.2,21,20.8,20.6,20.4,20.2,20,19.8,19.6,19.4,19.2,19,18.8,18.6,18.4,18.2,18,17.8,17.6,17.4,17.2,17,16.8,16.6,16.4,16.2,16,15.8,15.6,15.4,15.2,15,14.8,14.6,14.4,14.2,14,13.8,13.6,13.4,13.2,13,12.8,12.6,12.4,12.2,12,11.8,11.6,11.4,11.2,11,10.8,10.6,10.4,10.2,10,10.2,10.4,10.6,10.8,11,11.2,11.4,11.6,11.8,12,12.2,12.4,12.6,12.8,13,13.2,13.4,13.6,13.8,14,14.2,14.4,14.6,14.8,15,15.2,15.4,15.6,15.8,16,16.2,16.4,16.6,16.8,17]
|
||
},
|
||
{
|
||
name: "湿度(%)",
|
||
index: 1,
|
||
data: [78.5,79.1,79.8,80.3,80.9,81.4,81.9,82.3,82.7,83,83.3,83.5,83.7,83.9,84,84.1,84.2,84.2,84.2,84.1,84,83.9,83.7,83.5,83.2,82.9,82.6,82.2,81.8,81.3,80.8,80.2,79.6,78.9,78.2,77.4,76.5,75.6,74.6,73.5,72.4,71.2,69.9,68.6,67.2,65.7,64.2,62.6,61,59.3,57.6,55.8,54,52.1,50.2,48.3,46.3,44.3,42.3,40.3,38.3,36.3,34.3,32.3,30.4,28.5,26.6,24.8,23,21.3,19.6,18,16.4,15,13.6,12.3,11.1,10,9,8.1,7.3,6.6,6,5.5,5.1,4.8,4.6,4.5,4.5,4.6,4.8,5.1,5.5,6,6.6,7.3,8.1,9,10,11.1,12.3,13.6,15,16.4,18,19.6,21.3,23,24.8,26.6,28.5,30.4,32.3,34.3,36.3,38.3,40.3,42.3,44.3,46.3,48.3,50.2,52.1,54,55.8,57.6,59.3,61,62.6,64.2,65.7,67.2,68.6,69.9,71.2,72.4,73.5,74.6,75.6,76.5,77.4,78.2,78.9,79.6,80.2,80.8,81.3,81.8,82.2,82.6,82.9,83.2,83.5,83.8,84,84.2,84.3,84.4,84.4,84.4,84.3,84.2,84,83.8,83.5,83.2,82.8,82.4,81.9,81.4,80.8,80.2,79.5,78.8,78,77.2,76.3,75.4,74.4,73.3,72.2,71,69.8,68.5,67.2,65.8,64.3,62.8,61.3,59.7,58,56.3,54.6,52.8,51,49.2,47.3,45.4,43.5,41.5,39.5,37.5,35.5,33.5,31.5,29.5,27.5,25.6,23.7,21.9,20.1,18.4,16.8,15.2,13.7,12.3,11,9.8,8.7,7.7,6.8,6,5.3,4.7,4.2,3.8,3.5,3.3,3.2,3.2,3.3,3.5,3.8,4.2,4.7,5.3,6,6.8,7.7,8.7,9.8,11,12.3,13.7,15.2,16.8,18.4,20.1,21.9,23.7,25.6,27.5,29.5,31.5,33.5,35.5,37.5,39.5,41.5,43.5,45.4,47.3,49.2,51,52.8,54.6,56.3,58,59.7,61.3,62.8,64.3,65.8,67.2,68.5,69.8,71,72.2,73.3,74.4,75.4,76.3,77.2,78,78.8,79.5,80.2,80.8]
|
||
}
|
||
]
|
||
};
|
||
this.chartData = JSON.parse(JSON.stringify(res));
|
||
}, 500);
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||
.charts-box {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
</style> |