2、padding撑开容器高让子元素固定比例,实现高度自适应。图片的高度可以根据width自适应,padding也可以,所以做一个盒子用padding撑开高度,里面的元素width和height都是100%即可
3、echarts模板
<template>
<div id="stage">
<div id="wrap">
<div id="myChart" ref="MyEcharts"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
data: function () {
return {}
},
mounted(){
this.init()
},
methods:{
init(){
var myChart = echarts.init(document.getElementById('myChart'));
var options = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataset: {
// 提供一份数据。
source:[
{product: 'Matcha Latte', PV: 823, UV: 95.8},
{product: 'Milk Tea', PV: 235, UV: 81.4},
{product: 'Cheese Cocoa', PV: 1042, UV: 91.2},
{product: 'Walnut Brownie', PV: 988, UV: 76.9}
]
},
xAxis: [
{
type: 'category',
// data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'PV',
type: 'bar',
// barWidth: '60%',
// data:[10, 52, 200, 334, 390, 330, 220]
},
{
type:'bar',
name: 'UV',
// barWidth: '60%',
}
]
};
myChart.setOption(options);
window.onresize = function(){
myChart.resize()
}
}
}
}
</script>
<style>
#stage {
width: 100%;
height: 100%;
max-width: 768px; /*no*/
margin: 0 auto;
}
#wrap {
height: 0;
padding-bottom: 56.25%; /* 16:9 相对于宽padding*/
position: relative;
width: 100%;
border: 1px solid #3cff0b;
}
#wrap #myChart {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #1411ff;
}
</style>