学废了吗_数据结构多重嵌套的echarts图表

 

<template>

  <div class="container">

    <div class="background_fff padding_10" style="width: 500px; height: 300px">

      <div id="Echarts" class="padding_10" style="width:100%;height:280px"></div>

    </div>

  </div>

</template>

<script>

const echarts = require('echarts')

export default {

  name: 'EchartsDome',

  data () {

    return {

      echartsData: {

        series: [

          '中国地区部',

          'ICT',

          '运营商BG',

          '公司总部'

        ],

        data: [

          {

            series: ['2021-07', '2021-08', '2021-09', '截止当前'],

            data: ['10.97', '31.95', '28.11', '30.97']

          },

          {

            series: ['2021-07', '2021-08', '2021-09', '截止当前'],

            data: ['5.97', '6.95', '7.11', '8.97']

          },

          {

            series: ['2021-07', '2021-08', '2021-09', '截止当前'],

            data: ['52.97', '10.95', '50.11', '20.97']

          },

          {

            series: ['2021-07', '2021-08', '2021-09', '截止当前'],

            data: ['12.97', '32.95', '25.11', '71.97']

          }

        ]

      }

    }

  },

  mounted () {

    this.dealData()

  },

  methods: {

    dealData () {

      var Echarts = echarts.init(document.getElementById('Echarts'))

      var legendArr = this.echartsData.data.length > 0 ? this.echartsData.data[0].series : []

      var seriesArr = []

      this.echartsData.data.forEach((item, index) => {

        seriesArr.push(this.onInsertEcharts(legendArr[index], item.data))

      })

      // console.log(22,seriesArr)

      var option = {

        title: {

          text: '测试'

        },

        tooltip: {

          trigger: 'axis'

        },

        legend: {

          data: legendArr

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        toolbox: {

          feature: {

            saveAsImage: {}

          }

        },

        xAxis: {

          type: 'category',

          boundaryGap: false,

          data: this.echartsData.series

        },

        yAxis: {

          type: 'value'

        },

        series: seriesArr

      }

      Echarts.clear()

      Echarts.setOption(option, true)

    },

    // 填充折线

    onInsertEcharts (title, list) {

      return {

        name: title,

        type: 'line',

        smooth: true,

        // stack: 'Total',

        data: list

      }

    }

  }

}

</script>

<style lang="scss" scoped>

</style>