codecamp

ECharts API 全局echarts对象

echarts

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

echarts.init  | Function

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number
    renderer?: string
    width?: number|string
    height? number|string
}) => ECharts

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

参数

  • dom实例容器,一般是一个具有高宽的div元素。注:如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.height,或者在div显示后手动调用 echartsInstance.resize 调整尺寸。ECharts 3 中支持直接使用canvas元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用 echartsInstance.getDataURL 生成图片链接相比可以支持图表的实时刷新。
  • theme应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
  • opts附加参数。有下面几个可选项:devicePixelRatio设备像素比,默认取浏览器的值window.devicePixelRatio。renderer渲染器,目前仅支持'canvas'。width可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。height可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。

echarts.connect | Function

(group:string|Array)

多个图表实例实现联动。

参数:

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

示例:

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

echarts.disconnect  | Function

(group:string)

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

参数:

  • groupgroup 的 id。

echarts.dispose  |  Function

(target: ECharts|HTMLDivElement|HTMLCanvasElement)

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


echarts.getInstanceByDom   |  Function

(target: HTMLDivElement|HTMLCanvasElement) => ECharts

获取 dom 容器上的实例。


echarts.registerMap  |  Function

(mapName: string, geoJson: Object, specialAreas?: Object)

注册可用的地图,必须在包括 geo 组件或者 map 图表类型的时候才能使用。

使用方法见 option.geo。

参数:

  • mapName地图名称,在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。
  • geoJsonGeoJson 格式的数据,具体格式见 http://geojson.org/
  • specialAreas可选。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。示例 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 } });

echarts.getMap  |  Function

(mapName: string) => Object

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

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

echarts.registerTheme  |  Function

(themeName: string, theme: Object)

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

ECharts实例二:实现日历图
ECharts API图形相关帮助方法
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }