template:
<Card class="card-style">
<div
class="siggle-chart"
id="histogram"
></div>
</Card>
style:
.card-style {
height: 600px;
width: 100%;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 40px;
}
.siggle-chart {
width: 1100px;
height: 520px;
margin: auto;
}
图表的位置和大小是由grid控制的
grid: {
bottom: 150,
top: 20,
right: 0,
left: 50,
height: 300
},
图例的位置是由legend控制的
legend: {
data: this.functionDailyPvUv.legendList,
top: 400,
bottom: 20,
right: 0
},
多个折线图仅显示一个图,默认显示某一个
legend: {
data: this.functionDailyPvUv.legendList,
top: 400,
bottom: 20,
right: 0
selectedMode: 'single',
selected: {
'PV': true,
'UV': false
}
},
|