首页 > 其他分享 >echarts 图表容器及大小

echarts 图表容器及大小

时间:2022-08-19 09:04:09浏览次数:99  
标签:容器 节点 图表 init 大小 echarts

图表容器及大小

快速上手中,我们介绍了初始化 ECharts 的接口 echarts.initAPI 文档中详细介绍了参数的具体含义,建议理解后再阅读本文。

下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。

初始化

在 HTML 中定义有宽度和高度的父容器(推荐)

通常来说,需要在 HTML 中先定义一个 <div> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 opts.widthopts.height 将其覆盖。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

需要注意的是,使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。

指定图表的大小

如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

响应容器大小的变化

监听图表容器的大小并改变图表大小

在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。

比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。

这种情况下,可以监听页面的 window.onresize 事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };
</script>

为图表设置特定的大小

除了直接调用 resize() 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。

myChart.resize({
  width: 800,
  height: 400
});

小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。

容器节点被销毁以及被重建时

假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。

本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。

正确的做法是,在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例在图表容器重新被添加后再次调用 echarts.init 初始化。

小贴士:在容器节点被销毁时,总是应调用 echartsInstance.dispose 以销毁实例释放资源,避免内存泄漏。

本文转自 https://echarts.apache.org/handbook/zh/concepts/chart-size/,如有侵权,请联系删除。

标签:容器,节点,图表,init,大小,echarts
From: https://www.cnblogs.com/zhuoss/p/16600788.html

相关文章

  • 学习:python pyecharts数据可视化
    pyecharts数据可视化pyecharts是一个用于生成Echarts图标的类库Echarts是百度开源的一个数据可视化的Js库用Echarts生成的图可视化效果非常棒 新版v1和老版本......
  • 在vue中使用echarts
    1.引入echarts先通过npm安装echartsnpmrunecharts--save2.在main.js中import*asechartsfrom'echarts';Vue.prototype.$echarts=echarts3.在.vue文件中(包括......
  • echarts存在两个series时,tooltip限制仅显示一个
    应用场景       如图,当需要用类似装饰时,需要有两个轴,两组数据,但是tooltip中应该仅显示一组。 解决方法     在option下先设置一个全局的tool......
  • ASP.NET Core :容器注入(二):生命周期作用域与对象释放
    //瞬时生命周期ServiceCollectionservices=newServiceCollection();services.AddTransient<TestServiceImpl>();using(ServiceProvidersp=services.BuildServic......
  • ECharts
    配置调整横纵坐标与边缘的距离方法一:grid:{top:"60px",bottom:"60px",left:"35px",right:"20px",},方法二:博客......
  • echarts 备忘
    1.画线参考:https://echarts.apache.org/examples/zh/editor.html?c=scatter-anscombe-quartet&lang=js示例代码constmarkLineOptFactory=(start=[0.3,0],end......
  • 如何使用echarts
    官网:https://echarts.apache.org/handbook/zh/get-started/a下载js文件并引入b实例化对象echarts.init(获取盒子对象)c设置配置项 复制修改d应用配置项setOp......
  • mongo容器忘记了root用户账号密码
    需要执行root账号的操作时错:Error:notauthorizedonadmintoexecutecommand轻松三步解决1.关闭认证,需要去该Mongo服务的部署信息去掉"--auth",然后再去部署2.直接用mo......
  • 在Vue中引入echarts以及使用
    在Vue中引入echarts以及使用今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染。1.引入echartsnpminstallecharts--save在vue项目中安装......
  • ECharts 添加渐变颜色和去除点位
    option={title:{text:'折线图颜色渐变'},tooltip:{trigger:'axis',axisPointer:{type:'cross',......