From 1f4c79169a0d3ef46f2430b61d4999e1be6261b3 Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期一, 06 五月 2024 14:59:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/equipment/mqtt-show/components/largeAreaChart.vue | 124 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 124 insertions(+), 0 deletions(-)
diff --git a/src/views/equipment/mqtt-show/components/largeAreaChart.vue b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
new file mode 100644
index 0000000..5bdaf75
--- /dev/null
+++ b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
@@ -0,0 +1,124 @@
+<template>
+ <div ref="myChart" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+var myChart = null
+var option = null
+
+let base = +new Date(1968, 9, 3)
+let oneDay = 24 * 3600 * 1000
+let date = []
+let data = [Math.random() * 300]
+for (let i = 1; i < 20000; i++) {
+ var now = new Date((base += oneDay))
+ date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
+}
+
+export default {
+ // props: {
+ // yAxisMonth: {
+ // type: Array,
+ // default: []
+ // },
+ // seriesData: {
+ // type: Array,
+ // default: []
+ // }
+ // },
+ data() {
+ return {
+ option: {
+ tooltip: {
+ trigger: 'axis',
+ position: function(pt) {
+ return [pt[0], '10%']
+ }
+ },
+ title: {
+ left: '5%',
+ text: 'Large Ara Chart'
+ },
+ toolbox: {
+ right: '5%',
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ right: '5%'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: date
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 10
+ },
+ {
+ start: 0,
+ end: 10
+ }
+ ],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ symbol: 'none',
+ sampling: 'lttb',
+ itemStyle: {
+ color: 'rgb(255, 70, 131)'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }
+ ])
+ },
+ data: data
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ myChart = echarts.init(this.$refs.myChart)
+ option = this.makeOption()
+ this.initDrag()
+ },
+ methods: {
+ makeOption() {},
+ initDrag() {
+ myChart.setOption((option = this.option))
+
+ option && myChart.setOption(option)
+ // 椤甸潰鍙戠敓鍙樺寲tree涔熸敼鍙�
+ window.addEventListener('resize', () => {
+ if (myChart) myChart.resize()
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.9.3