Echarts堆叠条形图前后端数据交互

先上个图：

一、页面代码

<template>
  <div class="app-container">
    <el-card class="box-card item">
      <div slot="header" class="clearfix" @click="showCondition = !showCondition">
        <span>
          <i class="el-icon-search"></i>筛选条件
        </span>
        <el-button style="float: right; padding: 3px 0" type="text">
          <i class="el-icon-arrow-up" v-bind:class="showCondition ? 'active' : ''"></i>
        </el-button>
      </div>
      <el-collapse-transition>
        <div class="text" v-show="showCondition">
          <el-form :inline="true">
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="生产层级">
                  <el-cascader size="mini" v-model="selectParam.macPositionSysNoList" :options="macPositionList" @change="getMacListByMacPosition" :props="defaultPropsType" style="width:100%"
                    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 size="mini" v-model="selectParam.macId" clearable placeholder="请选择设备">
                    <el-option v-for="item in macList" :key="item.macId" :label="item.macName" :value="item.macId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="查询方案">
                  <el-select v-model="selectParam.scheme" placeholder="请选择" size="mini" style="width:30%">
                    <el-option :key="1" :value="1" label="日"></el-option>
                    <el-option :key="2" :value="2" label="月"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="查询时间">
                  <div v-if="selectParam.scheme==1">
                    <el-date-picker size="mini" v-model="selectParam.queryTimeList" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
                  <div v-else>
                    <el-date-picker size="mini" v-model="selectParam.queryTimeList" type="monthrange" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>

              <el-col v-show="selectParam.scheme==1" :span="5">
                <el-form-item label="班次">
                  <el-select size="mini" v-model="selectParam.shiftType" placeholder="请选择查询班次">
                    <el-option v-for="item in shiftList" :key="item.shiftType" :label="item.shiftName" :value="item.shiftType"></el-option>
                  </el-select>
                </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="getMacTimeInfo()">搜索</el-button>
                </el-form-item>
              </el-col>

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

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

        <el-col :span="24">

          <div v-show="showDetails" :style="'margin-left:'+this.windowsWidth*0.02+'px;margin-top:40px;width:80%;height:300px'">
            <div slot="header">
              <span style="font-size: 18px;font-weight:800;">设备用时详细信息</span>
            </div>
            <el-table :data="timeTable" style="margin-top:30px;width: 100%" border>
              <el-table-column align="center" fixed="left" prop="macStatus" label="设备状态" width="80px"></el-table-column>
              <el-table-column align="center" v-for="col in cols" width="150px" :key="col.value" :prop="col.prop" :label="col.label">
              </el-table-column>
            </el-table>
          </div>
        </el-col>

      </el-col>
      <el-col :span="12">

        <el-col v-show="showSingle" :span="24">
          <div ref="singleChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;margin-top:40px;width:80%;height:300px'"></div>

        </el-col>
        <el-col :span="24">
          <div ref="percentChart" :style="'margin-left:'+this.windowsWidth*0.02+'px;margin-top:40px;width:80%;height:300px'"></div>
        </el-col>
      </el-col>

    </div>

  </div>
</template>

<script>
import { parseTime, removeNull } from '@/utils'
import macTime from '@/api/reportManage/macTimeAnalyze.js'
import { max } from 'moment'

