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
| <script setup>
| import { use } from "echarts/core";
| import { CanvasRenderer } from "echarts/renderers";
| import { LineChart } from "echarts/charts";
| import {
| GridComponent,
| TooltipComponent,
| TitleComponent,
| LegendComponent
| } from "echarts/components";
| import VChart, { THEME_KEY } from "vue-echarts";
| import { ref, provide, onMounted } from "vue";
|
| use([
| CanvasRenderer,
| LineChart,
| GridComponent,
| TooltipComponent,
| TitleComponent,
| LegendComponent
| ]);
|
| const option = ref({
| backgroundColor: "#ffffff", // 设置背景色为白色
| title: {
| text: "分析折线图"
| },
| tooltip: {
| trigger: "axis"
| },
| legend: {
| data: []
| },
| grid: {
| left: "3%",
| right: "4%",
| bottom: "3%",
| containLabel: true
| },
| xAxis: {
| type: "category",
| data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
| },
| yAxis: {
| type: "value"
| },
| series: [
| {
| data: [820, 932, 901, 934, 1290, 1330, 1320],
| type: "line",
| smooth: true
| }
| ]
| });
| </script>
| <template>
| <v-chart class="chart" :option="option" />
| </template>
| <style lang="less" scoped>
| .chart {
| height: calc(100vh - 90px);
| }
| </style>
|
|
