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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| <!--浓度均值 数据在线率 有效率 超标率 图组件
| 子组件有基本的样式
| 使用同一个图形实例，接受父组件传入的折线图option
| -->
| <template>
| <div ref="chart" class="line-chart"></div>
| </template>
|
| <script>
| import * as _echarts from 'echarts';
|
| export default {
| props: {
| chartData: {
| type: Object,
| required: true,
| default: () => {
| return {
| x: [],
| y: []
| };
| }
| },
| title: {
| type: String
| },
| xName: {
| type: String,
| default: '时间'
| },
| yName: {
| type: String,
| default: '百分比'
| },
| seriesName: {
| type: String,
| default: '系列一'
| }
| },
| data() {
| return {
| chart: null
| };
| },
| mounted() {
| this.intiChart();
| window.addEventListener('resize', this.resizeChart);
| },
| watch: {
| chartData() {
| // option变化时，图形再次初始化
| this.setOption();
| },
|
| },
| beforeUnmount() {
| if (this.chart) {
| this.chart.dispose();
| }
| },
| methods: {
| intiChart() {
| // 创建echarts实例
| this.chart = _echarts.init(this.$refs.chart);
| },
|
| setOption() {
| // 定义图表的配置项和数据
| const option = {
| title: {
| text: this.title
| },
| tooltip: {},
|
| toolbox: {
| // 工具栏
| feature: {
| // dataZoom: {
| // // 区域缩放
| // yAxisIndex: 'none'
| // },
|
| // 保存为图片
| saveAsImage: {}
| }
| },
| xAxis: {
| name: this.xName,
| data: this.chartData.x,
| type: 'category',
| axisLabel: {
| formatter: function (value) {
| return value.slice(5);
| }
| }
| },
| yAxis: {
| type: 'value',
| axisLabel: {
| show: true,
| interval: 'auto'
| },
| name: this.yName
| },
| series: [
| {
| name: this.seriesName,
| type: 'line',
| data: this.chartData.y
| }
| ]
| };
| this.chart.setOption(option);
| },
|
| // 跟页面响应式变化
| resizeChart() {
| // this.chart.resize();
| this.$nextTick(() => {
| if (this.chart) {
| this.chart.resize();
| }
| });
| }
| }
| };
| </script>
|
| <style>
| .line-chart {
| width: 100%;
| height: 300px;
| margin-top: 25px;
| }
| </style>
|
|
