前言:今天给大家分享一个前端的开源可视化图标库echarts。

点击下方名片,即可领取学长个人微信

echarts

全局 echarts 对象,在 script 标签引入echarts.js文件后获得,或者在 AMD 环境中通过require('echarts')获得。

所有属性

echarts.init

Function

(dom" />echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

参数解释

  • dom

    实例容器,一般是一个具有高宽的 DIV 元素。只有在设置opts.ssr开启了服务端渲染后该参数才是可选。

    也支持直接使用canvas元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用getDataURL生成图片链接相比可以支持图表的实时刷新。

  • theme

    应用的主题。可以是一个主题的配置对象,也可以是使用已经通过echarts.registerTheme注册的主题名称。参见ECharts 中的样式简介。

  • opts

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

    • devicePixelRatio设备像素比,默认取浏览器的值window.devicePixelRatio
    • renderer渲染模式,支持'canvas'或者'svg'。参见使用 Canvas 或者 SVG 渲染。
    • ssr是否使用服务端渲染,只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染,必须要调用renderToSVGString方法才能得到渲染后 SVG 字符串。
    • useDirtyRect是否开启脏矩形渲染,只有在 Canvas 渲染模式有效,默认为false。参见ECharts 5 新特性。
    • useCoarsePointer是否扩大可点击元素的响应范围。null表示对移动设备开启;true表示总是开启;false表示总是不开启。参见增加交互响应范围。
    • pointerSize扩大元素响应范围的像素大小,配合opts.useCoarsePointer使用。
    • width可显式指定实例宽度,单位为像素。如果传入值为null/undefined/'auto',则表示自动取dom(实例容器)的宽度。
    • height可显式指定实例高度,单位为像素。如果传入值为null/undefined/'auto',则表示自动取dom(实例容器)的高度。
    • locale使用的语言,内置'ZH''EN'两个语言,也可以使用echarts.registerLocale方法注册新的语言包。目前支持的语言见src/i18n。

      如果不指定主题,也需在传入opts前先传入null,如:

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

注:如果容器是隐藏的,ECharts 可能会获取不到 DIV 的高宽导致初始化失败,这时候可以明确指定 DIV 的style.widthstyle.height,或者在div显示后手动调用resize调整尺寸。

在使用服务端渲染的模式下,必须通过opts.widthopts.height设置高和宽。

echarts.connect

Function

(group:string|Array)

多个图表实例实现联动。

参数:

  • groupgroup 的 id,或者图表实例的数组。

示例:

// 分别设置每个实例的 group idchart1.group = 'group1';chart2.group = 'group1';echarts.connect('group1');// 或者可以直接传入需要联动的实例数组echarts.connect([chart1, chart2]);

echarts.disconnect

Function

(group:string)

解除图表实例的联动,如果只需要移除单个实例,可以将通过将该图表实例group设为空。

参数:

  • group

    group 的 id。

echarts.dispose

Function

(target: ECharts|HTMLDivElement|HTMLCanvasElement)

销毁实例,实例销毁后无法再被使用。

echarts.getInstanceByDom

Function

(target: HTMLDivElement|HTMLCanvasElement) => ECharts

获取 dom 容器上的实例。

echarts.use

Function

5.0.1开始支持

使用组件,配合新的按需引入的接口使用。

注意:该方法必须在echarts.init之前使用。

// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入柱状图图表,图表后缀都为 Chartimport {    BarChart} from 'echarts/charts';// 引入直角坐标系组件,组件后缀都为 Componentimport {    GridComponent} from 'echarts/components';// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import {    CanvasRenderer} from 'echarts/renderers';// 注册必须的组件echarts.use(    [GridComponent, BarChart, CanvasRenderer]);

更详细的使用方式见在项目中引入 Apache ECharts一文

echarts.registerMap

Function

(    mapName: string,    opt: {        geoJSON: Object | string;        specialAreas?: Object;    })| (    mapName: string,    opt: {        svg: Object | string;    })| (    mapName: string,    geoJSON: Object | string,    specialAreas?: Object)

注册可用的地图,只在geo组件或者map图表类型中使用。

使用方法见option.geo。

参数:

  • mapName

    地图名称,在geo组件或者map图表类型中设置的map对应的就是该值。

  • opt

    • geoJSON可选。GeoJson 格式的数据,具体格式见GeoJSON。可以是 JSON 字符串,也可以是解析得到的对象。这个参数也可以写为geoJson,效果相同。

    • svg可选。从v5.1.0开始支持SVG 格式的数据。可以是字符串,也可以是解析得到的 SVG DOM 对象。更多信息参见SVG 底图。

    • specialAreas可选。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。只在geoJSON中生效,svg中不生效。

示例USA Population Estimates:

echarts.registerMap('USA', usaJson, {    // 把阿拉斯加移到美国主大陆左下方    Alaska: {        // 左上角经度        left: -131,        // 左上角纬度        top: 25,        // 经度横跨的范围        width: 15    },    // 夏威夷    Hawaii: {        left: -110,        top: 28,        width: 5    },    // 波多黎各    'Puerto Rico': {        left: -76,        top: 26,        width: 2    }});

注:如果你在项目中使用了按需引入,从 v5.3.0 开始registerMap必须要在引入地图组件后才能使用。

echarts.getMap

Function

(mapName: string) => Object

获取已注册的地图,返回的对象类型如下

{    // 地图的 geoJSON 数据    geoJSON: Object,    // 地图的特殊区域,见 registerMap    specialAreas: Object}

注:

  • geoJSON也可写为geoJson,二者引用的是相同的内容。
  • 对于registerMap所注册的 SVG ,暂并不支持从此方法中返回。
  • 如果你在项目中使用了按需引入,从 v5.3.0 开始getMap必须要在引入地图组件后才能使用。

echarts.registerTheme

Function

(themeName: string, theme: Object)

注册主题,用于初始化实例的时候指定。

echarts.registerLocale

Function

5.0.0开始支持

(locale: string, localeCfg: Object)

注册语言包,用于初始化实例的时候指定。语言包格式见src/i18n/langEN.ts

echarts.setPlatformAPI

Function

5.3.0开始支持

(platformAPI?: {    createCanvas(): HTMLCanvasElement    measureText(text: string, font?: string): { width: number }    loadImage(        src: string,        onload: () => void,        onerror: () => void    ): HTMLImageElement}) => void

设置平台相关的 API,在 NodeJS 等非浏览器平台的时候可能需要提供。

  • createCanvas创建 Canvas 元素,主要用于测量文本宽度,在没提供measureText的时候需要提供。
  • measureText测量文本宽度,默认会通过createCanvas得到 Canvas 元素提供的接口来测量文本宽度,也可以替换成更轻量的实现。
  • loadImage加载图片,在使用 Canvas 渲染模式的时候并且使用 URL 作为图片的时候需要提供。

echarts.graphic

any

图形相关帮助方法。

echarts.graphic.extendShape

Function

创建一个新的 shape class。

(    opts: Object) => zrender.graphic.Path

更多的关于参数opts的细节,请参阅zrender.graphic.Path。

echarts.graphic.registerShape

Function

注册一个开发者定义的 shape class。

(    name: string,    ShapeClass: zrender.graphic.Path)

ShapeClass须用echarts.graphic.extendShape生成。 注册后,这个 class 可以用echarts.graphic.getShapeClass方法得到。registerShape会覆盖已注册的 class,如果用相同的name的话。 注册的 class,可以被用于自定义系列(custom series)和图形组件(graphic component),声明{type: name}即可。

例如:

var MyShape = echarts.graphic.extendShape({    shape: {        x: 0,        y: 0,        width: 0,        height: 0    },    buildPath: function (ctx, shape) {        ctx.moveTo(shape.x, shape.y);        ctx.lineTo(shape.x + shape.width, shape.y);        ctx.lineTo(shape.x, shape.y + shape.height);        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);        ctx.closePath();    }});echarts.graphic.registerShape('myCustomShape', MyShape);var option = {    series: {        type: 'custom',        coordinateSystem: 'none',        renderItem: function (params, api) {            return {                type: 'myCustomShape',                shape: {                    x: api.value(0),                    y: api.value(1),                    width: api.value(2),                    height: api.value(3)                },                style: {                    fill: 'red'                }            };        },        data: [[10, 20, 30, 40]]    }};

echarts.graphic.getShapeClass

Function

得到一个注册好的 class。

(    name: String) => zrender.graphic.Path

这些内置 shape class 会被默认预先注册进去:'circle','sector','ring','polygon','polyline','rect','line','bezierCurve','arc'.

echarts.graphic.clipPointsByRect

Function

输入一组点,和一个矩形,返回被矩形截取过的点。

(    // 要被截取的点列表,如 [[23, 44], [12, 15], ...]。    points: Array.>,    // 用于截取点的矩形。    rect: {        x: number,        y: number,        width: number,        height: number    }) => Array.> // 截取结果。

echarts.graphic.clipRectByRect

Function

输入两个矩形,返回第二个矩形截取第一个矩形的结果。

(    // 要被截取的矩形。    targetRect: {        x: number,        y: number,        width: number,        height: number    },    // 用于截取点的矩形。    rect: {        x: number,        y: number,        width: number,        height: number    }) => { // 截取结果。    x: number,    y: number,    width: number,    height: number}

注意:如果矩形完全被截干净,会返回undefined