echarts显示不确定项的图表

问题描述

提示：这里描述具体问题：在实际应用之中有时候不确定后端返回的数据需要显示在几个图表中，从数据中解析需要显示几张图表，每一次显示的数目都不一样。

<div
    class="test bg-grey-3 fixed-center"
    id="window"
    style="
      z-index: 1;
      display: none;
      overflow: auto;
  ">
    <q-btn
      flat
      round
      @click="close"
    />
    <div class="content">
      <!-- v-for 遍历父级div List里面是要遍历的图表-->
      <div class="main" v-for="(item,index) in List" :key="index">
        <!--自定义宽高的dom，用于放置图表-->
        <div class="bar" :id="item"></div>
      </div>
    </div>
  </div>

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.main {
  width: 350px;
  margin: 30px 0;
  height: 200px;
  margin-left: 70px;
  background-color: #FFFFFF;
}

.main .bar {
  width: 100%;
  height: 100%;
}

初始化图表，通过另一个按钮调用。

function Window (id) {
		const test = id.split('-')
        document.getElementById('window').style.display = 'grid'
        const myEchart = document.getElementsByClassName('bar') // 获取类名
        for (let i = 0; i < myEchart.length; i++) {
          const myChart = echarts.init(myEchart[i]) // 初始化echarts实例要在for循环内
          const option = {
            title: {
              text: test[0] + i,
              textStyle: {
                color: '#036',
                fontSize: 10
              },
              left: 'center',
              padding: [20, 0, 5, 0]
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: true,
              bottom: '10%',
              top: '6%',
              selectedMode: 'multiple',
              type: 'scroll',
              orient: 'horizontal',
              padding: [20, 10, 0, 35]
            },
            dataZoom: [{
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              left: '5%',
              right: '8%',
              bottom: -5,
              start: 0,
              end: 100
            }],
            xAxis: [{
              name: '',
              data: []
            }],
            yAxis: [{
              name: '',
              type: 'value'
            }],
            axisLabel: {
              show: true,
              formatter: function (value) {
                return getYAxis(value)
              }
            }
          }
          myChart.setOption(option)
    }

显示数据

    function showChart (header, data) {
      for (const el in header) {
        const IdList = header[el].split('.')
        const id = IdList[0]
        const name = header[el]
        let chart
        chart = echarts.getInstanceByDom(document.getElementById(id))
        if (chart == null) {
          chart = echarts.init(document.getElementById(id))
        }
        const currSeries = chart.getOption().series
        let ind = 0
        for (; ind < currSeries.length; ind++) {
          if (currSeries[ind].name === name) {
            break
          }
        }
        let yData = []
        const xAxis = chart.getOption().xAxis[0].data
        if (currSeries[ind] !== undefined) {
          yData = currSeries[ind].data
        } else {
          currSeries.push({
            type: 'line',
            name: name,
            symboleSize: 5,
            barGap: 0,
            data: []
          })
        }
        for (const i in data[el]) {
          yData.push(data[el][i])
        }
        while (yData.length > xAxis.length) {
          xAxis.push(xAxis.length + 1)
        }
        currSeries[ind].data = yData
        const option = chart.getOption()
        option.xAxis[0].data = xAxis
        option.series = currSeries
        chart.setOption(option, true)
      }
    }

---

欢迎评论：

提示：欢迎大家在评论区讨论相关问题。
可以关注博主，我会持续更新工作中遇到的技术小砖头，供大家使用。
也可以在评论区告知好的小砖头或技术，我会收录。
还可以指出本博文错误，希望大家不吝赐教。