位置: IT常识 - 正文

echarts文档解读(echarts api文档)

编辑:rootadmin
echarts文档解读

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

推荐整理分享echarts文档解读(echarts api文档),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts官方文档,echart 文档,echarts3文档,echarts api文档,echarts api文档,echarts 文档,echarts详解,echarts 文档,内容如对您有帮助,希望把文章链接给更多的朋友!

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

echarts

全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('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 实例。

参数解释

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.width和style.height,或者在div显示后手动调用 resize 调整尺寸。

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

echarts. connect

Function

(group:string|Array)

多个图表实例实现联动。

参数:

group group 的 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文档解读(echarts api文档)

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

注意:该方法必须在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),

本文链接地址:https://www.jiuchutong.com/zhishi/300495.html 转载请保留说明!

上一篇:OpenCV实战(17)——FAST特征点检测(opencv教程)

下一篇:javascript常用的数组方法(javascript常用的数据类型)

  • 荣耀play4pro闪存规格是多少呢(荣耀play的闪存)

    荣耀play4pro闪存规格是多少呢(荣耀play的闪存)

  • 容器云是什么技术(容器云介绍)

    容器云是什么技术(容器云介绍)

  • 电动车锂电池泡水了还能用吗(电动车锂电池泡水后还能用吗)

    电动车锂电池泡水了还能用吗(电动车锂电池泡水后还能用吗)

  • onenote有什么用(onenote有什么用可以卸载吗)

    onenote有什么用(onenote有什么用可以卸载吗)

  • 智能外呼系统是什么(智能外呼系统发展现状)

    智能外呼系统是什么(智能外呼系统发展现状)

  • 手机云备份是什么意思(手机云备份是什么网站做的)

    手机云备份是什么意思(手机云备份是什么网站做的)

  • 手机1x网络怎么解决(手机网络信号1x怎么弄4g)

    手机1x网络怎么解决(手机网络信号1x怎么弄4g)

  • 微信收款延迟到账怎么回事(微信收款延迟到账能撤回吗)

    微信收款延迟到账怎么回事(微信收款延迟到账能撤回吗)

  • 抖音如何发图片评论(抖音如何发图片配自己的语音)

    抖音如何发图片评论(抖音如何发图片配自己的语音)

  • 苹果11闹钟声音大小怎么调(苹果11闹钟声音小怎么回事)

    苹果11闹钟声音大小怎么调(苹果11闹钟声音小怎么回事)

  • 8p序列号fd开头什么版本(苹果8p序列号f开头)

    8p序列号fd开头什么版本(苹果8p序列号f开头)

  • 多媒体数据压缩技术作用(多媒体数据压缩编码方法可分为两大类)

    多媒体数据压缩技术作用(多媒体数据压缩编码方法可分为两大类)

  • 手机如何重启(手机如何重启网络)

    手机如何重启(手机如何重启网络)

  • 手机qq怎么修改群名称(手机qq怎么修改密码)

    手机qq怎么修改群名称(手机qq怎么修改密码)

  • 手机进水后照相机打不开怎么办(手机进水后照相机模糊)

    手机进水后照相机打不开怎么办(手机进水后照相机模糊)

  • 华为matex折叠屏怎么打开

    华为matex折叠屏怎么打开

  • type c快充什么意思(type c接口快充)

    type c快充什么意思(type c接口快充)

  • 点快手为什么闪退(快手为什么闪退进不去)

    点快手为什么闪退(快手为什么闪退进不去)

  • 摄像头内存卡怎么放进去(摄像头内存卡怎么查看)

    摄像头内存卡怎么放进去(摄像头内存卡怎么查看)

  • 抖音null的作品怎么都没有(抖音null视频为什么都删了)

    抖音null的作品怎么都没有(抖音null视频为什么都删了)

  • 电信查本机号码是多少(电信查本机号码怎么查)

    电信查本机号码是多少(电信查本机号码怎么查)

  • Win8系统如何设置鼠标左右键互换?(win8系统如何设置u盘启动)

    Win8系统如何设置鼠标左右键互换?(win8系统如何设置u盘启动)

  • 电脑在线测速的方法有哪些?(电脑在线测速的软件)

    电脑在线测速的方法有哪些?(电脑在线测速的软件)

  • Vue Router4 ,prams 传参失效和报错问题

    Vue Router4 ,prams 传参失效和报错问题

  • ps分辨率如何理解(ps中分辨率)

    ps分辨率如何理解(ps中分辨率)

  • php中unset函数的使用(php usort函数)

    php中unset函数的使用(php usort函数)

  • 账面成本包含增值税吗
  • 进项税转出会计分录如何做
  • 以前年度所得税退税会计分录
  • 建筑业企业生产经营情况表
  • 医院企业所得税怎么征收的
  • 应付职工薪酬期末余额怎么算
  • 固定资产计入了主营业务成本,该怎么办
  • 勾选认证有时间限制吗
  • 水泥沙子开票属于什么类别
  • 小企业周转材料报废残值回收应计入管理费用
  • 应付账款坏账准备的会计分录
  • 自产的产品无偿赠送职工
  • 应付职工薪酬的一级科目
  • 写字楼出租可以给租户注册吗
  • 应交税金明细账余额怎么算
  • 怎么看公司行不行
  • 不动产发票如何开具
  • 普通增值税 税点
  • 固定资产验收单图片
  • 记账凭证做完之后干什么
  • 无形资产增值税计入入账价值吗
  • 跨境电商的账务怎么做
  • 王者荣耀中苏烈的最强出装
  • 七喜v8笔记本
  • 现金流量套期的例子
  • 库存商品的主要类型
  • 应税货物销售额是什么意思
  • chat gpt介绍开头
  • 装饰工程施工包括什么
  • 公司代扣税
  • 联想thinkpad l380yoga
  • 企业购进废旧厂房税率
  • 渐进模式的特点
  • php获取文本内容
  • uniapp中使用amap-vue,设置安全密钥
  • uni-app编译
  • 使用服务器
  • 逻辑电路选择器
  • 应收利息会计分局
  • 固定资产一次性扣除如何做账
  • 个体工商户超过100万怎么缴税
  • 农机融资租赁公司联系方式
  • vj刷题
  • 进料加工保税是什么意思
  • 租车协议要不要报税务机关备案?
  • 国际快递运输服务有哪些
  • 外经证适用范围
  • 主营业务成本为什么属于损益类科目
  • 利润与所有者权益的区别
  • 预付账款可以开发票吗
  • 哪些情况下可以终止心肺复苏
  • 公司转投资是什么意思
  • 员工成本价购买公司商品 税屋
  • 住宿费发票属于会计凭证吗
  • 会计做账什么意思
  • 发出计价是什么意思
  • 一个真正的企业应该具备哪些特征
  • mysql分页性能
  • win7浏览器升级到ie11
  • mac更改复制快捷键
  • mmc无法创建管理单元怎么办win11
  • win7系统如何隐藏任务栏
  • 无线网卡搜索不到无线网
  • ubuntu15.04系统怎么使用卸载命令卸载软件?
  • linux挂载windows共享文件命令
  • win7显示ipv4ipv6无网络访问权限
  • windows8网页版
  • js时间范围
  • linux shell脚本编写1加100
  • crontab设置每天执行
  • javascript中cookie
  • js生成页面
  • 深入开展税务文化
  • 数字证书使用方法
  • 雄安属于北京管吗
  • 出口退税申报时闿
  • 五证合一后还需要去税务局吗
  • 应纳税所得额怎么求公式
  • 广东省国家税务总局班子成员
  • 辽宁国税征期日历
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设