echarts的series数据不确定，循环data方法

echarts的series数据不确定，循环data方法

推荐一个不错的学习资料库

描述

根据el-tree复选框选中的数量决定折线图线的数量，这样就会造成series里的数据的数量是动态的。

代码

<template>
  <div id="app">
    <div id="main" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
        seriesDatas: []
    };
  },
  props: {
    chartdata: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  mounted() {
    this.seriesData();
    this.drawChart();
  },
  methods: {
    seriesData() {
        let arr = []
        this.chartdata.forEach((item,inx) => {
            arr.push({
                type: 'line',
                name: item.name,
                data: item.dateValues.map(x => {
                    if(Number(x.value)== 0){
                        return null
                    } else {
                        return Number(x.value)
                    }
                })
            })
        })
        this.seriesDatas = arr
    },
    drawChart() {
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: "折线图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.chartdata.map((i) => {
            return i.name;
          }),
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            bottom: -5,
            start: 10,
            end: 90,
          },
        ],
        grid: {
          left: "1%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#333",
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e3e3e3",
                width: "1",
              },
            },
            data: this.chartdata[0].dateValues.map((i) => i.date),
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
                width: 1,
              },
              show: true,
            },

            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: this.seriesDatas,
      };
    //   console.log(option)
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  height: 100%;
}
</style>

解析

把series里的数据提出来，它的格式就是数组对象格式

在mounted里调用函数，处理数据