echarts文档解读

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

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

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

echarts

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

echarts文档解读

所有属性

echarts. init

Function

(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number,
    renderer?: string,
    useDirtyRect?: boolean,     // 从 `5.0.0` 开始支持
    useCoarsePointer?: boolean, // 从 `5.4.0` 开始支持
    pointerSize?: number,       // 从 `5.4.0` 开始支持
    ssr?: boolean,              // 从 `5.3.0` 开始支持
    width?: number|string,
    height?: number|string,
    locale?: string             // 从 `5.0.0` 开始支持
}) => ECharts

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

参数解释

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

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

echarts. connect

Function

(group:string|Array)

多个图表实例实现联动。

参数：

示例：

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

echarts. disconnect

Function

(group:string)

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

参数：

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';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入直角坐标系组件，组件后缀都为 Component
import {
    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。

参数：

示例 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
}

注：

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 等非浏览器平台的时候可能需要提供。

 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.<Array.<number>>,
    // 用于截取点的矩形。
    rect: {
        x: number,
        y: number,
        width: number,
        height: number
    }
) => Array.<Array.<number>> // 截取结果。

 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。

标签 , ,