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
| <template>
| <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
| </template>
|
| <script>
|
| // import mapApi from '@/api/mapApi'
| import 'dayjs/locale/es'
| import dayjs from 'dayjs'
|
| export default {
| name: 'ECharts',
| data () {
| return {
| myChart: [],
| days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
| data: []
| }
| },
| mounted () {
| this.$nextTick(() => {
| this.upDateEcharts()
| })
| },
| methods: {
| // 初始化echarts
| upDateEcharts () {
| this.myChart = this.$echarts.init(this.$refs.echarts)
| // this.myChart.setOption(this.options)
| // setInterval(this.echartsData, 1000)
| function randomData () {
| now = new Date(+now + oneDay)
| value = value + Math.random() * 21 - 10
| return {
| name: now.toString(),
| value: [
| [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
| Math.round(value)
| ]
| }
| }
|
| // this.data = []
| var now = +new Date(1997, 9, 3)
| var oneDay = 24 * 3600 * 1000
| var value = Math.random() * 1000
| for (var i = 0; i < 1000; i++) {
| this.data.push(randomData())
| }
| const option = {
| title: {
| text: '动态数据 + 时间坐标轴'
| },
| tooltip: {
| trigger: 'axis',
| formatter: function (params) {
| params = params[0]
| var date = new Date(params.name)
| return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
| },
| axisPointer: {
| animation: false
| }
| },
| xAxis: {
| type: 'time',
| splitLine: {
| show: false
| }
| },
| yAxis: {
| type: 'value',
| boundaryGap: [0, '100%'],
| splitLine: {
| show: false
| }
| },
| series: [{
| name: '模拟数据',
| type: 'line',
| showSymbol: false,
| hoverAnimation: false,
| data: this.data
| }]
| }
|
| setInterval(function () {
| for (var i = 0; i < 5; i++) {
| this.data.shift()
| this.data.push(randomData())
| }
|
| // this.myChart.setOption({
| // series: [{
| // data: this.data
| // }]
| // })
| }, 1000)
| this.myChart.setOption(option)
| }
| }
| }
| </script>
|
| <style scoped lang="less">
|
| </style>
|
|
