褓座2.0
This commit is contained in:
parent
a535541d9c
commit
0ca8ff3b09
|
|
@ -70,7 +70,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
color = '#1e80ff';
|
color = '#08e5ff';
|
||||||
content = `${percentage}%`;
|
content = `${percentage}%`;
|
||||||
return `
|
return `
|
||||||
<div class="circle-progress" style="border-color: ${color}; ">
|
<div class="circle-progress" style="border-color: ${color}; ">
|
||||||
|
|
@ -203,7 +203,8 @@ export default {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
font-size: 20px;
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-active-ring-chart {
|
.dv-active-ring-chart {
|
||||||
|
|
|
||||||
|
|
@ -15,24 +15,26 @@
|
||||||
<div class="cc-main-container">
|
<div class="cc-main-container">
|
||||||
<div class="ccmc-left">
|
<div class="ccmc-left">
|
||||||
<div class="ccmc-title">
|
<div class="ccmc-title">
|
||||||
测试数据可视化模型
|
订单信息
|
||||||
</div>
|
</div>
|
||||||
<div class="ccmc-items">
|
<div class="ccmc-items">
|
||||||
<div class="station-info" v-for="(item, index) in leftData" :key="index">
|
<div class="station-info" v-for="(item, index) in leftData" :key="index">
|
||||||
<img :src="item.icon" alt="icon" class="station-icon">
|
<img :src="item.icon" alt="icon" class="station-icon">
|
||||||
<div class="station-value">{{ item.value }}</div>
|
<div class="station-value">{{ item.value }}</div>
|
||||||
<div class="station-name">{{ item.name }}</div>
|
<div class="station-name">{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<dv-active-ring-chart class="ccmc-middle" :config="config" />
|
<!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
|
||||||
|
<div class="ccmc-middle">
|
||||||
|
<PieChart></PieChart>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="ccmc-right">
|
<div class="ccmc-right">
|
||||||
<div class="ccmc-title">
|
<div class="ccmc-title">
|
||||||
测试数据可视化模型2
|
保养及备料信息
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="ccmc-items">
|
<!-- <div class="ccmc-items">
|
||||||
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
||||||
|
|
@ -41,11 +43,42 @@
|
||||||
<div class="station-value">{{ item.value }}</div>
|
<div class="station-value">{{ item.value }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<PieChart></PieChart>
|
|
||||||
|
<!-- <div class="right-box-items">
|
||||||
|
<div class="rbi-info" v-for="(item, index) in rightData" :key="index">
|
||||||
|
<img :src="item.icon" alt="icon" class="rbi-icon">
|
||||||
|
<div class="rbi-text">
|
||||||
|
<div class="rbi-name">{{ item.name }}</div>
|
||||||
|
<div class="rbi-value">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="right-container-new">
|
||||||
|
<!-- 第一行 -->
|
||||||
|
<div class="first-row">
|
||||||
|
<img src="../../img/icons/15.png" class="fc-icon">
|
||||||
|
<!-- <div class="first-content">
|
||||||
|
<p class="fc-name">{{ rightData[0].name }}</p>
|
||||||
|
<p class="fc-value">{{ rightData[0].value }}</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<!-- 第二行 -->
|
||||||
|
<div class="second-row">
|
||||||
|
<div
|
||||||
|
class="item-card"
|
||||||
|
v-for="(item, index) in rightData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img :src="item.icon" class="sc-icon">
|
||||||
|
<p class="sc-name">{{ item.name }}</p>
|
||||||
|
<p class="sc-value">{{ item.value }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<LabelTag :config="labelConfig" />
|
<!-- <LabelTag :config="labelConfig" /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -67,15 +100,18 @@ export default {
|
||||||
data () {
|
data () {
|
||||||
// 定义原始数据
|
// 定义原始数据
|
||||||
const originalLeftData = [
|
const originalLeftData = [
|
||||||
{ icon: require(`@/img/icons/1.png`), name: '本月派工数', value: '1120' },
|
|
||||||
{ icon: require(`@/img/icons/2.png`), name: '本月未完成派工数', value: '600' },
|
{ icon: require(`@/img/icons/1.png`), name: '本月订单数', value: '1120' },
|
||||||
{ icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '60%' }
|
{ icon: require(`@/img/icons/2.png`), name: '本月派工数', value: '600' },
|
||||||
|
{ icon: require(`@/img/icons/3.png`), name: '本月派工未完成数', value: '60%' },
|
||||||
|
{ icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '100%' }
|
||||||
];
|
];
|
||||||
|
|
||||||
const originalRightData = [
|
const originalRightData = [
|
||||||
{ icon: require(`@/img/icons/6.png`), name: '今天产量', value: '60' },
|
{ icon: require(`@/img/icons/12.png`), name: '保养台数', value: '20' },
|
||||||
{ icon: require(`@/img/icons/7.png`), name: '直通率', value: '93%' },
|
{ icon: require(`@/img/icons/12.png`), name: '直通率', value: '100%' },
|
||||||
{ icon: require(`@/img/icons/8.png`), name: '今日不良数', value: '2' }
|
{ icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: '98/100' },
|
||||||
|
{ icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '99/100' }
|
||||||
];
|
];
|
||||||
|
|
||||||
// 将数值加倍（支持多次加倍）
|
// 将数值加倍（支持多次加倍）
|
||||||
|
|
@ -91,45 +127,46 @@ export default {
|
||||||
// 第一次加倍
|
// 第一次加倍
|
||||||
const doubledLeftData = originalLeftData.map(item => ({
|
const doubledLeftData = originalLeftData.map(item => ({
|
||||||
...item,
|
...item,
|
||||||
value: doubleValue(item.value)
|
value: item.value
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const doubledRightData = originalRightData.map(item => ({
|
const doubledRightData = originalRightData.map(item => ({
|
||||||
...item,
|
...item,
|
||||||
value: doubleValue(item.value)
|
value: item.value
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 第二次加倍
|
// 第二次加倍
|
||||||
const quadrupledLeftData = doubledLeftData.map(item => ({
|
const quadrupledLeftData = doubledLeftData.map(item => ({
|
||||||
...item,
|
...item,
|
||||||
value: doubleValue(item.value)
|
value: item.value
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const quadrupledRightData = doubledRightData.map(item => ({
|
const quadrupledRightData = doubledRightData.map(item => ({
|
||||||
...item,
|
...item,
|
||||||
value: doubleValue(item.value)
|
value: item.value
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '机芯缺陷占比',
|
name: '机芯产量',
|
||||||
value: 42
|
value: 42
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '盖板缺陷占比',
|
name: '盖板产量',
|
||||||
value: 58
|
value: 58
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
|
color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
|
||||||
lineWidth: 30,
|
lineWidth: 40,
|
||||||
radius: '55%',
|
radius: '55%',
|
||||||
activeRadius: '60%'
|
activeRadius: '60%'
|
||||||
},
|
},
|
||||||
|
|
||||||
labelConfig: {
|
labelConfig: {
|
||||||
data: ['机芯缺陷占比', '盖板缺陷占比']
|
|
||||||
|
data: ['机芯产量', '盖板产量']
|
||||||
},
|
},
|
||||||
|
|
||||||
leftData: quadrupledLeftData,
|
leftData: quadrupledLeftData,
|
||||||
|
|
@ -149,14 +186,15 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.station-icon {
|
.station-icon {
|
||||||
width: 220px;
|
width: 190px;
|
||||||
// height: 80px;
|
// height: 80px;
|
||||||
// margin-bottom: 18px;
|
// margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.station-name {
|
.station-name {
|
||||||
font-size: 25px;
|
font-size: 23px;
|
||||||
color: #0777e0;
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -164,7 +202,7 @@ export default {
|
||||||
.station-value {
|
.station-value {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ffffff;
|
color: #08e5ff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -231,9 +269,10 @@ export default {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
top: 120px;
|
top: 120px;
|
||||||
// left: 50px;
|
// left: 50px;
|
||||||
padding:0 80px;
|
// padding:0 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
|
padding-right: 20px;
|
||||||
.station-info {
|
.station-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -241,6 +280,39 @@ export default {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.right-box-items{
|
||||||
|
position: absolute;
|
||||||
|
top: 140px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 30px;
|
||||||
|
.rbi-info{
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.rbi-icon{
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
.rbi-text{
|
||||||
|
// margin-top: 40px;
|
||||||
|
.rbi-value{
|
||||||
|
font-size: 35px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.rbi-name{
|
||||||
|
font-size: 25px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -257,9 +329,91 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
bottom: 10px;
|
bottom: 20px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
.right-container-new {
|
||||||
|
position: absolute;
|
||||||
|
top: 130px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
p{margin: 0;}
|
||||||
|
.first-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// gap: 15px;
|
||||||
|
// padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// justify-content: space-between;
|
||||||
|
gap: 15px;
|
||||||
|
padding: 0 70px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-card {
|
||||||
|
width: 175px;
|
||||||
|
// flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(33, 150, 243, 0.15), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.15) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border: none; /* 移除原有边框 */
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加柔和阴影提升层次 */
|
||||||
|
border-radius:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-icon {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.fc-name{
|
||||||
|
font-size: 40px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.fc-value{
|
||||||
|
font-size: 60px;
|
||||||
|
text-align: center;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.sc-name{
|
||||||
|
font-size:25px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.sc-value{
|
||||||
|
font-size: 35px;
|
||||||
|
text-align: center;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.sc-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -67,7 +67,7 @@ export default {
|
||||||
|
|
||||||
.label-item {
|
.label-item {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
font-size: 15px;
|
font-size: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="pie-chart" style="height: 100%;width: 100%;">
|
<div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
|
||||||
<div id="pieId-new" class="pie-chart-container"></div>
|
<div id="pieId-new" class="pie-chart-container"></div>
|
||||||
|
<div class="item-box" style="top: 100px;left: 0;text-align: right;">
|
||||||
|
<div class="item-value-box" style="justify-content: flex-end;">
|
||||||
|
<p class="item-value" style="color: #f8ffff;">{{ testchartData[0].value }}</p>
|
||||||
|
<div class="triangle-left" style="border-right:20px solid #f8ffff;"></div>
|
||||||
|
</div>
|
||||||
|
<p class="item-name">{{ testchartData[0].name }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-box" style="top: 300px;left: 0;text-align: right;">
|
||||||
|
<div class="item-value-box" style="justify-content: flex-end;">
|
||||||
|
<p class="item-value" style="color: #88a8f4;">{{ testchartData[1].value }}</p>
|
||||||
|
<div class="triangle-left" style="border-right:20px solid #88a8f4;"></div>
|
||||||
|
</div>
|
||||||
|
<p class="item-name">{{ testchartData[1].name }}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item-box" style="top: 100px;right: 0;text-align: left;">
|
||||||
|
<div class="item-value-box">
|
||||||
|
<div class="triangle-right" style="border-left:20px solid #ffdc9d;"></div>
|
||||||
|
<p class="item-value" style="color: #ffdc9d;">{{ testchartData[2].value }}</p>
|
||||||
|
</div>
|
||||||
|
<p class="item-name">{{ testchartData[2].name }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-box" style="top: 300px;right: 0;">
|
||||||
|
<div class="item-value-box">
|
||||||
|
<div class="triangle-right" style="border-left:20px solid #eb7e41;"></div>
|
||||||
|
<p class="item-value" style="color: #eb7e41;">{{ testchartData[3].value }}</p>
|
||||||
|
</div>
|
||||||
|
<p class="item-name">{{ testchartData[3].name }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -20,6 +49,24 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
testchartData:[
|
||||||
|
{
|
||||||
|
value: 520,
|
||||||
|
name: "机芯产量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 280,
|
||||||
|
name: "盖板产量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "整机产量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "组件产量",
|
||||||
|
},
|
||||||
|
],
|
||||||
option: {}
|
option: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -35,75 +82,63 @@
|
||||||
const chartData = [
|
const chartData = [
|
||||||
{
|
{
|
||||||
value: 520,
|
value: 520,
|
||||||
name: "保养台数",
|
name: "机芯产量",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 280,
|
value: 280,
|
||||||
name: "今天产量",
|
name: "盖板产量",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 100,
|
value: 100,
|
||||||
name: "直通率",
|
name: "整机产量",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 100,
|
value: 100,
|
||||||
name: "今日不良数",
|
name: "组件产量",
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
name: "返工数",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
name: "机芯备料进度",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
name: "盖板备料进度",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const colorList = [
|
const colorList = [
|
||||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: "#CA8CCA",
|
// color: "#CA8CCA",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: "#8A2BE2",
|
// color: "#8A2BE2",
|
||||||
},
|
// },
|
||||||
]),
|
// ]),
|
||||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: "#FF3333",
|
// color: "#FF3333",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: "#FF3333",
|
// color: "#FF3333",
|
||||||
},
|
// },
|
||||||
]),
|
// ]),
|
||||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: "#A8AAE5",
|
// color: "#A8AAE5",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: "#BEA3E3",
|
// color: "#BEA3E3",
|
||||||
},
|
// },
|
||||||
]),
|
// ]),
|
||||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: "#F0F4F8",
|
// color: "#F0F4F8",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: "#E5F2A7",
|
// color: "#E5F2A7",
|
||||||
},
|
// },
|
||||||
]),
|
// ]),
|
||||||
'#FF6B35','#2ECC71','#CCD6DD',
|
'#f8ffff','#88a8f4','#ffdc9d','#eb7e41'
|
||||||
];
|
];
|
||||||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||||
const gap = (1 * sum) / 100;
|
const gap = (1 * sum) / 100;
|
||||||
|
|
@ -136,9 +171,9 @@
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
color: colorList[i],
|
color: colorList[i],
|
||||||
opacity: 0.1,
|
opacity: 0.2,
|
||||||
shadowColor: "#000",
|
shadowColor: "#000",
|
||||||
shadowBlur: 1,
|
shadowBlur: 3,
|
||||||
shadowOffsetY: 5,
|
shadowOffsetY: 5,
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
},
|
},
|
||||||
|
|
@ -150,8 +185,8 @@
|
||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: sum,
|
text: sum,
|
||||||
x: "30%",
|
x: "50%",
|
||||||
y: "43%",
|
y: "40%",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "50",
|
fontSize: "50",
|
||||||
|
|
@ -165,9 +200,9 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "数据展示",
|
text: "总产量",
|
||||||
left: "30%",
|
left: "50%",
|
||||||
top: "52%",
|
top: "55%",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "25",
|
fontSize: "25",
|
||||||
|
|
@ -181,49 +216,49 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
legend: {
|
// legend: {
|
||||||
right: "10%",
|
// right: "10%",
|
||||||
top: 'middle',
|
// top: 'middle',
|
||||||
align: "left",
|
// align: "left",
|
||||||
width:'200',
|
// width:'200',
|
||||||
// orient: 'vertical',
|
// // orient: 'vertical',
|
||||||
itemGap: 30,
|
// itemGap: 30,
|
||||||
itemWidth: 20,
|
// itemWidth: 20,
|
||||||
itemHeight: 20,
|
// itemHeight: 20,
|
||||||
shadowBlur: 10,
|
// shadowBlur: 10,
|
||||||
shadowOffsetY: 0,
|
// shadowOffsetY: 0,
|
||||||
shadowOffsetX: 0,
|
// shadowOffsetX: 0,
|
||||||
borderColor: "#2a2a34",
|
// borderColor: "#2a2a34",
|
||||||
borderWidth: 2,
|
// borderWidth: 2,
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
color: "#D8DDE3",
|
// color: "#D8DDE3",
|
||||||
rich: {
|
// rich: {
|
||||||
name: {
|
// name: {
|
||||||
verticalAlign: "right",
|
// verticalAlign: "right",
|
||||||
align: "left",
|
// align: "left",
|
||||||
fontSize: 24,
|
// fontSize: 24,
|
||||||
color: "#D8DDE3",
|
// color: "#D8DDE3",
|
||||||
},
|
// },
|
||||||
percent: {
|
// percent: {
|
||||||
padding: [0, 0, 0, 10],
|
// padding: [0, 0, 0, 10],
|
||||||
color: "#08e5ff",
|
// color: "#08e5ff",
|
||||||
fontSize: 25,
|
// fontSize: 25,
|
||||||
fontWeight:'bold'
|
// fontWeight:'bold'
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
formatter: (name) => {
|
// formatter: (name) => {
|
||||||
const item = chartData.find((i) => {
|
// const item = chartData.find((i) => {
|
||||||
return i.name === name;
|
// return i.name === name;
|
||||||
});
|
// });
|
||||||
//是否计算为百分比
|
// //是否计算为百分比
|
||||||
// const p = ((item.value / sum) * 100).toFixed(0);
|
// // const p = ((item.value / sum) * 100).toFixed(0);
|
||||||
// return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
|
// // return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
|
||||||
|
|
||||||
// const p = ((item.value / sum) * 100).toFixed(0);
|
// // const p = ((item.value / sum) * 100).toFixed(0);
|
||||||
return "{name|" + name + "}" + "{percent|" + item.value + "}";
|
// return "{name|" + name + "}" + "{percent|" + item.value + "}";
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
|
|
||||||
color: colorList,
|
color: colorList,
|
||||||
|
|
||||||
|
|
@ -232,8 +267,8 @@
|
||||||
type: "pie",
|
type: "pie",
|
||||||
z: 3,
|
z: 3,
|
||||||
roundCap: true,
|
roundCap: true,
|
||||||
radius: ["44%", "51%"],
|
radius: ["60%", "50%"],
|
||||||
center: ["30%", "50%"],
|
// center: ["30%", "50%"],
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
|
@ -245,8 +280,8 @@
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
z: 2,
|
z: 2,
|
||||||
radius: ["40%", "55%"],
|
radius: ["70%", "66%"],
|
||||||
center: ["30%", "50%"],
|
// center: ["30%", "50%"],
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
|
@ -269,11 +304,51 @@
|
||||||
#pie-chart {
|
#pie-chart {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: white;
|
color: white;
|
||||||
|
.item-box{
|
||||||
|
position: absolute;
|
||||||
|
p{margin: 0;}
|
||||||
|
.item-name{
|
||||||
|
width: 200px;
|
||||||
|
font-size:30px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.item-value-box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.item-value{
|
||||||
|
font-size:45px;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
.pie-chart-container {
|
.pie-chart-container {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
width: 50%;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
/* 向右的三角形 */
|
||||||
|
.triangle-right {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 15px solid transparent;
|
||||||
|
border-bottom: 15px solid transparent;
|
||||||
|
border-left: 20px solid #ff4141; /* 通过调整颜色和尺寸改变外观 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 向左的三角形 */
|
||||||
|
.triangle-left {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 15px solid transparent;
|
||||||
|
border-bottom: 15px solid transparent;
|
||||||
|
border-right: 20px solid #41a2ff; /* 通过调整颜色和尺寸改变外观 */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
Loading…
Reference in New Issue