父组件

获取数据，随后传递给子组件. 一定要加判断，因为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;

},

};