From 4f953ffc89fc95f83b152e914c5e65938b440f17 Mon Sep 17 00:00:00 2001
From: Xxxu <794772283@qq.com>
Date: 星期二, 07 七月 2020 10:03:02 +0800
Subject: [PATCH] 上传项目
---
src/views/modules/home/user-base-info/user-base-info-camera-chart.vue | 155 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 155 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/home/user-base-info/user-base-info-camera-chart.vue b/src/views/modules/home/user-base-info/user-base-info-camera-chart.vue
new file mode 100644
index 0000000..3450871
--- /dev/null
+++ b/src/views/modules/home/user-base-info/user-base-info-camera-chart.vue
@@ -0,0 +1,155 @@
+<template>
+ <div>
+ <div id='chart' style='height:150px;width:100%'></div>
+ </div>
+</template>
+<script>
+import echarts from 'echarts'
+export default {
+ data () {
+ return {
+ onlineNum: 0,
+ outlineNum: 0
+ }
+ },
+ activated () {
+ this.getOnlineCamera()
+ },
+ methods: {
+ getOnlineCamera () {
+ this.$http({
+ url: this.$http.adornUrl('/pole/polecamera/getOnline'),
+ method: 'get'
+ }).then(({data}) => {
+ var onlineList = data.list // 灏嗘墍鏈夋暟鎹繚瀛�
+ this.onlineNum = 0
+ this.outlineNum = 0
+ for (var i = 0; i < onlineList.length; i++) {
+ if (onlineList[i].onlineStatus === 1) {
+ this.onlineNum++
+ } else {
+ this.outlineNum++
+ }
+ }
+ this.drawChart()
+ })
+ },
+ drawChart () {
+ var option = {
+ color: ['#09BAFE', '#FC0A15'],
+ title: {
+ text: '鎽勫儚澶�/鍙�',
+ left: 'center',
+ top: '45%',
+ textStyle: {
+ color: 'white',
+ fontSize: 13,
+ align: 'center'
+ }
+ },
+
+ graphic: [
+ {
+ type: 'group',
+ left: '15%',
+ top: '15%',
+ children: [
+ {
+ type: 'text',
+ z: 100,
+ style: {
+ fill: '#FC0A15',
+ text: [this.outlineNum].join('\n'),
+ font: '14px Microsoft YaHei'
+ }
+ }
+ ]
+ },
+ {
+ type: 'group',
+ left: '70%',
+ top: '15%',
+ children: [
+ {
+ type: 'text',
+ z: 100,
+ left: 50,
+ top: 500,
+ style: {
+ fill: '#09BAFE',
+ text: [this.onlineNum].join('\n'),
+ font: '14px Microsoft YaHei'
+ }
+ }
+ ]
+ }
+ ],
+
+ tooltip: {
+ trigger: 'item',
+ // formatter: '{a} <br/>{b}: {c} ({d}%)',
+ formatter: '{a} <br/>{b}: {c}',
+ position: function (point, params, dom, rect, size) {
+ // 鍏朵腑point涓哄綋鍓嶉紶鏍囩殑浣嶇疆锛宻ize涓湁涓や釜灞炴�э細viewSize鍜宑ontentSize锛屽垎鍒负澶栧眰div鍜宼ooltip鎻愮ず妗嗙殑澶у皬
+ var x = point[0] //
+ var y = point[1]
+ var boxWidth = size.contentSize[0]
+ var boxHeight = size.contentSize[1]
+ var posX = 0 // x鍧愭爣浣嶇疆
+ var posY = 0 // y鍧愭爣浣嶇疆
+
+ if (x < boxWidth) {
+ // 宸﹁竟鏀句笉寮�
+ posX = 5
+ } else {
+ // 宸﹁竟鏀剧殑涓�
+ posX = x - boxWidth
+ }
+
+ if (y < boxHeight) {
+ // 涓婅竟鏀句笉寮�
+ posY = 5
+ } else {
+ // 涓婅竟鏀惧緱涓�
+ posY = y - boxHeight
+ }
+
+ return [posX, posY]
+ }
+ },
+ series: [
+ {
+ name: '鎽勫儚澶村湪绾挎暟閲�',
+ type: 'pie',
+ radius: ['55%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ normal: {
+ show: false
+ },
+ emphasis: {
+ show: false,
+ textStyle: {
+ fontSize: '5',
+ fontWeight: 'bold'
+ }
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: [{ value: this.onlineNum, name: '鍦ㄧ嚎' }, { value: this.outlineNum, name: '涓嶅湪绾�' }]
+ }
+ ]
+ }
+
+ var echart = echarts.init(document.getElementById('chart'))
+ echart.setOption(option)
+ }
+ }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3