<el-tab-pane v-for="(statret, index) in STATFIGURELIST" :key="index" v-bind:label="statret.name" v-bind:name="statret.name">
    <div v-if="statret.data.whichshow == 'single'">
       <!--     单点图    -->
       <div style="padding-right: 4%; padding-left: 4%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex" style="width:100%; height: 400px"> <!-- 循环遍历环形图所需数据  -->
           <p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {{ item + statret.data.funcs[0] }} <!--   项目名称  -->
           </p>
           <div v-bind:id="'single' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'">
             {{ item + statret.data.funcs[0] }}
           </div>
         </div>
       </div>
     </div>
     <div v-else-if="statret.data.whichshow == 'trends'">
       <!--     趋势图    -->
       <div style="padding-right: 4%; padding-left: 4%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"
              style="width:100%; height: 400px">
           <p
             style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {{ item }}
           </p>
           <div v-bind:id="'trends' + item" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'"></div>
         </div>
       </div>
     </div>
     <div v-else-if="statret.data.whichshow == 'both'">
       <!--     单点图    -->
       <div style="float: left; width: 30%; padding-left: 1%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"  style="width:100%; height: 400px">
           <p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {{ item + statret.data.funcs[0] }}
           </p>
           <div v-bind:id="'single' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.18 + 'px'"></div>
         </div>
       </div>
       <!--     趋势图    -->
       <div style="float: right; width: 63%; padding-right: 1%; padding-left: 4%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex" style="width:100%; height: 400px">
           <p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {{ item + statret.data.funcs[0] }}
           </p>
           <div v-bind:id="'trends' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.38 + 'px'"></div>
         </div>
       </div>
     </div>
</el-tab-pane>

		  that.mycharts = []
          that.eles = []
          console.log(that.STATFIGURELIST)
          // 生成图
          // 通过判断趋势图和单点图来获取不同类型的数据
          for (let item in that.STATFIGURELIST) {
            if (that.STATFIGURELIST[item].data.whichshow == "trends") {   //  判断是否是趋势 
              // 仅处理趋势即可
              for (let subitem in that.STATFIGURELIST[item].data.items) {
                let ids = 'trends' + that.STATFIGURELIST[item].data.items[subitem] // trends项目名称 
                that.showData(
                  ids,// trends项目名称  
                  subitem,  //项目名称 
                  that.STATFIGURELIST[item].data.rets.trends.type,// 统计图的类型 
                  that.STATFIGURELIST[item].data.rets.trends.rets,//统计数据  
                  that.STATFIGURELIST[item].data.funcs,// 数据类型 
                  that.STATFIGURELIST[item].data.unit // Y轴最大值及最小值  Y轴单位  X轴单位 
                )
              }
            } else {
              // 需要区分single和trends两种处理
              for (let subitem in that.STATFIGURELIST[item].data.items) {
                let ids = that.STATFIGURELIST[item].data.items[subitem] + that.STATFIGURELIST[item].data.funcs[0]//项目名称  + 项目类型  el：尾煤投用率
                // step1. single
                if ('single' in that.STATFIGURELIST[item].data.rets) {
                  let single_ids = 'single' + ids //single + 项目类型  el：single尾煤投用率 
                  that.showData(
                    single_ids,//single + 项目类型  el：single尾煤投用率 
                    subitem,//项目名称 
                    that.STATFIGURELIST[item].data.rets.single.type,//统计图的类型
                    that.STATFIGURELIST[item].data.rets.single.rets,//统计数据 
                    that.STATFIGURELIST[item].data.funcs,//数据类型 
                    that.STATFIGURELIST[item].data.unit//  Y轴单位  X轴单位 数据名称 el:自动/人工 
                  )
                }
                // step2. trends
                if ('trends' in that.STATFIGURELIST[item].data.rets) {
                  let trends_ids = 'trends' + ids// trends + 项目名称  + 项目类型  el：trends尾煤投用率 
                  that.showData(
                    trends_ids,
                    subitem,
                    that.STATFIGURELIST[item].data.rets.trends.type,
                    that.STATFIGURELIST[item].data.rets.trends.rets,
                    that.STATFIGURELIST[item].data.funcs,
                    that.STATFIGURELIST[item].data.unit
                  )
                }
              }
            }
          }
