From 04b8eff075a04db23e6f908855699b4d2954588c Mon Sep 17 00:00:00 2001
From: yyt <306727702@qq.com>
Date: 星期四, 23 五月 2024 18:47:01 +0800
Subject: [PATCH] 380新产品,优化
---
jcdm-ui/src/views/dashboard/PieChart.vue | 59 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 41 insertions(+), 18 deletions(-)
diff --git a/jcdm-ui/src/views/dashboard/PieChart.vue b/jcdm-ui/src/views/dashboard/PieChart.vue
index 63f0d84..35fb6af 100644
--- a/jcdm-ui/src/views/dashboard/PieChart.vue
+++ b/jcdm-ui/src/views/dashboard/PieChart.vue
@@ -6,6 +6,7 @@
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
+import { getTopProcess } from "@/api/main/da/passingStationCollection/passingStationCollection";
export default {
mixins: [resize],
@@ -20,18 +21,19 @@
},
height: {
type: String,
- default: '300px'
+ default: '350px'
}
},
data() {
return {
- chart: null
+ chart: null,
+ data: [],
+ title:[],
}
},
mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
+ this.getData()
+
},
beforeDestroy() {
if (!this.chart) {
@@ -41,33 +43,54 @@
this.chart = null
},
methods: {
+ getData(){
+ getTopProcess().then(res => {
+ if (res.code === 200){
+ this.data = res.rows
+ this.data.forEach(x => {
+ this.title.push(x.name)
+ })
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ }
+ })
+ },
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
+ title: {
+ text: '宸ヤ綅鍫靛Top5', // 鏍囬鏂囨湰
+ left: 'center' // 鏍囬浣嶇疆
+ },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
+ // textStyle
legend: {
- left: 'center',
- bottom: '10',
- data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+ orient: 'vertical',
+
+ left: 'left',
+ // left: 'center',
+ // bottom: '10',//宸︿晶楂樺害
+ data: this.title
},
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
- roseType: 'radius',
- radius: [15, 95],
- center: ['50%', '38%'],
- data: [
- { value: 320, name: 'Industries' },
- { value: 240, name: 'Technology' },
- { value: 149, name: 'Forex' },
- { value: 100, name: 'Gold' },
- { value: 59, name: 'Forecasts' }
- ],
+ // roseType: 'radius',//鏇存敼鏍峰紡
+ radius: '50%',
+ // labelLine: {
+ // length: 10 // 璋冩暣鏍囩绾跨殑闀垮害
+ // },
+ center: ['50%', '60%'],
+ data: this.data,
+ label: {
+ formatter: '{b}: {c} ({d}%)'
+ },
animationEasing: 'cubicInOut',
animationDuration: 2600
}
--
Gitblit v1.9.3