vue v-charts 封装可动态接收多条折线图的图表

功能:不清楚后端传过来的数据有多少组,动态接收不确定条数的折线图,展示的也可以是柱状图 

图表组件:scoreLine.vue

<template>
  <v-chart :options="option" :autoresize="true" theme="light"/>
</template>
<script>
// 封装能动态接收摄像头评分的图表
export default {
  props: {
    title: {
      // 图表标题
      type: String
    },
    color: {
      // 传给图例和图表的颜色
      type: Array
    },
    seriesNames: {
      // 图例或和统计图的名称，
      type: Array
    },
    xAxis: {
      // 图表的x轴数据,
      type: Array
    },
    seriesArr: {
     // 图表的整个series数据
      type: Array
    }
  },
  data () {
    return {
      option: {
        color: this.color,
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.seriesNames
        },
        grid: {
          top: '35%',
          left: '2%',
          right: '4%',
        },
        xAxis: {
          type: 'category',
          data: this.xAxis,
          boundaryGap: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '分',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(255,255,255,.8)'
              }
            }
          },
        ],
        series: this.seriesArr // 重要的数据,获取正确的格式即可
      }
    }
  },
  watch: { // 监听
    title: {
      handler (value) {
        this.option.title.text = value
      }
    },
    seriesNames: {
      deep: true,
      handler (val) {
        this.option.legend.data = val
      }
    },
    xAxis: {
      deep: true,
      handler (value) {
        this.option.xAxis.data = value
      }
    },
    seriesArr: {  // 监听 将获取的值赋给series
      deep: true,
      handler (value) {
        // console.log('监听是否得到数据', value) // 可正常打印
        this.option.series = value
        console.log('series值:', this.option.series)
      }
    },
  },
}
</script>

<style lang="less" >
</style>

传入图表的数据的组件,即父组件

<template>
  <div class="center-chart charts-border">
    <!-- 评分表 -->
    <score-lines
      :title="this.infoTitle"
      :color="colorArr1"
      :seriesNames="seriesNames1"
      :xAxis="this.xAxis1"
      :seriesArr="seriesArr"
      class="center-info-chart"
    />
  </div>
</template>

<script>
import ScoreLines from '@/components/context/ScoreLines'
import
{
  reqCameraScore,
  reqCameraChannel
} from '@/api'

export default {
  components: {
    ScoreLines
  },
  data () {
    return {
      // 评分表
      colorArr1: ['#319aff', '#ff5c1e', '##fccb00', '#FF0087', '#1bd175'],
      seriesNames1: [],
      cameraScoreArr: [],
      xAxis1: [],
      seriesArr: []
    }
  },
  watch: {
  },
  mounted () {
  }
  destroyed () {
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    resizeChart () {
      // 头部 64，按钮组 64 信息统计占96，上下留8px间隔
      const height = (window.innerHeight - 128 - 104) / 2
      const chartArr = document.getElementsByClassName('center-info-chart')
      chartArr[0].style.height = height + 'px'
      chartArr[1].style.height = height + 'px'
    },
    async getData (span) {
      // 获取该场景下的摄像头id
      const id = await reqCameraChannel({ category_code: this.category_code }) // 接口参数
      const checkoutId = id.category_map_channels.checkout
      console.log('有几号:', checkoutId) // ['2','20']
      const title = []
      for (let i = 0; i < checkoutId.length; i++) {
        cameraTitle.push(checkoutId[i] + "号摄像头")
      }
      // console.log('名称', title)
      this.seriesNames1 = title
      // console.log('名称', this.seriesNames1) // 正确打印所有名称
      const scoreData = []
      for (let i = 0; i < checkoutId.length; i++) {
        scoreData[i] = await reqCameraScore({ span, channel_id: checkoutId[i] })
      }
      // console.log('该场景下的数组们:', scoreData) // 正常
      this.xAxis1 = getxAxisArr(scoreData[1], isToday)
      // console.log('x轴:', this.xAxis1) // 正常
      const dataArr = []
      for (let i = 0; i < scoreData.length; i++) {
      // 取出scoreData中每一个对象属性的评分值组成一个新的数组
        dataArr.push(Object.values(scoreData[i]))         
      }
      // console.log('series 的 data 数组:', dataArr)
      // 处理数据 乘以100并保留一位小数
      for (let i = 0; i < dataArr.length; i++) {
        for (let j = 0; j < dataArr[i].length; j++) {
          dataArr[i][j] = (dataArr[i][j] * 100).toFixed(1)
        }
      }
      // console.log('series 的 data 数组:', dataArr)
      // this.seriesArr = dataArr
      const allDataArr = []
      // 将数据转化为[{},{}]形式
        for (let i = 0; i < scoreData.length; i++) {
        allDataArr.push({ type: 'line', smooth: true, label: { show: false }, stack: 'Total', name: title[i], data: dataArr[i] })
      }
        this.seriesArr = allDataArr
        // console.log('series评分数组打印:', this.seriesArr)
    }
  }
}
</script>

<style lang="less">

</style>