export default {
  data() {
    return {
      showSingle: false,
      showDetails: false,
      cols: [],
      timeTable: [],
      showCondition: true, // 手风琴
      // 屏幕高度
      windowsHeight: document.documentElement.clientHeight,
      windowsWidth: document.documentElement.clientWidth,
      heightMax: 0,
      heightMin: 0,
      shiftList: [
        {
          shiftType: 0,
          shiftName: '整天'
        }
      ],
      macList: [],
      macPositionList: [],
      schemeList: [
        {
          name: '按日查询',
          value: 1
        },
        {
          name: '按月查询',
          value: 2
        },
        {
          name: '按年查询',
          value: 3
        }
      ],
      selectParam: {
        macPositionSysNo: '',
        queryTimeList: [],
        macId: '',
        shiftType: 0,
        macPositionSysNoList: [],
        macName: '',
        queryDay: '',
        scheme: 1
      },
      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: [],
      totalLegend: [],
      totalSeries: [],
      totalColorList: [],
      persentXList: [],
      persentDataList: [],
      singleXList: [],
      singleDataList: [],
      singleColorList: [],
      singleSeries: [],
      macName: ''
    }
  },

  methods: {
    // 查询设备产量
    getMacTimeInfo() {
      this.showSingle = false
      this.totalXList = []
      this.totalDataList = []
      this.persentList = []
      this.singleXList = []
      this.singleDataList = []
      this.totalSeries = []
      this.singleSeries = []
      if (this.selectParam.macId == '') {
        this.$message({
          type: 'danger',
          message: '请选择设备!'
        })
        return
      }
      if (
        this.selectParam.queryTimeList == '' ||
        this.selectParam.queryTimeList == null
      ) {
        this.$message({
          type: 'danger',
          message: '请选择查询时间!'
        })
        return
      }

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

      macTime.GetMacTimeAnalyze(this.selectParam).then((val) => {
        if (val.status == 0) {
          this.totalLegend = val.data.vueTotal.legendList
          this.totalXList = val.data.vueTotal.totalXList
          this.totalColorList = val.data.vueTotal.colorListnpm
          this.persentXList = val.data.percentXList
          this.persentDataList = val.data.percentDataList
          this.cols = val.data.vueTotal.columns
          this.timeTable = val.data.vueTotal.tableData

          var oo = []
          for (var q = 0; q < val.data.vueTotal.legendList.length; q++) {
            var o = {
              name: val.data.vueTotal.legendList[q],
              type: 'bar',
              stack: '1',
              data: val.data.vueTotal.totalDataList[q],
              color: val.data.vueTotal.colorList[q]
            }
            oo.push(o)
          }

          if (oo.length > 0) {
            oo.forEach((el) => {
              this.totalSeries.push(el)
            })
          }

          this.initCharts()
          this.showDetails = true
        }
      })
    },
    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' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.totalLegend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.totalXList
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: 100
          }
        ],
        series: this.totalSeries
      }

      totalChart.setOption(totalOption, true)
      totalChart.resize()

      // -----------------------------设备利用率分析图----------------------------------------------
      var percentOption = {
        title: {
          text: '利用率(%)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.persentXList
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          {
            data: this.persentDataList,
            type: 'line'
          }
        ]
      }
      percentChart.setOption(percentOption, true)
      percentChart.resize()

      totalChart.on('click', function(params) {
        if (that.selectParam.shiftType != 0 && that.selectParam.scheme == 1) {
          that.showSingle = false
          return
        }
        that.heightMax = that.windowsHeight * 0.35
        that.heightMin = that.windowsHeight * 0.35
        that.showSingle = true

        percentChart.resize()
        that.selectParam.queryDay = params.name
        macTime.GetMacTimeDayAnalyze(that.selectParam).then((val) => {
          if (that.selectParam.shiftType == 0 || that.selectParam.scheme == 2) {
            if (val.status == 0) {
              if (val.data.vueSingle == null) {
                that.singleLegend = []
                that.singleXList = []
                that.singleColorList = []
                that.singleSeries = []
              } else {
                that.singleLegend = val.data.vueSingle.legendList
                that.singleXList = val.data.vueSingle.singleXList
                that.singleColorList = val.data.vueSingle.colorList

                var oo = []
                for (var q = 0; q < val.data.vueSingle.legendList.length; q++) {
                  var o = {
                    name: val.data.vueSingle.legendList[q],
                    type: 'bar',
                    stack: '1',
                    data: val.data.vueSingle.singleDataList[q],
                    color: val.data.vueSingle.colorList[q]
                  }
                  oo.push(o)
                }

                that.singleSeries = []
                if (oo.length > 0) {
                  oo.forEach((el) => {
                    that.singleSeries.push(el)
                  })
                }
              }
              var singleOption = {
                title: {
                  text: '班次用时(%)'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  data: that.singleLegend
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    data: that.singleXList
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    max: 100
                  }
                ],
                series: that.singleSeries
              }
              singleChart.setOption(singleOption, true)
              singleChart.resize()
            }
          }
        })

        // -----------------------------设备班次用时分析图----------------------------------------------
      })
    },

    // 获取层级下的产线树
    getMacPositionList() {
      macTime.GetMacType().then((val) => {
        if (val.data != null) {
          this.macPositionList = removeNull(val.data)
        }
        this.loading = false
      })
    },
    // 获取设备组下的设备
    getMacListByMacPosition() {
      this.macList = []
      this.selectParam.macId = ''
      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 != '') {
        macTime
          .GetStations({
            macPositionSysNo: this.selectParam.macPositionSysNo
          })
          .then((val) => {
            if (val.data != null) {
              this.macList = removeNull(val.data)
            }
          })
      }
    },
    // 获取班次下拉框
    getShiftList() {
      macTime.GetShiftList().then((val) => {
        if (val.status == 0) {
          Array.prototype.push.apply(this.shiftList, val.data)
        }
      })
    }
  },
  created() {},
  mounted() {
    this.getMacPositionList()
    this.getShiftList()
  }
}
</script>

