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-streetlight-chart.vue | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/home/user-base-info/user-base-info-streetlight-chart.vue b/src/views/modules/home/user-base-info/user-base-info-streetlight-chart.vue
new file mode 100644
index 0000000..ba5e9a9
--- /dev/null
+++ b/src/views/modules/home/user-base-info/user-base-info-streetlight-chart.vue
@@ -0,0 +1,154 @@
+<template>
+ <div>
+ <div id='streetlightChart' style='height:150px;width:100%'></div>
+ </div>
+</template>
+<script>
+import echarts from 'echarts'
+export default {
+ data () {
+ return {
+ brightNum: 0,
+ notBrightNum: 0
+ }
+ },
+ computed: {
+ streetlightList () {
+ return this.$store.state.home.homeStreetlightList
+ }
+ },
+ watch: {
+ streetlightList (curVal, oldVal) {
+ this.notBrightNum = 0
+ this.brightNum = 0
+ var streetlightList = curVal
+ for (var i = 0; i < streetlightList.length; i++) {
+ if (streetlightList[i].light === 0) {
+ this.notBrightNum++
+ } else {
+ this.brightNum++
+ }
+ }
+ this.drawChart()
+ }
+ },
+ methods: {
+ 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.notBrightNum].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.brightNum].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.brightNum, name: '浜伅鏁伴噺' }, { value: this.notBrightNum, name: '鏈寒鐏暟閲�' }]
+ }
+ ]
+ }
+
+ var streetlightChart = echarts.init(document.getElementById('streetlightChart'))
+ streetlightChart.setOption(option)
+ }
+ }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3