// 处理自适应大小
//  获取所有的图表，改变屏幕大小重新加载图表 
          let listener = function() {
            for (let idx in that.mycharts) {
              let mychart = that.mycharts[idx] //获取所有的图表
              mychart.resize()//事件监听
            }
          }
          for (let indx in that.eles) {
            EleResize.on(that.eles[indx], listener)
          }

 showData(ids, subitem, charttype, data, funcs, unit){
      var ele = $("#" + ids)[0]
      var myChart = echarts.init(ele, 'westeros', { renderer: 'svg' })ele//dom 实例容器 westeros theme//主题 应用的主题  renderer: 'svg'  渲染模式 ，Canvas 更适合绘制图形元素数量较多的图表(数据量大导致)  SVG 内存占用更低 浏览器内置的缩放功能时不会模糊
      this.eles.push(ele) //将生成的图表推送到空数组中
      this.mycharts.push(myChart)
      //通过判断图表类型生成相应类型的图表
      if (charttype == "pie") {
        this.show_piechart(myChart, subitem, data, unit)
      } else if (charttype == "line"){
        this.show_linechart(myChart, subitem, data, unit)
      } else if (charttype == "bar"){
        this.show_barchart(myChart, subitem, data, funcs, unit)
      } else if (charttype == "gauge"){
        this.show_gaugechart(myChart, subitem, data, unit)
      }
    },
    //绘制图表
    //饼图
    show_piechart(myChart, subitem, data, unit) {
      let option = {
        tooltip: {  //提示框
          trigger: 'item' //触发类型  item 数据项图形触发、axis 坐标轴触发、 none 什么都不触发
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
      console.log(data)
      let chartdata = data[subitem][0] //
      option.series[0].data.push({value: chartdata[0], name: unit.z[0]})
      option.series[0].data.push({value: chartdata[1], name: unit.z[1]})
      myChart.setOption(option)
    },
    show_linechart(myChart, subitem, data, unit) {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: { //工具配置项
            restore: {show: true},//配置项还原 是否显示该工具
            saveAsImage: {//保存为图片
              show: true,
              pixelRatio: 2,//保存图片的分辨率比例
              backgroundColor: 'rgba(128, 128, 128, 0)'
            }
          }
        },
        xAxis: {
          type: 'category',//坐标轴类型：value  数值轴（连续数据）、category 类目轴（可从series.data中取到x轴数据）、 time 时间轴、log 对数轴（对数数据）
          data: [],
          axisLabel: { //坐标轴内容
            formatter: "{value} "+unit.x, //数据 + 单位
            textStyle: {  //数轴刻度字体样式
              color: "white",
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { //坐标轴分割线
            show: false
          },
          min: 'dataMin', //取最小值为最小刻度
          max: 'dataMax', //取最大值为最大刻度
          axisLabel: {
            formatter: "{value} "+unit.y,
            textStyle: {
              color: "white",
              fontSize: 14
            }
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true  //显示平滑曲线
          }
        ]
      }
      let chartdata = data[0][subitem]
      for (let ind in chartdata) {
        option.xAxis.data.push(ind - chartdata.length + 1)
        option.series[0].data.push(chartdata[ind])
      }
      myChart.setOption(option)
    },
    //柱状图
     show_barchart(myChart, subitem, data, funcs, unit) {
      let option = {
        tooltip: { //触发类型  item 数据项图形触发、axis 坐标轴触发、 none 什么都不触发
          trigger: 'axis'
        },
        toolbox: { // 工具栏 导出图片、数据视图、动态类型切换、数据区域缩放、重置
          feature: { //工具配置项 可自定义工具按钮 名称只能以my开头
            restore: {show: true},
            saveAsImage: {//保存为图片
              show: true, //是否显示该工具
              pixelRatio: 2,//保存图片分辨率的比例
              backgroundColor: 'rgba(128, 128, 128, 0)'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLabel: {
              formatter: "{value} "+unit.x,
              textStyle: {
                color: "white",
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            min: 'dataMin', //取最小值为最小刻度
            max: 'dataMax', //取最大值为最大刻度
            axisLabel: {
              formatter: "{value} "+unit.y,
              textStyle: {
                color: "white",
                fontSize: 14
              }
            },
            splitLine: {
              show: false
            },
            type: 'value'
          }
        ],
        series: []
      }
      if (data.length >= subitem) {
        for (let ind in data[0][0]) {
          option.xAxis[0].data.push(ind - data[0][0].length + 1)
        }
        for (let ind in funcs) {
          option.series.push({
            name: funcs[ind],
            type: 'bar',
            data: data[ind][subitem],
            markPoint: { //图标标注
              data: [//标注的数据数组
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            }
          })
        }
      }
      myChart.setOption(option)
    },
    //仪表盘
    show_gaugechart(myChart, subitem, data, unit) {
      let option = {
        series: [
          {
            type: 'gauge',
            max: unit.w.max,
            min: unit.w.min,
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {//仪表盘指针
              itemStyle: { //指针样式
                color: 'auto'
              }
            },
            axisTick: {//坐标轴刻度相关设置
              distance: -30,//距离图形元素的距离
              length: 8,//坐标轴刻度长度
              lineStyle: {//刻度线样式
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 40,
              fontSize: 20
            },
            detail: {//仪表盘详情，用于显示数据
              valueAnimation: true,//是否开启标签的数字动画
              formatter: '{value} ' + unit.y,'
              color: 'auto',
              fontSize: 14
            },
            data: []
          }
        ]
      }
      console.log(data)
      option.series[0].data.push({value: data[subitem][0]})
      myChart.setOption(option)
    },

数据填充

1.从后台获取相应图表所需数据，在div中循环遍历数据
2,区分趋势和单点，获取相应的数据，通过参数传递数据，
3在showData中先将获取到的图表数据推送到空数组中，判断图标类型调用相应生成图表方法
在不同方法中通过不同的参数获取相应x轴，y轴， 环形图data，仪表盘的数据，最后绘制相应数据的图表

自适应

通过循环获取所有图表，通过resize方法。屏幕大小改变重新加载图表