vue项目中设置Echarts图表的大小
1 Echarts图表大小设置1.1 在 html中直接定义容器大小通常来讲,我们在定义图标所处的容器的时候,通常会给容器设置一个默认的大小,如下:<div class="echart" id="mychart" style="width: 100%; height: 400px"></div><script type="text/javascript">con
·
1 Echarts图表大小设置
1.1 在 html中直接定义容器大小
通常来讲,我们在定义图标所处的容器的时候,通常会给容器设置一个默认的大小,如下:
<div class="echart" id="mychart" style="width: 100%; height: 400px"></div>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById("mychart"));
</script>
这种情况下,图表的大小将和容器的大小保持一致。
1.2 指定图表大小
如果需要在图表初始化的时候动态改变图表大小,则可以使用以下方式:
<div class="echart" id="mychart"></div>
<script type="text/javascript">
const setEchartWH = { //设置控制图表大小变量
width: 600,
height: 400
};
const myChart = echarts.init(
document.getElementById("mychart"),
null,
setEchartWH
);
</script>
echarts.init
方法支持初始化时定义图表大小,默认第三个参数,我们通过该参数可传入变量控制图表大小。当我们不设置这个参数的的时候,图表大小默认和容器大小保持一致。第二个参数为主题,使用第三个参数时需设置为null。
1.3 监听容器大小并改变图表大小
在某些情况下,我们的图表需要随着容器的变化进行变化,这个时候我们需要监听容器大小的变化重置图表的大小;改变图表的大小使用API:[echartsInstance.resize
];代码 如下:
<div class="echart" id="mychart" style="width: 100%; height: 400px"></div>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById("mychart"));
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
这个时候若屏幕大小变化导致容器大小变化,我们的图表会自适应屏幕大小。
更多推荐
已为社区贡献7条内容
所有评论(0)