<style scoped></style>

二、后台对象

1. 创建图标对应的对象

using System.Collections.Generic;

namespace ZgWeb.Models.ReportManage
{

    /// <summary>
    /// 设备用时分析页面对象
    /// </summary>
    public class VueMacTimeAnalyze
    {

        /// <summary>
        /// 设备日用时对象
        /// </summary>
        public VueTotal VueTotal { get; set; }

        /// <summary>
        /// 设备班次用时对象
        /// </summary>
        public VueSingle VueSingle { get; set; }

        /// <summary>
        /// 设备产量表x轴(设备当天班次集合)
        /// </summary>
        public List<string> PercentXList { get; set; }

        /// <summary>
        /// 设备利用率
        /// </summary>
        public List<decimal> PercentDataList { get; set; }

    }

    /// <summary>
    /// 表头对象
    /// </summary>
    public class ModelColumn
    {
        public string Label { get; set; }
        public string Prop { get; set; }
        public string Type { get; set; }
    }

    /// <summary>
    /// 设备日用时对象
    /// </summary>
    public class VueTotal
    {

        /// <summary>
        /// 图标集合
        /// </summary>
        public List<string> LegendList { get; set; }
        public List<string> ColorList { get; set; }

        /// <summary>
        /// 总用时表x轴(天数集合)
        /// </summary>
        public List<string> TotalXList { get; set; }

        /// <summary>
        /// 表头对象
        /// </summary>
        public List<ModelColumn> Columns { get; set; }

        /// <summary>
        /// 表数据
        /// </summary>
        public List<Dictionary<string, string>> TableData { get; set; }

        /// <summary>
        /// 总产量表数据(设备状态时长百分比)
        /// </summary>
        public List<List<double>> TotalDataList { get; set; }
    }

     /// <summary>
    /// 设备班次时对象
    /// </summary>
    public class VueSingle
    {

        /// <summary>
        /// 图标集合
        /// </summary>
        public List<string> LegendList { get; set; }
        public List<string> ColorList { get; set; }

        /// <summary>
        /// 设备班次用时表x轴(班次名称集合)
        /// </summary>
        public List<string> SingleXList { get; set; }

        /// <summary>
        /// 总产量表数据(设备状态时长百分比)
        /// </summary>
        public List<List<double>> SingleDataList { get; set; }
       
    }

    /// <summary>
    /// 设备用时分析查询参数
    /// </summary>
    public class VueMacTimeAnalyzeQuery
    {
        /// <summary>
        /// 设备组编号
        /// </summary>
        public string MacPositionSysNo { get; set; }

        /// <summary>
        /// 查询时间
        /// </summary>
        public List<string> QueryTimeList { get; set; }

        /// <summary>
        /// 设备编号
        /// </summary>
        public string MacSysNo { get; set; }
        public int MacId { get; set; }

        /// <summary>
        /// 班次编号
        /// </summary>
        public int ShiftType { get; set; }
        public string QueryDay { get; set; }
        public int Scheme { get; set; }

    }
}