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 @@
+
+ 研发投入资金统计图
+
@@ -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;