185 lines
4.8 KiB
Vue
185 lines
4.8 KiB
Vue
|
<template>
|
||
|
|
<el-card style="width: 49.9%;">
|
||
|
|
<template #header>
|
||
|
|
<div class="card-header">
|
||
|
|
<span>我的投标</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div style="display: flex;justify-content: space-around;">
|
||
|
|
<div v-for=" item in customList" :key="item" style="text-align: center;">
|
||
|
|
<div>{{ item.value }}</div>
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main"></div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import { apistatisticsbidding } from '@/api/statistics'
|
||
|
|
|
||
|
|
const customList = reactive([
|
||
|
|
{
|
||
|
|
name: "客户总数",
|
||
|
|
value: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "今年增加",
|
||
|
|
value: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "今年增加",
|
||
|
|
value: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "今年增加",
|
||
|
|
value: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "今年增加",
|
||
|
|
value: 3
|
||
|
|
}
|
||
|
|
|
||
|
|
])
|
||
|
|
|
||
|
|
|
||
|
|
const initChart = (id, opt) => {
|
||
|
|
var chartDom = document.getElementById(id);
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
myChart.setOption(opt);
|
||
|
|
}
|
||
|
|
|
||
|
|
const getData = async () => {
|
||
|
|
let res = await apistatisticsbidding()
|
||
|
|
let value = +res.bidding_rate * 100
|
||
|
|
let option3 = {
|
||
|
|
title: {
|
||
|
|
text: '{a|' + value + '}{c|%}',
|
||
|
|
x: 'center',
|
||
|
|
y: 'center',
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: 20,
|
||
|
|
color: 'black',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
c: {
|
||
|
|
fontSize: 20,
|
||
|
|
color: 'black',
|
||
|
|
fontWeight: 'normal'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
//外环
|
||
|
|
{
|
||
|
|
name: "外环",
|
||
|
|
type: 'pie',
|
||
|
|
silent: true,
|
||
|
|
clockwise: true,
|
||
|
|
radius: ['70%', '75%'],
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
data: [0]
|
||
|
|
},
|
||
|
|
//内环
|
||
|
|
{
|
||
|
|
name: "内环",
|
||
|
|
type: 'pie',
|
||
|
|
silent: true,
|
||
|
|
clockwise: true,
|
||
|
|
radius: ['45%', '46%'],
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#414f63',
|
||
|
|
},
|
||
|
|
data: [0]
|
||
|
|
},
|
||
|
|
//外环
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['55%', '65%'],
|
||
|
|
silent: true,
|
||
|
|
clockwise: true,
|
||
|
|
startAngle: 90,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: value,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
//外环发光
|
||
|
|
borderWidth: 0.5,
|
||
|
|
shadowBlur: 20,
|
||
|
|
borderColor: '#4bf3f9',
|
||
|
|
shadowColor: '#9bfeff',
|
||
|
|
color: { // 圆环的颜色
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: '#15caff', // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: '#159bfe', // 100% 处的颜色
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 100 - value,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#364662"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
initChart("main", option3)
|
||
|
|
customList[0].value = res.decision
|
||
|
|
customList[1].value = res.document
|
||
|
|
customList[2].value = res.examination
|
||
|
|
customList[3].value = res.not_return_margin_amount
|
||
|
|
customList[4].value = res.successful
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
getData()
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
#main,
|
||
|
|
#main2,
|
||
|
|
#main3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
</style>
|