Published on

echarts制图详解

Authors
  • avatar
    Name
    Lif
    Twitter

使用echarts可以将数据转换成需要的图标

但是有一些基础功能需要了解。

echartsInstance

echarts实例通过init创建。

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

参数分别为容器、主题、附加参数,后两个可以为空,容器就是我们的contianer、div这些。 主题是echarts独立的配色系统,可以自己配色,然后下载这些主题。附加参数有很多,就不一一列出了。

dispose

echarts初始化完成后,可以通过dispose来销毁实例,通过此功能可以在同一容器上进行图标切换

echarts.dispose(dom) 

请注意,dispose是echarts的方法,而非实例本身的方法,通过实例可以使用

chart.clean()

来清除图表的option(清除后图表可用),实际上,目前仅能清除图标的series内容,可能是bug。

setOption

设置图标实例的数据及其他配置项

 chart.setOption(option, notMerge, lazyUpdate);

一些option

  1. title:标题组件

  2. legend:图例组件,图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

  3. grid:网格组件,直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。单个实例可以有任意多个grid组件

  4. xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。xAsis.type可以设置x轴的类型,可选: 可选:

    • 'value' 数值轴,适用于连续数据。
    • 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
    • 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
    • 'log' 对数轴。适用于对数数据。
  5. yAxis:直角坐标系 grid 中的 y 轴

  6. polar:极坐标系,可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。

  7. radar:雷达图坐标系组件,只适用于雷达图。

  8. dataZoom:dataZoom 组件用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。

  9. timeline: timeline组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能

  10. calendar:日历坐标系组件。

  11. dataset:数据集组件

  12. series:图形组件,决定生成的图形是线还是圆或其他

  13. backgroundColor:背景色组件

  14. useUTC:是否使用utc时间

  15. toolbox:工具组件,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。

  16. geo:地图组件。

resize

改变图表尺寸,在容器大小改变时需要手动调用

window.onresize = function () {
        showChart.resize();}

使用以上方法可以使图表随浏览器大小改变而自动改变

showLoading

显示加载动画,在加载完后调用hideLoading隐藏