所有柱状图样式优化

yangfeng

2023-12-08 952ac0d2df182701395cbd93af741a3bf3a69bae

所有柱状图样式优化

 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,
            },
          ],

 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",

 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: {
                  //柱形图圆角，初始化效果

 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;
  }

 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",

 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) {