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

<!--
 * @Author: zhp
 * @Date: 2024-06-20 16:13:36
 * @LastEditTime: 2024-06-20 20:49:23
 * @LastEditors: zhp
 * @Description:
-->
<!--
 * @Author: zhp
 * @Date: 2024-06-19 15:28:34
 * @LastEditTime: 2024-06-20 16:02:21
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <!-- 暂无数据 -->
    <div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
      v-show="this.chartMsg.series.length === 0"></div>
    <!-- 图例 -->
    <div v-show="this.chartMsg.series.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: -30,
          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);
            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "<br/>" +
                `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
                `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
              `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
                  ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
                : params[i].seriesName === "转化效率"
                    ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
                  : params[i].seriesName.search('总功率') != -1
                      ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "MW"
                      : params[i].value + "片"
                }</span>`;
            }
            return res;
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisTick: {
            show: false,
          },
          axisPointer: {
            type: "shadow",
          },
        },
        dataZoom: [//滚动条
          {
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "50%",
            // 设置滚动条高度
            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">
.legendData {
  text-align: right;
  position: relative;
  // 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>