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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| <template>
| <div id="myEcharts" :style="{ width: width, height: height }"></div>
| </template>
| <script lang="ts" setup>
| import {
| ref,
| onMounted,
| onBeforeUnmount,
| reactive,
| defineProps,
| defineEmits,
| watch,
| onUnmounted,
| } from "vue";
| import * as echarts from "echarts";
|
| //defineProps 来接收组件的传值
| const props = defineProps({
| width: String,
| height: String,
| });
| let myEcharts = echarts;
| onMounted(() => {
| initChart();
| });
|
| onUnmounted(() => {
| myEcharts.dispose;
| });
|
| function initChart() {
| let chart = myEcharts.init(
| document.getElementById("myEcharts"),
| "purple-passion"
| );
| chart.setOption({
| title: {
| text: "",
| left: "center",
| },
| legend: {
| data: [],
| },
| xAxis: {
| type: "category",
| data: [
| "一月",
| "二月",
| "三月",
| "四月",
| "五月",
| "六月",
| "七月",
| "八月",
| "九月",
| "十月",
| "十一月",
| "十二月",
| ],
| show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
| axisTick: {
| show: false, // 不显示坐标轴刻度线
| },
| axisLine: {
| show: false, // 不显示坐标轴线
| },
| axisLabel: {
| show: false, // 不显示坐标轴上的文字
| },
| splitLine: {
| show: false, // 不显示网格线
| },
| },
| tooltip: {
| trigger: "axis",
| },
| yAxis: {
| type: "value",
| show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
| axisTick: {
| show: false, // 不显示坐标轴刻度线
| },
| axisLine: {
| show: false, // 不显示坐标轴线
| },
| axisLabel: {
| show: false, // 不显示坐标轴上的文字
| },
| splitLine: {
| show: false, // 不显示网格线
| },
| },
| series: [
| {
| data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
| type: "line",
| smooth: true,
| symbol: "none", //取消折点圆圈
| itemStyle: {
| normal: {
| label: {
| show: false,
| position: "top",
| formatter: "{c}",
| },
| },
| },
| },
| ],
| });
| window.onresize = function () {
| chart.resize();
| };
| }
| </script>
| <style lang="less" scoped></style>
|
|
