首页 > 其他分享 >echart常用的几个api函数

echart常用的几个api函数

时间:2023-05-18 18:56:16浏览次数:43  
标签:context echart 函数 args chart api timeout wait

在对echart进行二次封装时,以下几个api函数很有用。

首先是,init 和 dispose,我们在创建页面及页面卸载时可以使用,让echart的资源能在组件卸载时被释放。

    this.chart = echarts.init(this.$refs.echart);
    this.$once('hook:beforeDestroy', () => { this.chart.dispose(); });

其次是,clear 与 setOption,我们在修改echart数据就需要用到

      this.chart?.clear();
      this.chart?.setOption()

最后是 resize,让 echart 能跟着浏览器缩放而变化

    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener('resize', this.__resizeHandler);
/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function(...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

标签:context,echart,函数,args,chart,api,timeout,wait
From: https://www.cnblogs.com/zhangdezheng/p/17413028.html

相关文章

  • 亚马逊AMAZON中国站API详情接口获取商品详情接口
       亚马逊中国站是亚马逊在中国开设的在线购物平台,提供包括图书、电子产品、家居生活、服饰鞋包等各类品类的商品。亚马逊为了满足中国消费者的需求,特别推出了全球购和自营模式两种购物方式,全球购支持跨境购物,自营模式则是由亚马逊直接发货并提供售后服务。同时,亚马逊还提......
  • Apipost Error: Invalid URI "http:///%20"
    1.情景展示使用Apipost调接口时,出现如上图所示的错误。2.具体分析去他们官网,帮助文档,连个搜索功能都没有,也是服了。说明这个请求地址有问题,但实际我把请求地址放到浏览器当中是可以正常访问的。3.解决方案百思不得其解。最后,发现:原来,是自己在复制URL的时候,前面多了一个......
  • 【淘宝拼多多抖音】订单详情API接口系列
    订单详情接口主要是获取订单的详细信息,包括但不限于订单号、下单时间、支付状态、发货状态、收货人信息、商品信息、金额、物流信息、退货/换货信息等。这些数据可以用于订单管理和追踪订单状态,以提供更好的客户服务。搜索当前会话用户作为卖家已卖出的交易数据(只能获取到三个月......
  • 6-1 数组排序输出(函数模板)
    6-1数组排序输出(函数模板)分数 10全屏浏览题目切换布局作者 何振峰单位 福州大学对于输入的每一批数,按从小到大排序后输出。一行输入为一批数,第一个输入为数据类型(1表示整数,2表示字符型数,3表示有一位小数的浮点数,4表示字符串,0表示输入结束......
  • 二.使用pandas.Resample函数转换日K为周K
    fromjqdatasdkimport*importpandasaspdimporttimeauth('193340***','****')#账号是申请时所填写的手机号;密码为聚宽官网登录密码stocks=list(get_all_securities(['stock']).index)#forstock_codeinstocks:#print("正在股票所有数据:"+......
  • echarts环形图渐变色和鼠标悬停样式
    计算后的渐变方向如图所示 <divclass="echarts"id="echat"ref="echat"></div>legendData:['小于1h','1~6h','6~24h','24h以上']total:733getData(){constcos=Math.cos;c......
  • NACOS 2.2.2 com.alibaba.nacos.api.exception.NacosException: user not found!
    因服务端设置了鉴权,nacos.core.auth.enabled=true(参照官方文档https://nacos.io/zh-cn/docs/auth.html)客户端需增加相关配置(username和password)spring:application:name:xxxxxcloud:nacos:server-addr:xxxxxxconfig:file-extensio......
  • 什么是 Angular 的 API Extractor?
    Angular的APIExtractor是一个用于生成和管理TypeScript库的API文档的工具。它的工作原理是通过分析TypeScript代码,并提取其中的公共API,生成清晰的文档以便开发者了解库的使用方式、函数、类、接口等。APIExtractor的工作流程如下:配置:首先,需要创建一个名为"api-e......
  • Echarts使用
    数据集数据集(dataset)提供数据,下面是一个最简单的dataset的例子:option={legend:{},tooltip:{},dataset:{//提供一份数据。source:[['product','2015','2016','2017'],['MatchaLatte',43.3,85.8,9......
  • API接口的运用场景以及获取方式
      part1.API接口可以在很多场景中运用例如:1.数据交换:API接口可以通过定义一定的数据格式和协议,实现不同系统之间的数据交互。比如在支付宝、微信等支付平台上,商家可以通过API接口获取用户付款或退款信息来处理订单操作。2.应用集成:如果一个应用需要使用另外一个应用的......