Vue-ele中echart折线图动态展示和修改

父组件

获取数据，随后传递给子组件.  一定要加判断，因为xhr获取数据是异步的，不加判断会把初始化的空对象传给组件，所以要加判断，等从接口获取到数据后再展传递数据。

使用Object.keys().length方法判断对象是否为空

data() {

    return {

      reportsList: {},

    };

  },

  created() {

    reportsGet("reports/type/1").then((res) => {

      console.log(res);

      let { meta, data } = res.data;

      if (meta.status == 200) {

        this.reportsList = data;

      } else {

        this.$message.error(meta.msg);

      }

    });

  },

折线图子组件

父组件传过来的数据用来赋值给lineList数据，方便修改，不会影响原数据

data() {

    return {

      lineList: {},

    };

  },

  props: {

    reportsList: {

      type: Object,

      default: () => {

        return {

          title: {

            text: "折线图",

          },

          tooltip: {},

          xAxis: {

            axisLabel: { interval: 0, rotate: 0, margin: 15 },

            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

          },

          yAxis: {},

          series: [

            {

              name: "销量",

              type: "line",

              data: [5, 20, 36, 10, 10, 20],

            },

          ],

        };

      },

    },

  },

  mounted() {

    var myChart = echarts.init(this.$refs.main);

把父组件的数据传递给子组件后再赋值给data中的lineList

这里要使用深浅拷贝

    this.lineList = JSON.parse(JSON.stringify(this.reportsList));

对象key的父级为空就必须要先给k的父级设置个空对象再赋值 

    this.lineList.title = {

      text: "折线图",

    };

/* 给折线图设置上下左右的距离 */

原本的数据中legend(top的父级)是有数据的，所以直接添加即可 

    this.lineList.legend.top='10%';

之所以写成以下形式，因为这种形式是添加，如果直接this.lineList.xAxis.axisLabel =xxx  就是直接覆盖了，原xAxis.axisLabel里的内容就消失了   

    this.lineList.xAxis[0].axisLabel =

      { interval: 0, rotate: 30, margin: 15 };

    this.lineList.grid = {

      top: "30%",

      width: "80%",

      height: "50%",

      left: "20%",

    };

    /* 把折线图所属区域删掉 */

    this.lineList.series.forEach(r=>{

      delete r.areaStyle;

      r.smooth=true

    })

    myChart.setOption(this.lineList);

    window.LineChart = myChart;

  },

};