yudao-init/src/views/produce/data/lineChart.vue

<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: DY
 * @LastEditTime: 2024-07-01 16:54:41
 * @Description:
-->
<template>
  <!-- <div> -->
  <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
  <!-- </div> -->
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '@/mixins/resize'
import { factoryListabbr } from "@/utils/constants";

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'reportChart'
    },
    className: {
      type: String,
      default: 'reportChart'
    },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: String,
      default: '35vh'
    },
    legendPosition: {
      type: String,
      default: 'center'
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.initChart()
  //   })
  // },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(xAxis, seriesList) {
      if (xAxis.length === 0) {
        this.chart.clear()
      }
      else {
        this.chart = echarts.init(document.getElementById(this.id))
        console.log(this.$parent);
        this.chart.setOption({
        title: {
          text: '',
          // subtext: 'Fake Data'
        },
        legend: {
          right: '90px',
          top: '0%',
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 40,
          formatter(name) {
            return name.split('-')[0]
          },
          data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            color: "rgba(237,237,237,0.5)"
          },
          formatter: function(params) {
            let result = `
            <div style="width: 270px; display: flex">
              <div style="width: 150px">${params[0].name}</div>
              <div style="width: 60px; text-align: right">${factoryListabbr[0]}</div>
              <div style="width: 60px; text-align: right">${factoryListabbr[1]}</div>
            </div>`
            const newArray = params.map(p => {
              console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
              return {
                glass: p.seriesName.split('-')[0], // 玻璃类型
                factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
                value: p.value,
                name: p.name,
                marker: p.marker,
                color: p.color
              }
            })
            const analyzeList = Object.groupBy(newArray, (member) => member.glass)
            for (let g in analyzeList) {
              // date => 玻璃类型
              let oneData = `<div style="width: 270px; display: flex">
              <div style="width: 150px; display: flex; align-items: center">
              <div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
              <div>${g}</div></div>`
              for (let fac of factoryListabbr) {
                let goodNum = 0
                for (let ana of analyzeList[g]) {
                  if (ana.factoryName === fac && ana.value !== 0) {
                    goodNum = ana.value
                  }
                }
                oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
              }
              result = result + oneData + '</div>'
            }
            return result
          }
        },
        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            name: '日期',
            data: xAxis,
            axisLabel: {
              rotate: 25
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：片'
          }
        ],
        grid: {
          top: '10%',
          left: "2%",
          right: "5%",
          bottom: "0%",
          containLabel: true
        },
        series: seriesList
      }, true)
      }
    }
  }
}
</script>

<style scoped>
.chartTooltipSpan {
  width: 50px;
  background: #787878;
}
/* .reportChart {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 10px;
} */
</style>