数据统计
This commit is contained in:
zmj
parent
3527fe9f60
commit
5c7cb58538
718
src/views/astatistics/index.vue
Normal file
718
src/views/astatistics/index.vue
Normal file
@ -0,0 +1,718 @@
|
|||||||
|
<template>
|
||||||
|
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||||
|
|
||||||
|
<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="customNum" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<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="projectApproved" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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="main2"></div>
|
||||||
|
</el-card>
|
||||||
|
<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="main3"></div>
|
||||||
|
</el-card>
|
||||||
|
<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="main4" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<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="main5" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
<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="main6" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
<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="main7" class="chart"></div>
|
||||||
|
</el-card>
|
||||||
|
<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>
|
||||||
|
<el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" type="index" width="55" />
|
||||||
|
<el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
|
||||||
|
<el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
|
||||||
|
<el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
|
||||||
|
<el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
|
||||||
|
<el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
|
||||||
|
</el-table>
|
||||||
|
<div class="flex justify-end mt-4">
|
||||||
|
<pagination v-model="pager" @change="getLists" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<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>
|
||||||
|
<el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" type="index" width="55" />
|
||||||
|
<el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
|
||||||
|
<el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
|
||||||
|
<el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
|
||||||
|
<el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
|
||||||
|
<el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
|
||||||
|
</el-table>
|
||||||
|
<div class="flex justify-end mt-4">
|
||||||
|
<pagination v-model="pager" @change="getLists" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted } from "vue"
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import { usePaging } from '@/hooks/usePaging'
|
||||||
|
import { apiProjectPreSalesMembersLists, } from '@/api/project_pre_sales_members'
|
||||||
|
// 分页相关
|
||||||
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||||
|
fetchFun: apiProjectPreSalesMembersLists,
|
||||||
|
// params: queryParams
|
||||||
|
})
|
||||||
|
getLists()
|
||||||
|
const customList = reactive([
|
||||||
|
{
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const customLists = reactive([
|
||||||
|
{
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
name: "客户总数",
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
|
var app = {};
|
||||||
|
const posList = [
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'top',
|
||||||
|
'bottom',
|
||||||
|
'inside',
|
||||||
|
'insideTop',
|
||||||
|
'insideLeft',
|
||||||
|
'insideRight',
|
||||||
|
'insideBottom',
|
||||||
|
'insideTopLeft',
|
||||||
|
'insideTopRight',
|
||||||
|
'insideBottomLeft',
|
||||||
|
'insideBottomRight'
|
||||||
|
];
|
||||||
|
app.configParameters = {
|
||||||
|
rotate: {
|
||||||
|
min: -90,
|
||||||
|
max: 90
|
||||||
|
},
|
||||||
|
align: {
|
||||||
|
options: {
|
||||||
|
left: 'left',
|
||||||
|
center: 'center',
|
||||||
|
right: 'right'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
verticalAlign: {
|
||||||
|
options: {
|
||||||
|
top: 'top',
|
||||||
|
middle: 'middle',
|
||||||
|
bottom: 'bottom'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
options: posList.reduce(function (map, pos) {
|
||||||
|
map[pos] = pos;
|
||||||
|
return map;
|
||||||
|
}, {})
|
||||||
|
},
|
||||||
|
distance: {
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
};
|
||||||
|
app.config = {
|
||||||
|
rotate: 90,
|
||||||
|
align: 'left',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
position: 'insideBottom',
|
||||||
|
distance: 15,
|
||||||
|
onChange: function () {
|
||||||
|
const labelOption = {
|
||||||
|
rotate: app.config.rotate,
|
||||||
|
align: app.config.align,
|
||||||
|
verticalAlign: app.config.verticalAlign,
|
||||||
|
position: app.config.position,
|
||||||
|
distance: app.config.distance
|
||||||
|
};
|
||||||
|
myChart.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
label: labelOption
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: labelOption
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: labelOption
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: labelOption
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
rich: {
|
||||||
|
name: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right',
|
||||||
|
top: 'center',
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '名称',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: 'Steppe',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [220, 182, 191, 234, 290]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Desert',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [150, 232, 201, 154, 190]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Wetland',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [98, 77, 101, 99, 40]
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
let customoption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right',
|
||||||
|
top: 'center',
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '名称',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: 'Steppe',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [220, 182, 191, 234, 290]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Desert',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [150, 232, 201, 154, 190]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Wetland',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [98, 77, 101, 99, 40]
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var option4 = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right',
|
||||||
|
top: 'center',
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '名称',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Steppe',
|
||||||
|
type: 'bar',
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Desert',
|
||||||
|
type: 'bar',
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [150, 232, 201, 154, 190]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: 'Wetland',
|
||||||
|
// type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: [98, 77, 101, 99, 40]
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
let option2 = {
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
subtext: '',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
{ value: 300, name: 'Video Ads' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
let value = 58; //图上角度数据
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const initChart = (id, opt) => {
|
||||||
|
var chartDom = document.getElementById(id);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(opt);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
initChart("customNum", customoption)
|
||||||
|
initChart("projectApproved", option2)
|
||||||
|
|
||||||
|
initChart("main", option3)
|
||||||
|
initChart("main2", option2)
|
||||||
|
initChart("main3", option)
|
||||||
|
initChart("main4", option)
|
||||||
|
initChart("main5", option)
|
||||||
|
initChart("main6", option4)
|
||||||
|
initChart("main7", option2)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#main,
|
||||||
|
#main2,
|
||||||
|
#main3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,20 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-card style="display: flex;">
|
<el-card>
|
||||||
|
我的客户
|
||||||
<div id="main"></div>
|
<div id="main"></div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card>
|
||||||
<div id="main2"></div>
|
<div id="main2"></div>
|
||||||
|
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
import { onMounted } from "vue"
|
import { onMounted } from "vue"
|
||||||
|
|
||||||
var app = {};
|
var app = {};
|
||||||
|
|
||||||
var option;
|
|
||||||
|
|
||||||
const posList = [
|
const posList = [
|
||||||
'left',
|
'left',
|
||||||
'right',
|
'right',
|
||||||
@ -98,7 +102,7 @@ const labelOption = {
|
|||||||
name: {}
|
name: {}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
option = {
|
var option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
@ -201,13 +205,14 @@ let option2 = {
|
|||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
const initChart = (id, opt) => {
|
||||||
var chartDom = document.getElementById('main');
|
var chartDom = document.getElementById(id);
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
option && myChart.setOption(option);
|
myChart.setOption(opt);
|
||||||
var chartDom2 = document.getElementById('main2');
|
}
|
||||||
var myChart2 = echarts.init(chartDom2);
|
onMounted(() => {
|
||||||
option2 && myChart2.setOption(option2);
|
initChart("main", option)
|
||||||
|
initChart("main2", option2)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user