diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 7661512..1f0034c 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -145,9 +145,10 @@
-
+
+
专项资金项目统计图
@@ -167,7 +168,20 @@ +
+
+
+
+
总资金:4,5000¥
+
+
+
智汇未来科技公司
+
3000
+
+
+
研发投入资金统计图
+ @@ -576,32 +590,144 @@ const tableConfigReport = reactive({ }) const data = reactive({ - pieCharts: null, + fundPieCharts: null, + moneyPieCharts: null, }) -const roseOption = ref({ +const fundPieOption = ref({ tooltip: { trigger: 'item' }, legend: { - top: 'bottom', + top: 'top', + orient: 'vertical', + left: '0', + bottom: '20', + align: 'left', + icon: 'circle', + textStyle: { + color: '#000', + fontSize: '14px' + }, + formatter: function (name) { + let data = fundPieOption.value.series[0].data + // console.log(data, 'data') + let total = 0 + let tarValue + for (let i = 0; i < data.length; i++) { + total += data[i].value + if (data[i].name == name) { + tarValue = data[i].value + } + } + let v = tarValue + let p = ((tarValue / total) * 100).toFixed(2) + return `${name} ${v} ${p}%` + }, + }, + graphic: { //图形中间图片 + elements: [{ + type: 'image', + style: { + image: "people.png",//你的图片地址 + width: 70, + height: 70 + }, + left: 'center', + top: '42%', + }] }, series: [ { type: 'pie', - radius: [80, 100], + radius: [85, 100], center: ['50%', '50%'], + top: '10%', + label: { + show: false, + formatter: '{b}: {c} ({d}%)', + }, itemStyle: { - // borderRadius: 8 + normal: { + color: function (params) { + const colorList = [ + ['#6101ff', '#a965ff'], + ['#5cdcd3', '#5cdcd3'], + ]; + const index = params.dataIndex; + return new echarts.graphic.LinearGradient(0, 0, 1, 1, + [{ + offset: 0, + color: colorList[index][0] + }, + { + offset: 1, + color: colorList[index][1] + } + ]); + } + } }, data: [ - {value: 10, name: '用户总数'}, - {value: 50, name: '角色总数'}, - ] + {value: 75, name: '专项资金',}, + {value: 20, name: '非专项资金',}, + ], + }, + { + name: '', + type: 'pie', + top: '10%', + clockWise: false, + hoverAnimation: false, + radius: ['80%', '80%'],//边框大小 + center: ['50%', '50%'],//边框位置 + tooltip: { + show: false + }, + label: { + show: false + }, + emphasis: { + show: false + }, + data: [{ + value: 0, + itemStyle: { + normal: { + borderWidth: 1,//设置边框粗细 + borderColor: 'rgba(0,0,0,0.1)'//边框颜色 + } + } + }] } ] }) +const moneyPieOption = ref({ + tooltip: { + trigger: 'item' + }, + series: [ + { + type: 'pie', + radius: [0, 100], + center: ['50%', '50%'], + label: { + normal: { + show: true, + position: 'inner', + formatter: '{c}', + }, + }, + data: [ + {value: 30000, name: '智汇未来科技公司',}, + {value: 10000, name: '云航信息技术公司',}, + {value: 5000, name: '融智投资管理公司',}, + ], + }, + ] +}) const init = () => { - data.pieCharts = echarts.init(document.getElementById('rose')).setOption(roseOption.value) + data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value) + data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value) } onMounted(() => { @@ -705,6 +831,34 @@ const handleView = (row) => { * { font-family: Source Sans Pro, Source Sans Pro; } +.money-block{ + display: flex;align-items: center; + .total-money{ + height: 25px; + font-weight: 400; + font-size: 16px; + color: #000000; + line-height: 18px; +} + .legend{ + + } +} + +.money-container { + height: calc((100vh / 2) - 200px); + display: flex; + justify-content: center; + align-items: center; + margin-top: 40px; + width: 250px; + + > div { + + height: 300px; + flex: 1; + } +} .container { height: calc((100vh / 2) - 200px); @@ -1105,6 +1259,15 @@ const handleView = (row) => { border-radius: 10px; background-color: #ffffff; + .fund-pie { + width: 100%; + height: 25px; + font-size: 14px; + color: rgba(0, 0, 0, 0.5); + text-align: center; + margin-top: 15px; + } + .title-block { display: flex; justify-content: space-between;