zoukankan      html  css  js  c++  java
  • Echrarts的基本API

    官方API文档

    https://echarts.apache.org/zh/api.html#echarts

    一、init 创建一个 ECharts 实例

    创建一个 ECharts 实例返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

    const chart = echarts.init(dom, null, {renderer: 'svg'});
    

    参数:

    • dom 实例容器,一般是一个具有高宽的div元素。
      如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.height,或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

    • theme 应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。

    • opts 附加参数。有下面几个可选项:

      • devicePixelRatio 设备像素比,默认取浏览器的值window.devicePixelRatio。
      • renderer 渲染器,支持 'canvas' 或者 'svg'。
      • useDirtyRect 是否开启脏矩形渲染,默认为false。
      • width 可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
      • height 可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
      • locale 使用的语言,内置 'ZH' 和 'EN' 两个语言

    二、setOption 图表实例的配置项

    设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

    chart.setOption(option, notMerge, lazyUpdate);
    

    或者

    chart.setOption(option, {
        notMerge: ...,
        lazyUpdate: ...,
        silent: ...
    });
    

    或者

    chart.setOption(option, {
        replaceMerge: ['xAxis', 'yAxis', 'series']
    });
    
    • notMerge: boolean

      可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件。

    • replaceMerge: string | string[]

      可选。用户可以在这里指定一个或多个组件,如:xAxis, series,这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件,也可使用 "replaceMerge"。详见 组件合并模式。

    • lazyUpdate: boolean

      可选。在设置完 option 后是否不立即更新图表,默认为 false,即同步立即更新。如果为 true,则会在下一个 animation frame 中,才更新图表。

    • silent: boolean

      可选。阻止调用 setOption 时抛出事件,默认为 false,即抛出事件。

    三、resize 重绘图表

    于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。

    多个图表可以使用addEventListener

    window.addEventListener("resize", () => { 
        this.myChart.resize();  
        this.myChart2.resize();  
        this.myChart3.resize();
    });
    

    在vue组件上就可以直接单个组件添加进事件列表

    myLogLine.setOption(option);
    window.addEventListener("resize", () => { myLogLine.resize();});
    
    myLine.setOption(option);
    window.addEventListener("resize", () => { myLine.resize();});
    

    四、appendData 分片加载数据和增量渲染

    此接口用于,在大数据量(百万以上)的渲染场景,分片加载数据和增量渲染。在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力,渲染新加入的数据块时不会清除原有已经渲染的部分。

    注意:

    现在不支持 系列**(series) **使用 **dataset **同时使用 appendData,只支持系列使用自己的 series.data 时使用 appendData。
    目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 散点图(scatter) 和 线图(lines)。ECharts GL 的 散点图(scatterGL)、线图(linesGL) 和 可视化建筑群(polygons3D)。

    作者:落花桂
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    实现点击预览图片更改页面背景图片的效果
    JavaScript中赋值运算符的使用
    Visual Studio常用快捷键
    循 环 嵌 套
    控制摄像头拍照
    运用<body>属性,渲染页面效果
    子查询的易错点
    随机数
    PDO获取数据乱码的解决方法
    JavaScript中比较运算符的使用
  • 原文地址:https://www.cnblogs.com/nthforsth/p/15256258.html
Copyright © 2011-2022 走看看