Echarts图表笔记one

发布时间:2022-06-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Echarts图表笔记one脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

三种方式设置图表容器大小

one: 直接在div中设置大小 (该设置下图表的大小即为div的大小,除非声明opts.width或opts.height将其覆盖)

<div id="main" style="width:600px;height:400px"></div>

two: 初始化的时候设置大小 (应用场景:容器不存在宽高或者你希望图表的宽高大小不等于容器的宽高大小)

var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });

three: 响应式的设置容器大小 (应用场景:希望当容器大小改变时,图表的大小也相应的改变)

var myChart = echarts.init(document.getElementById('main'));
//监听页面的 window.onresize 事件获取浏览器大小改变的事件,
//然后调用 echartsInstance.resize 改变图表的大小
  window.onresize = function() {
    myChart.resize({
	  width: 600,
  	  height: 400
});

脚本宝典总结

以上是脚本宝典为你收集整理的Echarts图表笔记one全部内容,希望文章能够帮你解决Echarts图表笔记one所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: