接口返回数据:
[{"TypeName":"费用1","x_data":[0,0,0,0,0.0100,0,0],"total":0.0100},{"TypeName":"费用2","x_data":[0,0,0,0,0,0,0],"total":0},{"TypeName":"费用3","x_data":[0,0,0,0,0,0,0],"total":0},{"y_time":["2021-07-02","2021-07-03","2021-07-04","2021-07-05","2021-07-06","2021-07-07","2021-07-08"]}]
页面效果:
子组件mutiLine :
<template>
<div class="hello">
<div id="myCharts" style="width:50.1%;height: 340px;float: left;margin: 0.5rem 0.5rem 0 0;"></div>
<div id="mytwoCharts" style="width:49%;height: 340px;float: left;margin: 0.5rem 0.2rem 0 0;"></div>
<div id="BINCharts" style="width:48.9%;height: 320px;float: right;margin-top: 2rem;"></div>
<div id="mythreeCharts" style="width:50.2%;height: 340px;float: left;margin-top: 0.5rem;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'mutiLine',
data(){
return {
series: [],
legnData: [],
bin_series:[],
interval: [],//为了进行分割x轴
}
},
props:{
lineData:Array,
lineTime:Array,
},
//折线数据通过变量传递
watch: {
lineData: {
deep: true,
handler(val) {
if (val) {
setTimeout(this.initEcharts(), 100);
setTimeout(this.inittwoEcharts(), 100);
setTimeout(this.initthreeEcharts(), 100);
setTimeout(this.BINinitEcharts(), 100);
}
}
},
},
mounted () {
this.getZheData();
this.initEcharts();
this.inittwoEcharts();
this.initthreeEcharts();
this.BINinitEcharts();
},
methods: {
//循环存储数据
getZheData(){
for(let i = 0;i < this.lineData.length;i++){
this.interval.push(this.lineData[i].x_data)
this.legnData.push(this.lineData[i].TypeName)
this.bin_series.push({
value:this.lineData[i].total,
name:this.lineData[i].TypeName,
})
this.series.push({
name: this.lineData[i].TypeName,
data: this.lineData[i].x_data,
type: 'line',
smooth: true,
itemStyle: {
//则线图每个点的样式
borderWidth: 10,
},
})
}
},
//折线图1
initEcharts: function () {
const Charts = document.getElementById('myCharts');//getDom
const myCharts = echarts.init(Charts);// add
let series = [];
let legnData = [