1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<route type="home" lang="json5">
{
layout: "tabbar",
}
</route>
<template>
<view>
<nav-bar title="数据图表" />
<view class="w-full h-1xl">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
<view class="w-full h-1xl">
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
const chartData = ref({});
const opts = ref({
color: [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc",
],
padding: [15, 10, 0, 15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow",
},
},
});
onReady(() => {
getServerData();
});
const getServerData = () => {
//模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
series: [
{
name: "目标值",
data: [35, 36, 31, 33, 13, 34],
},
{
name: "完成量",
data: [18, 27, 21, 24, 6, 28],
},
],
};
chartData.value = JSON.parse(JSON.stringify(res));
}, 500);
};
</script>
<style lang="scss">
.charts-box {
width: 100%;
height: 1200rpx;
}
</style>
|