echarts点击柱状图出新的图表自适应屏幕

echarts点击柱状图出新的图表自适应屏幕

未点击之前的页面：

点击柱状图后的效果：

解决：

1. 在data中定义屏幕高度

      windowsHeight: document.documentElement.clientHeight,
      heightMax: 0,
      heightMin: 0,

2. 修改柱状图style

	<!-- 柱状图部分 -->
    <div>
      <el-col :span="24">
        <el-col :span="16">
          <el-col :span="24">
            <div ref="totalChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;margin-top:40px;width:100%;height:'+this.heightMax+'px'"></div>
          </el-col>

          <el-col :span="24">
            <div ref="singleChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;width:100%;height:'+this.heightMin+'px'"></div>
          </el-col>

        </el-col>
        <el-col :span="8">
          <div ref="percentChart" style="margin-top:160px;height:400px"></div>
        </el-col>
      </el-col>
    </div>

3. 在点击搜索按钮时设置两个柱状图的初始高度

	this.heightMax = this.windowsHeight * 0.6
    this.heightMin = 0

4. 在柱状图的点击事件中重置两个柱状图的高度，并重新加载第一个柱状图

	that.heightMax = that.windowsHeight * 0.35
    that.heightMin = that.windowsHeight * 0.35
    totalChart.resize()

代码贴上：

<template>
  <div class="app-container">
    <el-card class="box-card item">
      <div class="text">
        <el-form :inline="true">
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="生产层级">
                <el-cascader v-model="selectParam.macPositionSysNoList" :options="macPositionList" @change="getMacListByMacPosition" :props="defaultPropsType" style="width:200%" filterable>
                  <template slot-scope="{ node, data }">
                    <span>
                      <i v-if="data.type == 0" style="color: #348fe2" class="el-icon-place" />
                      <i v-if="data.type == 1" style="color: #348fe2" class="el-icon-menu" />
                      <i v-else-if="data.type == 2" style="color: #348fe2" class="el-icon-s-unfold" />
                      <i v-else-if="data.type == 3" style="color: #348fe2" class="el-icon-s-platform" />
                    </span>
                    <span>{{ data.macPositionName }}</span>
                  </template>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="设备">
                <el-select v-model="selectParam.macSysNoList" multiple clearable placeholder="请选择设备">
                  <el-option v-for="item in macList" :key="item.macSysNo" :label="item.macName" :value="item.macSysNo">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="班次">
                <el-select v-model="selectParam.shiftSysNo" clearable placeholder="请选择查询班次">
                  <el-option v-for="item in shiftList" :key="item.shiftSysNo" :label="item.shiftName" :value="item.shiftSysNo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="查询方案">
                <el-select v-model="selectParam.scheme" placeholder="请选择查询方案">
                  <el-option v-for="item in schemeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <div v-if="selectParam.scheme==1">
                  <el-date-picker v-model="selectParam.queryTimeList" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <div v-if="selectParam.scheme==2">
                  <el-date-picker v-model="selectParam.queryTimeList" type="monthrange" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份">
                  </el-date-picker>
                </div>
                <div v-if="selectParam.scheme==3">
                  <el-date-picker v-model="selectParam.queryTimeList" type="year" placeholder="选择年">
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item style="text-align:right">
                <el-button icon="el-icon-search" size="mini" @click="getOutputInfo()">搜索</el-button>
              </el-form-item>
            </el-col>

          </el-col>
        </el-form>
      </div>
    </el-card>

    <!-- 柱状图部分 -->
    <div>
      <el-col :span="24">
        <el-col :span="16">
          <el-col :span="24">
            <div ref="totalChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;margin-top:40px;width:100%;height:'+this.heightMax+'px'"></div>
          </el-col>

          <el-col :span="24">
            <div ref="singleChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;width:100%;height:'+this.heightMin+'px'"></div>
          </el-col>

        </el-col>
        <el-col :span="8">
          <div ref="percentChart" style="margin-top:160px;height:400px"></div>
        </el-col>
      </el-col>
    </div>

  </div>
