From cb8fc3a72eb5462cb52025b2ec390aa9ba4617e5 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 31 七月 2023 15:39:36 +0800
Subject: [PATCH] #
---
src/components/datav/roseChart.vue | 105 ++++++++++++++++++++++++++--------------------------
1 files changed, 52 insertions(+), 53 deletions(-)
diff --git a/src/components/datav/roseChart.vue b/src/components/datav/roseChart.vue
index fc72e26..8579fd0 100644
--- a/src/components/datav/roseChart.vue
+++ b/src/components/datav/roseChart.vue
@@ -1,72 +1,71 @@
<template>
<div id="rose-chart">
- <div class="rose-chart-title">绱璁￠噺璧勯噾鍒嗗竷</div>
+ <div class="rose-chart-title">姣忔湀閿�鍞噾棰� - 鎬婚噾棰濓細{{ (sum/10000).toFixed(2) }} 涓囧厓</div>
<dv-charts :option="option" />
</div>
</template>
<script>
+import axios from 'axios'
+
export default {
name: 'RoseChart',
- data () {
+ data() {
return {
- option: {}
+ option: {},
+ sum: 1000
}
},
methods: {
- createData () {
- const { randomExtend } = this
-
- this.option = {
- series: [
- {
- type: 'pie',
- radius: '50%',
- roseSort: false,
- data: [
- { name: '璺熀', value: randomExtend(40, 70) },
- { name: '浜ゅ畨璁炬柦', value: randomExtend(20, 30) },
- { name: '鏃ュ父鍏绘姢', value: randomExtend(10, 50) },
- { name: '妗ラ��', value: randomExtend(5, 20) },
- { name: '浜ら�氫簨鏁�', value: randomExtend(40, 50) },
- { name: '璺潰', value: randomExtend(20, 30) },
- { name: '缁垮寲', value: randomExtend(5, 10) },
- { name: '璁℃棩宸�', value: randomExtend(20, 35) },
- { name: '闄ら洩', value: randomExtend(5, 10) }
- ],
- insideLabel: {
- show: false
- },
- outsideLabel: {
- formatter: '{name} {percent}%',
- labelLineEndLength: 20,
- style: {
- fill: '#fff'
+ httpData() {
+ const getApiData = async () => {
+ return await axios.get(this.baseUrl + "data3", { params: {} })
+ }
+ getApiData().then(result => {
+ let list = result.data.data;
+ let sum = 0;
+ for (let i = 0; i < list.length; i++) {
+ let item = list[i];
+ sum += item.sum;
+ item['name'] = item.month + "鏈�";
+ item['value'] = Number(item.sum.toFixed(2));
+ delete item.month;
+ delete item.sum;
+ }
+ this.option = {
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ roseSort: false,
+ data: list,
+ insideLabel: {
+ show: false
},
- labelLineStyle: {
- stroke: '#fff'
- }
- },
- roseType: true
- }
- ],
- color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
- }
- },
- randomExtend (minNum, maxNum) {
- if (arguments.length === 1) {
- return parseInt(Math.random() * minNum + 1, 10)
- } else {
- return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
- }
+ outsideLabel: {
+ formatter: '{name} {percent}%',
+ labelLineEndLength: 20,
+ style: {
+ fill: '#fff'
+ },
+ labelLineStyle: {
+ stroke: '#fff'
+ }
+ },
+ roseType: true
+ }
+ ],
+ color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
+ }
+ this.sum = sum;
+ })
}
},
- mounted () {
- const { createData } = this
-
- createData()
-
- setInterval(createData, 30000)
+ mounted() {
+ const { httpData } = this
+ httpData()
+
+ setInterval(httpData, 30000)
}
}
</script>
--
Gitblit v1.9.1