From 952ac0d2df182701395cbd93af741a3bf3a69bae Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 08 十二月 2023 10:57:24 +0800
Subject: [PATCH] 所有柱状图样式优化
---
src/views/cockpitPage/components/DeviceChart.vue | 10 ++++-
src/views/cockpitPage/components/BarChart.vue | 31 +++++++--------
src/views/cockpitPage/components/PerSonnelProductivity.vue | 10 ++++-
src/views/cockpitPage/components/MaterialChart.vue | 11 ++++-
src/views/cockpitPage/components/OrderCompleteRadio.vue | 6 +-
src/views/cockpitPage/index.vue | 1
6 files changed, 44 insertions(+), 25 deletions(-)
diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index f4c4554..8e76309 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -81,6 +81,7 @@
myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
+ let spirit = "/cockpitPage/order-bg.png";
if (data) {
option = {
color: ["#dcb018", "#00FFFF"],
@@ -265,27 +266,25 @@
],
series: [
{
- type: "bar",
+ type: "pictorialBar",
name: "姝ｅ搧鏁伴噺",
- barWidth: "15",
- itemStyle: {
- normal: {
- //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- barBorderRadius: [4, 4, 0, 0],
- },
- },
+ symbol: spirit,
+ symbolRepeat: true,
+ symbolMargin: "25%",
+ symbolClip: true,
+ symbolSize: [17, 4],
+ barCategoryGap: "40%",
data: data.datay,
},
{
- type: "bar",
+ type: "pictorialBar",
name: "娆″搧鏁伴噺",
- barWidth: "15",
- itemStyle: {
- normal: {
- //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- barBorderRadius: [4, 4, 0, 0],
- },
- },
+ symbol: spirit,
+ symbolRepeat: true,
+ symbolMargin: "25%",
+ symbolClip: true,
+ symbolSize: [17, 4],
+ barCategoryGap: "40%",
data: data.datay2,
},
],
diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
index f402a4b..7479b4a 100644
--- a/src/views/cockpitPage/components/DeviceChart.vue
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -57,6 +57,7 @@
myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
+ let spirit = "/cockpitPage/order-bg.png";
if (data) {
option = {
color: ["#00FFFF", "#dcb018"],
@@ -177,9 +178,14 @@
],
series: [
{
- type: "bar",
+ type: "pictorialBar",
name: "",
- barWidth: "15",
+ symbol: spirit,
+ symbolRepeat: true,
+ symbolMargin: "25%",
+ symbolClip: true,
+ symbolSize: [4, 11],
+ barCategoryGap: "40%",
label: {
show: true,
position: "right",
diff --git a/src/views/cockpitPage/components/MaterialChart.vue b/src/views/cockpitPage/components/MaterialChart.vue
index a8b1ebe..ae74ac4 100644
--- a/src/views/cockpitPage/components/MaterialChart.vue
+++ b/src/views/cockpitPage/components/MaterialChart.vue
@@ -55,6 +55,7 @@
myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
+ let spirit = "/cockpitPage/order-bg.png";
if (data) {
option = {
color: ["#00FFFF", "#dcb018"],
@@ -100,6 +101,7 @@
yAxis: [
{
type: "category",
+ inverse: true,
axisTick: {
show: false,
},
@@ -176,9 +178,14 @@
],
series: [
{
- type: "bar",
+ type: "pictorialBar",
name: "",
- barWidth: "15",
+ symbol: spirit,
+ symbolRepeat: true,
+ symbolMargin: "25%",
+ symbolClip: true,
+ symbolSize: [4, 11],
+ barCategoryGap: "40%",
itemStyle: {
normal: {
//鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 65f3a64..6d76296 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -9,7 +9,7 @@
<div class="left">{{ item.title }}</div>
<div class="middle" ref="middle">
<el-progress
- :stroke-width="20"
+ :stroke-width="18"
:text-inside="true"
:percentage="item.radio"
:define-back-color="'#083f55'"
@@ -91,6 +91,7 @@
}
.list-view {
height: calc(100% - 20px);
+ padding-right: 5px;
.table-bg-view {
display: flex;
align-items: center;
@@ -98,6 +99,7 @@
background: #083f55;
height: calc(20% - 10px);
width: 100%;
+ padding-right: 5px;
border-radius: 50px;
transition: all 1s ease-in-out 0s;
.left {
@@ -122,13 +124,11 @@
}
.el-progress-bar__inner {
position: relative;
- // background: #552d08;
background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
center center / cover;
}
.setTitle-complete .el-progress-bar__inner {
position: relative;
- // background: #552d08;
background: url("../../../../public/cockpitPage/order-complete.png")
no-repeat center center / cover;
}
diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index 32fefd1..1634c61 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -62,6 +62,7 @@
myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
+ let spirit = "/cockpitPage/order-bg.png";
if (data) {
option = {
color: ["#00FFFF", "#dcb018"],
@@ -182,9 +183,14 @@
],
series: [
{
- type: "bar",
+ type: "pictorialBar",
name: "",
- barWidth: "15",
+ symbol: spirit,
+ symbolRepeat: true,
+ symbolMargin: "25%",
+ symbolClip: true,
+ symbolSize: [4, 11],
+ barCategoryGap: "40%",
label: {
show: true,
position: "right",
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 6745256..a06e6d1 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -294,6 +294,7 @@
this.materialChartData.datax.push(item.Name);
this.materialChartData.datay.push(parseFloat(item.Value));
});
+ console.log(this.materialChartData.datay, "5555555555");
},
// 杞﹂棿姝ｅ搧鐜�
setRightBlock3(data) {
--
Gitblit v1.8.0