</template>

<script>
import { parseTime, removeNull } from '@/utils'
import macOutPut from '@/api/reportManage/macOutPut.js'

export default {
  data() {
    return {
      // 屏幕高度
      windowsHeight: document.documentElement.clientHeight,
      windowsWidth: document.documentElement.clientWidth,
      heightMax: 0,
      heightMin: 0,
      shiftList: [],
      macList: [],
      macPositionList: [],
      schemeList: [
        {
          name: '按日查询',
          value: 1,
        },
        {
          name: '按月查询',
          value: 2,
        },
        {
          name: '按年查询',
          value: 3,
        },
      ],
      selectParam: {
        macPositionSysNo: '',
        queryTimeList: [],
        scheme: 1,
        macSysNoList: '',
        shiftSysNo: '',
        macPositionSysNoList: [],
        macName: '',
      },
      defaultPropsType: {
        children: 'children',
        label: 'macPositionName',
        id: 'macPositionSysNo',
        value: 'macPositionSysNo',
        topList: [],
      },
      // 设置时间跨度是一周
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      macPositionSysNoList: [
        {
          label: '产线01',
          value: 1,
        },
        {
          label: '产线02',
          value: 2,
        },
        {
          label: '产线03',
          value: 3,
        },
      ],
      totalXList: [],
      totalDataList: [],
      persentList: [],
      singleXList: [],
      singleDataList: [],
      macName: '',
    }
  },
  methods: {
    // 查询设备产量
    getOutputInfo() {
      this.totalXList = []
      this.totalDataList = []
      this.persentList = []
      this.singleXList = []
      this.singleDataList = []
      if (this.selectParam.macPositionSysNo == '') {
        this.$message({
          type: 'danger',
          message: '请选择设备层级!',
        })
        return
      }
      if (this.selectParam.queryTimeList == ''||this.selectParam.queryTimeList==null) {
        this.$message({
          type: 'danger',
          message: '请选择查询时间!',
        })
        return
      }
      if (this.selectParam.scheme == 3) {
        var arr = new Array()
        arr.push(this.selectParam.queryTimeList)
        this.selectParam.queryTimeList = arr
      }

      this.heightMax = this.windowsHeight * 0.6
      this.heightMin = 0

      macOutPut.GetMacOutPut(this.selectParam).then((val) => {
        if (val.status == 0) {
          this.totalXList = val.data.totalXList
          this.totalDataList = val.data.totalDataList
          this.persentList = val.data.persentList

          this.initCharts()
        }
      })
    },
    initCharts() {
      var that = this // 重新赋值  因为echart会改变this指向
      const totalChart = this.$echarts.init(this.$refs.totalChart) // 绘制图表
      const percentChart = this.$echarts.init(this.$refs.percentChart)
      const singleChart = that.$echarts.init(that.$refs.singleChart)
      singleChart.clear()
      percentChart.clear()
      totalChart.clear()
      // -----------------------------设备总产量图----------------------------------------------
      var totalOption = {
        title: {
          text: '总产量(件)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params, ticket, callback) {
            const obj = params.map((item, index) => {
              const dotColor =
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                item.color +
                '"></span>'
              if (item.seriesName == '设备总产数量') {
                return ''
              } else {
                return (
                  item.axisValue +
                  '</br>' +
                  dotColor +
                  item.seriesName +
                  ': ' +
                  item.value +
                  '件' +
                  '</br>'
                )
              }
            })
            return obj.join('') // 去除','
          },
        },

        xAxis: {
          type: 'category',
          data: this.totalXList,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '总产量',
            data: this.totalDataList,
            type: 'bar',
            stack: '1',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)',
            },
          },
          {
            name: '设备总产数量',
            type: 'bar',
            stack: '1',
            label: {
              normal: {
                show: true,
                position: 'insideBottom',
                // formatter: "{c}",
                formatter: function (val) {
                  if (val.value !== 0) {
                    return val.value
                  } else {
                    return ''
                  }
                },
                textStyle: { color: '#000' },
              },
            },
            itemStyle: {
              normal: {
                color: 'rgba(128, 128, 128, 0)',
              },
            },
            data: this.totalDataList, // [862, 1018, 964, 1026, 1679, 1600, 1570]
          },
        ],
      }
      totalChart.setOption(totalOption, true)
      totalChart.resize()

      // -----------------------------设备产量饼图----------------------------------------------
      var data = this.persentList

      var percentOption = {
        title: [
          {
            text: '产量占比',
          },
        ],
        series: [
          {
            type: 'pie',
            data: data,
            animation: false,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5,
            },
          },
        ],
      }
      percentChart.setOption(percentOption, true)
      percentChart.resize()

      totalChart.on('click', function (params) {
        that.heightMax = that.windowsHeight * 0.35
        that.heightMin = that.windowsHeight * 0.35

        that.macName = params.name
        that.selectParam.macName = params.name
        macOutPut.GetOutPutByMac(that.selectParam).then((val) => {
          if (val.status == 0) {
            totalChart.resize()

            this.singleXList = val.data.singleXList
            this.singleDataList = val.data.singleDataList

            // -----------------------------设备产量图----------------------------------------------
            var singleOption = {
              title: {
                text:
                  that.macName == ''
                    ? '设备产量(件)'
                    : '设备产量(件)——[' + that.macName + ']',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow',
                },
                formatter: function (params, ticket, callback) {
                  const obj = params.map((item, index) => {
                    const dotColor =
                      '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                      item.color +
                      '"></span>'
                    if (item.seriesName == '设备日产数量') {
                      return ''
                    } else {
                      return (
                        item.axisValue +
                        '</br>' +
                        dotColor +
                        item.seriesName +
                        ': ' +
                        item.value +
                        '件' +
                        '</br>'
                      )
                    }
                  })
                  return obj.join('') // 去除','
                },
              },
              xAxis: {
                type: 'category',
                data: this.singleXList,
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  name: '设备日产量',
                  data: this.singleDataList,
                  type: 'bar',
                  stack: '1',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)',
                  },
                },
                {
                  name: '设备日产数量',
                  type: 'bar',
                  stack: '1',
                  label: {
                    normal: {
                      show: true,
                      position: 'insideBottom',
                      // formatter: "{c}",
                      formatter: function (val) {
                        if (val.value !== 0) {
                          return val.value
                        } else {
                          return ''
                        }
                      },
                      textStyle: { color: '#000' },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(128, 128, 128, 0)',
                    },
                  },
                  data: this.singleDataList, // [862, 1018, 964, 1026, 1679, 1600, 1570]
                },
              ],
            }
            singleChart.setOption(singleOption, true)
            singleChart.resize()
          }
        })
      })
    },

    // 获取层级下的产线树
    getMacPositionList() {
      macOutPut.GetMacType({ type: 2 }).then((val) => {
        if (val.data != null) {
          this.macPositionList = removeNull(val.data)
        }
        this.loading = false
      })
    },
    // 获取设备组下的设备
    getMacListByMacPosition() {
      this.macList = []
      this.selectParam.macSysNoList = []
      if (
        Array.isArray(this.selectParam.macPositionSysNoList) &&
        this.selectParam.macPositionSysNoList &&
        this.selectParam.macPositionSysNoList.length > 0
      ) {
        this.selectParam.macPositionSysNo = this.selectParam.macPositionSysNoList[
          this.selectParam.macPositionSysNoList.length - 1
        ]
      }
      if (this.selectParam.macPositionSysNo != '') {
        macOutPut
          .GetMacByProductLine({
            macPositionSysNo: this.selectParam.macPositionSysNo,
          })
          .then((val) => {
            if (val.data != null) {
              this.macList = removeNull(val.data)
            }
          })
      } 
    },
    // 获取班次下拉框
    getShiftList() {
      macOutPut.GetShiftList().then((val) => {
        if (val.status == 0) {
          this.shiftList = val.data
        }
      })
    },
  },
  mounted() {
    this.getMacPositionList()
    this.getShiftList()
  },
}
</script>

<style scoped></style>