位置: 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常用的数据类型)

  • 腾讯会议被移除的成员怎么再进来(腾讯会议被移除会议)

    腾讯会议被移除的成员怎么再进来(腾讯会议被移除会议)

  • 华为nova4e多宽(华为nova4e尺寸长宽高)

    华为nova4e多宽(华为nova4e尺寸长宽高)

  • 淘宝号违规了能恢复吗(淘宝号违规了多久能消除)

    淘宝号违规了能恢复吗(淘宝号违规了多久能消除)

  • 腾讯会议怎么全屏不了(腾讯会议怎么全屏无边框)

    腾讯会议怎么全屏不了(腾讯会议怎么全屏无边框)

  • 阜阳微信扫码乘车怎么使用(阜阳坐公交车可以微信支付吗)

    阜阳微信扫码乘车怎么使用(阜阳坐公交车可以微信支付吗)

  • 苹果原装电池在哪买(苹果换原装电池多少钱)

    苹果原装电池在哪买(苹果换原装电池多少钱)

  • 建模渲染是什么意思(建模渲染是什么专业学的)

    建模渲染是什么意思(建模渲染是什么专业学的)

  • mx250和mx350区别(mx250和mx350差别有多大)

    mx250和mx350区别(mx250和mx350差别有多大)

  • 拼多多删除好友后对方能知道吗(拼多多删除好友之后对方的好友列表还会有你吗)

    拼多多删除好友后对方能知道吗(拼多多删除好友之后对方的好友列表还会有你吗)

  • 华为手机怎样使用分屏共时使用(华为手机怎样使用nfc功能)

    华为手机怎样使用分屏共时使用(华为手机怎样使用nfc功能)

  • 无线网络连接不可用怎么回事(无线网络连接不可上网怎么回事)

    无线网络连接不可用怎么回事(无线网络连接不可上网怎么回事)

  • 来电被拦截会提示什么(号码拦截了别人打电话会提示)

    来电被拦截会提示什么(号码拦截了别人打电话会提示)

  • 手机号注销多久是空号(手机号注销多久查不到通话记录)

    手机号注销多久是空号(手机号注销多久查不到通话记录)

  • word中定位的快捷键是什么(word2010定位的快捷键)

    word中定位的快捷键是什么(word2010定位的快捷键)

  • 微信语音对方忙线中是拒绝吗(微信语音对方忙线中是拉黑了吗)

    微信语音对方忙线中是拒绝吗(微信语音对方忙线中是拉黑了吗)

  • iphone11怎么关闭所有应用(iphone11怎么关闭静音模式)

    iphone11怎么关闭所有应用(iphone11怎么关闭静音模式)

  • 苹果怎么强制关机重启(苹果怎么强制关机屏幕失灵)

    苹果怎么强制关机重启(苹果怎么强制关机屏幕失灵)

  • vivo一体机进水怎么办(一体机手机进水后会不会爆炸)

    vivo一体机进水怎么办(一体机手机进水后会不会爆炸)

  • ps怎么加颗粒(ps怎样添加颗粒的滤镜效果)

    ps怎么加颗粒(ps怎样添加颗粒的滤镜效果)

  • 怎么关掉淘宝人生(淘宝怎么关闭认识的人)

    怎么关掉淘宝人生(淘宝怎么关闭认识的人)

  • 猜你想搜怎么删除(猜你想搜怎么删除浏览器)

    猜你想搜怎么删除(猜你想搜怎么删除浏览器)

  • 脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

    脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

  • 反激活设备有什么作用(反激活在哪)

    反激活设备有什么作用(反激活在哪)

  • reno什么时候上市(reno什么时候出新款)

    reno什么时候上市(reno什么时候出新款)

  • vivox27充电发热正常吗(vivo充电发热怎么办)

    vivox27充电发热正常吗(vivo充电发热怎么办)

  • 趣步怎么连接手环(趣步怎么玩说明)

    趣步怎么连接手环(趣步怎么玩说明)

  • 个体工商户需要进项发票吗
  • 增值税发票认证在哪里
  • 商业承兑汇票未到期贴现
  • 一般纳税人增值税可以抵扣吗
  • 承租承包经营所得
  • 代开专票可以开13个点吗
  • 不得抵扣的进项税额转出会计分录
  • 销售增长率在报表上怎么看出来
  • 个人所得税app是什么意思
  • 试用期社保是按照应发工资缴纳吗
  • 公司购买软件著作权
  • 会计学中管理费用属于什么
  • 一般纳税人采购收到普通发票
  • 出口货物免抵退税额城市维护建设税
  • 从境外取得的佣金
  • 建筑工程安装合同
  • 小规模纳税人免征增值税怎么记账
  • 季度所得税申报可以弥补以前年度亏损吗
  • 罗马尼亚卫生部长
  • 潜在表决权如何影响表决权
  • 财政拨款收入的预算会计科目
  • 财务线上线下是什么意思
  • PHP+Mysql+jQuery中国地图区域数据统计实例讲解
  • isignup.exe是什么进程 isignup进程查询
  • nerosvc.exe - nerosvc是什么进程 有什么用
  • 劳动合同到期补偿金怎么算
  • 银行承兑汇票挂失手续费收费标准
  • 企业获得境外咨询费
  • 企业股权投资收益缴纳什么税
  • php正则表达式匹配字符串
  • 临时经营如何纳税
  • twig教程
  • 司法拍卖所购的房产
  • 2018年残保金申报表填表说明
  • vue3.0项目创建
  • linux运行c++程序
  • 一文看懂华为新品发布会
  • 检测命令
  • md5 python3
  • 旅游费用叫什么
  • 支付货款没有收据怎么办
  • 微信转账和支付宝转账的区别
  • 文化事业建设费的征收范围
  • 租赁办公场所的法律规定
  • 员工在其他公司担任股东,违法吗
  • 研发失败的费用允许加计扣除吗
  • java接口基础知识
  • 哪个网站可以免费学电脑
  • 申请电子发票需要什么条件
  • 继续教育的相关知识
  • 社保里面的住房公积金买房可以便宜多少
  • 汇算清缴是不是一定要做
  • 增值税普通发票和专用发票有什么区别
  • 所得税汇算清缴需要调增的项目
  • 工会经费属于什么会计科目?
  • 年末净利润为负数结转本年利润实例
  • 明细分类账表格
  • 原始凭证书写要求
  • 外购固定资产
  • 购入固定资产入账会计处理
  • Centos7 下Mysql5.7.19安装教程详解
  • win8系统怎么安装office
  • 猎豹如何添加兼容性站点
  • ubuntu安装超详细教程
  • mission controller
  • windows怎么更改网络状态
  • window10的连接功能
  • 在linux系统中,用来存放系统所需要的配置文件
  • 四步制作的花
  • android secure
  • cocos2dx官方教程
  • android layer
  • linux用户配置文件是什么
  • 求婚表白的语句
  • js 数组 增加元素
  • Android In <declare-styleable> MenuView, unable to find attribute android:preserveIconSpacing
  • shell脚本指南
  • android仿qq聊天
  • javascript原型
  • json对象结构中,关键字key必须为什么类型
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设