yudao-init/src/views/report/components/produceLineYieldBarTarget.vue

<!--
 * @Author: zhp
 * @Date: 2024-06-21 09:05:14
 * @LastEditTime: 2024-07-09 16:15:04
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <!-- 暂无数据 -->
    <div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
      v-show="this.chartMsg.series[0].data.length === 0"></div>
    <!-- 图例 -->
    <div v-show="this.chartMsg.series[0].data.length > 0">
      <div class="legendData" v-if="show">
        <span class="itemData" v-for="item in legendList" :key="item.id">
          <span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
          <span v-if="item.type === 2" class="line" :style="{ backgroundColor: item.color }">
            <span class="line-block" :style="{ backgroundColor: item.color }"></span>
          </span>
          {{ item.name }}</span>
      </div>
      <div :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
  name: "bmLineBar",
  data() {
    return {
      myChart: "",
      option: {
        color: [],
        // color: ["#8EF0AB", "#63BDFF", "#288AFF"],
        grid: {
          left: 60,
          right: 0,
          bottom: 30,
          top: 30,
          containLabel:true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "cross",
            crossStyle: {
              color: "rgba(237,237,237,0.5)",
            },
          },
          formatter: function (params) {
            console.log('params', params)
            let arr = []
            var res = ``;
            // for (var i = 0, l = params.length; i < l; i++) {
            // console.log()
            if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量' || params[0].axisValue === '芯片总功率' || params[0].axisValue === '标准组件总功率') {
              res +=
                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
              `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[0].axisValueLabel}</span>` +
              `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[0].name === "综合良率"
                ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
                : params[0].name === "转化效率"
                  ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
                  : params[0].axisValueLabel.search('总功率') != -1
                    ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0) + "MW"
                    : (params[0].value ? params[0].value : 0) + "片"
                }</span>`;
              // }
            }
            if (params[1].axisValue === '综合良率' || params[1].axisValue === '转化效率') {
              res +=
                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
              `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` +
              `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率"
                ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
                : params[1].name === "转化效率"
                  ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
                  : params[1].axisValueLabel.search('总功率') != -1
                    ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0) + "MW"
                    : (params[1].value ? params[1].value : 0) + "片"
                }</span>`;
            }
            return res;
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisTick: {
            show: false,
          },
          axisPointer: {
            type: "shadow",
          },
        },
        // dataZoom: [//滚动条
        //   {
        //     // 设置滚动条的隐藏与显示
        //     show: true,
        //     // 设置滚动条类型
        //     type: "slider",
        //     // 设置背景颜色
        //     backgroundColor: "#F7F7F7",
        //     // 设置选中范围的填充颜色
        //     fillerColor: "#EBEBEB",
        //     // 设置边框颜色
        //     borderColor: "#F7F7F7",
        //     // 是否显示detail，即拖拽时候显示详细数值信息
        //     showDetail: false,
        //     // 数据窗口范围的起始数值
        //     startValue: 0,
        //     // 数据窗口范围的结束数值（一页显示多少条数据）
        //     endValue: 5,
        //     // empty：当前数据窗口外的数据，被设置为空。
        //     // 即不会影响其他轴的数据范围
        //     filterMode: "empty",
        //     // 设置滚动条宽度，相对于盒子宽度
        //     width: "100%",
        //     // 设置滚动条高度
        //     height: 8,
        //     // 设置滚动条显示位置
        //     left: "center",
        //     // 是否锁定选择区域（或叫做数据窗口）的大小
        //     zoomLoxk: true,
        //     // 控制手柄的尺寸
        //     handleSize: 0,
        //     // dataZoom-slider组件离容器下侧的距离
        //     bottom: 3,
        //   },
        //   {
        //     // 没有下面这块的话，只能拖动滚动条，
        //     // 鼠标滚轮在区域内不能控制外部滚动条
        //     type: "inside",
        //     // 滚轮是否触发缩放
        //     zoomOnMouseWheel: false,
        //     // 鼠标滚轮触发滚动
        //     moveOnMouseMove: true,
        //     moveOnMouseWheel: true,
        //   },
        // ],
        yAxis:undefined,
        series: [],
      },
    };
  },
  props: {
    chartHeight: {
      type: Number,
      default: 300,
    },
    type: {
      type: Number,
      default: 2,
    },
    show: {
      type: Boolean,
      default: true,
    },
    legendList: {
      type: Array,
      default: () => [],
    },
    chartMsg: {
      type: Object,
      default: () => { },
    },
    chartId: {
      type: String,
      default: "bmChart",
    },
    chartNum: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    chartHeight: {
      handler(newVal) {
        this.chartHeight = newVal;
      },
    },
    type() {
      this.canvasReset();
    },
    chartNum(val) {
      this.canvasReset();
    },
    chartMsg: {
      handler(newVal) {
        this.canvasReset();
      },
      deep: true,
    },
  },
  mounted() {
    this.canvasReset();
  },
  methods: {
    canvasReset() {
      debounce(() => {
        this.getMes();
      }, 500)();
    },
    getMes() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      var chartDom = document.getElementById(this.chartId);
      this.myChart = echarts.init(chartDom);
      this.option.color = this.chartMsg.color;
      this.option.xAxis.data = this.chartMsg.xData;
      // this.option.yAxis.name = this.chartMsg.yName;

      // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
      this.option.series = this.chartMsg.series;
      this.option.yAxis = this.chartMsg.yAxis;

      this.myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped>
.legendData {
  text-align: right;
  position: relative;
  top: 0px;
  // right: 30;
  // top: 10px;
  .itemData {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: #8c8c8c;
    .block {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: 4px;
    }
    .line {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      display: inline-block;
      margin-right: 4px;
      position: relative;
      .line-block {
        position: absolute;
        width: 20px;
        height: 2px;
        left: -5px;
        top: 4px;
      }
    }
  }
}
</style>