| /** |
| * ESL (Enterprise Standard Loader) |
| * Copyright 2013 Baidu Inc. All rights reserved. |
| * |
| * @file Browser端标准加载器,符合AMD规范 |
| * @author errorrik(errorrik@gmail.com) |
| * Firede(firede@firede.us) |
| */ |
| |
| /* jshint ignore:start */ |
| var define; |
| var require; |
| var esl; |
| /* jshint ignore:end */ |
| |
| /* eslint-disable guard-for-in */ |
| /* eslint-env amd:false */ |
| |
| (function (global) { |
| // "mod"开头的变量或函数为内部模块管理函数 |
| // 为提高压缩率,不使用function或object包装 |
| |
| /** |
| * 模块容器 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var modModules = {}; |
| |
| // 模块状态枚举量 |
| var MODULE_PRE_DEFINED = 1; |
| var MODULE_ANALYZED = 2; |
| var MODULE_PREPARED = 3; |
| var MODULE_DEFINED = 4; |
| |
| /** |
| * 自动定义的模块表 |
| * |
| * 模块define factory是用到时才执行,但是以下几种情况需要自动马上执行: |
| * 1. require([moduleId], callback) |
| * 2. plugin module and plugin resource: require('plugin!resource') |
| * 3. shim module |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var modAutoDefineModules = {}; |
| |
| /** |
| * 标记模块自动进行定义 |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function modFlagAutoDefine(id) { |
| if (!modIs(id, MODULE_DEFINED)) { |
| modAutoDefineModules[id] = 1; |
| } |
| } |
| |
| /** |
| * 内建module名称集合 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var BUILDIN_MODULE = { |
| require: globalRequire, |
| exports: 1, |
| module: 1 |
| }; |
| |
| /** |
| * 全局require函数 |
| * |
| * @inner |
| * @type {Function} |
| */ |
| var actualGlobalRequire = createLocalRequire(); |
| |
| // #begin-ignore |
| /** |
| * 超时提醒定时器 |
| * |
| * @inner |
| * @type {number} |
| */ |
| var waitTimeout; |
| // #end-ignore |
| |
| /* eslint-disable fecs-key-spacing */ |
| /* eslint-disable key-spacing */ |
| /** |
| * require配置 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var requireConf = { |
| baseUrl : './', |
| paths : {}, |
| config : {}, |
| map : {}, |
| packages : [], |
| shim : {}, |
| // #begin-ignore |
| waitSeconds: 0, |
| // #end-ignore |
| bundles : {}, |
| urlArgs : {} |
| }; |
| /* eslint-enable key-spacing */ |
| |
| /** |
| * 加载模块 |
| * |
| * @param {string|Array} requireId 模块id或模块id数组, |
| * @param {Function=} callback 加载完成的回调函数 |
| * @return {*} requireId为string时返回模块暴露对象 |
| */ |
| function globalRequire(requireId, callback) { |
| // #begin-ignore |
| // #begin assertNotContainRelativeId |
| // 确定require的模块id不包含相对id。用于global require,提前预防难以跟踪的错误出现 |
| var invalidIds = []; |
| |
| /** |
| * 监测模块id是否relative id |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function monitor(id) { |
| if (id.indexOf('.') === 0) { |
| invalidIds.push(id); |
| } |
| } |
| |
| if (typeof requireId === 'string') { |
| monitor(requireId); |
| } |
| else { |
| each( |
| requireId, |
| function (id) { |
| monitor(id); |
| } |
| ); |
| } |
| |
| // 包含相对id时,直接抛出错误 |
| if (invalidIds.length > 0) { |
| throw new Error( |
| '[REQUIRE_FATAL]Relative ID is not allowed in global require: ' |
| + invalidIds.join(', ') |
| ); |
| } |
| // #end assertNotContainRelativeId |
| |
| // 超时提醒 |
| var timeout = requireConf.waitSeconds; |
| if (timeout && (requireId instanceof Array)) { |
| if (waitTimeout) { |
| clearTimeout(waitTimeout); |
| } |
| waitTimeout = setTimeout(waitTimeoutNotice, timeout * 1000); |
| } |
| // #end-ignore |
| |
| return actualGlobalRequire(requireId, callback); |
| } |
| |
| /** |
| * 版本号 |
| * |
| * @type {string} |
| */ |
| globalRequire.version = '2.0.2'; |
| |
| /** |
| * loader名称 |
| * |
| * @type {string} |
| */ |
| globalRequire.loader = 'esl'; |
| |
| /** |
| * 将模块标识转换成相对的url |
| * |
| * @param {string} id 模块标识 |
| * @return {string} |
| */ |
| globalRequire.toUrl = actualGlobalRequire.toUrl; |
| |
| // #begin-ignore |
| /** |
| * 超时提醒函数 |
| * |
| * @inner |
| */ |
| function waitTimeoutNotice() { |
| var hangModules = []; |
| var missModules = []; |
| var hangModulesMap = {}; |
| var missModulesMap = {}; |
| var visited = {}; |
| |
| /** |
| * 检查模块的加载错误 |
| * |
| * @inner |
| * @param {string} id 模块id |
| * @param {boolean} hard 是否装载时依赖 |
| */ |
| function checkError(id, hard) { |
| if (visited[id] || modIs(id, MODULE_DEFINED)) { |
| return; |
| } |
| |
| visited[id] = 1; |
| |
| if (!modIs(id, MODULE_PREPARED)) { |
| // HACK: 为gzip后体积优化,不做抽取 |
| if (!hangModulesMap[id]) { |
| hangModulesMap[id] = 1; |
| hangModules.push(id); |
| } |
| } |
| |
| var mod = modModules[id]; |
| if (!mod) { |
| if (!missModulesMap[id]) { |
| missModulesMap[id] = 1; |
| missModules.push(id); |
| } |
| } |
| else if (hard) { |
| if (!hangModulesMap[id]) { |
| hangModulesMap[id] = 1; |
| hangModules.push(id); |
| } |
| |
| each( |
| mod.depMs, |
| function (dep) { |
| checkError(dep.absId, dep.hard); |
| } |
| ); |
| } |
| } |
| |
| for (var id in modAutoDefineModules) { |
| checkError(id, 1); |
| } |
| |
| if (hangModules.length || missModules.length) { |
| throw new Error( |
| '[MODULE_TIMEOUT]Hang( ' |
| + (hangModules.join(', ') || 'none') |
| + ' ) Miss( ' |
| + (missModules.join(', ') || 'none') |
| + ' )' |
| ); |
| } |
| } |
| // #end-ignore |
| |
| /** |
| * 未预定义的模块集合 |
| * 主要存储匿名方式define的模块 |
| * |
| * @inner |
| * @type {Array} |
| */ |
| var wait4PreDefine = []; |
| |
| /** |
| * 完成模块预定义,此时处理的模块是匿名define的模块 |
| * |
| * @inner |
| * @param {string} currentId 匿名define的模块的id |
| */ |
| function modCompletePreDefine(currentId) { |
| // HACK: 这里在IE下有个性能陷阱,不能使用任何变量。 |
| // 否则貌似会形成变量引用和修改的读写锁,导致wait4PreDefine释放困难 |
| each(wait4PreDefine, function (mod) { |
| modPreDefine( |
| currentId, |
| mod.deps, |
| mod.factory |
| ); |
| }); |
| |
| wait4PreDefine.length = 0; |
| } |
| |
| /** |
| * 定义模块 |
| * |
| * @param {string=} id 模块标识 |
| * @param {Array=} dependencies 依赖模块列表 |
| * @param {Function=} factory 创建模块的工厂方法 |
| */ |
| function globalDefine(id, dependencies, factory) { |
| // define(factory) |
| // define(dependencies, factory) |
| // define(id, factory) |
| // define(id, dependencies, factory) |
| if (factory == null) { |
| if (dependencies == null) { |
| factory = id; |
| id = null; |
| } |
| else { |
| factory = dependencies; |
| dependencies = null; |
| if (id instanceof Array) { |
| dependencies = id; |
| id = null; |
| } |
| } |
| } |
| |
| if (factory == null) { |
| return; |
| } |
| |
| var opera = window.opera; |
| |
| // IE下通过current script的data-require-id获取当前id |
| if ( |
| !id |
| && document.attachEvent |
| && (!(opera && opera.toString() === '[object Opera]')) |
| ) { |
| var currentScript = getCurrentScript(); |
| id = currentScript && currentScript.getAttribute('data-require-id'); |
| } |
| |
| if (id) { |
| modPreDefine(id, dependencies, factory); |
| } |
| else { |
| // 纪录到共享变量中,在load或readystatechange中处理 |
| // 标准浏览器下,使用匿名define时,将进入这个分支 |
| wait4PreDefine[0] = { |
| deps: dependencies, |
| factory: factory |
| }; |
| } |
| } |
| |
| globalDefine.amd = {}; |
| |
| /** |
| * 模块配置获取函数 |
| * |
| * @inner |
| * @return {Object} 模块配置对象 |
| */ |
| function moduleConfigGetter() { |
| var conf = requireConf.config[this.id]; |
| if (conf && typeof conf === 'object') { |
| return conf; |
| } |
| |
| return {}; |
| } |
| |
| /** |
| * 预定义模块 |
| * |
| * @inner |
| * @param {string} id 模块标识 |
| * @param {Array.<string>} dependencies 显式声明的依赖模块列表 |
| * @param {*} factory 模块定义函数或模块对象 |
| */ |
| function modPreDefine(id, dependencies, factory) { |
| // 将模块存入容器 |
| // |
| // 模块内部信息包括 |
| // ----------------------------------- |
| // id: module id |
| // depsDec: 模块定义时声明的依赖 |
| // deps: 模块依赖,默认为['require', 'exports', 'module'] |
| // factory: 初始化函数或对象 |
| // factoryDeps: 初始化函数的参数依赖 |
| // exports: 模块的实际暴露对象(AMD定义) |
| // config: 用于获取模块配置信息的函数(AMD定义) |
| // state: 模块当前状态 |
| // require: local require函数 |
| // depMs: 实际依赖的模块集合,数组形式 |
| // depMkv: 实际依赖的模块集合,表形式,便于查找 |
| // depRs: 实际依赖的资源集合 |
| // ------------------------------------ |
| if (!modModules[id]) { |
| /* eslint-disable key-spacing */ |
| modModules[id] = { |
| id : id, |
| depsDec : dependencies, |
| deps : dependencies || ['require', 'exports', 'module'], |
| factoryDeps : [], |
| factory : factory, |
| exports : {}, |
| config : moduleConfigGetter, |
| state : MODULE_PRE_DEFINED, |
| require : createLocalRequire(id), |
| depMs : [], |
| depMkv : {}, |
| depRs : [] |
| }; |
| /* eslint-enable key-spacing */ |
| } |
| } |
| |
| /** |
| * 开始执行模块定义前的准备工作 |
| * |
| * 首先,完成对factory中声明依赖的分析提取 |
| * 然后,尝试加载"资源加载所需模块" |
| * |
| * 需要先加载模块的原因是:如果模块不存在,无法进行resourceId normalize化 |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function modPrepare(id) { |
| var mod = modModules[id]; |
| if (!mod || modIs(id, MODULE_ANALYZED)) { |
| return; |
| } |
| |
| var deps = mod.deps; |
| var factory = mod.factory; |
| var hardDependsCount = 0; |
| |
| // 分析function body中的require |
| // 如果包含显式依赖声明,根据AMD规定和性能考虑,可以不分析factoryBody |
| if (typeof factory === 'function') { |
| hardDependsCount = Math.min(factory.length, deps.length); |
| |
| // If the dependencies argument is present, the module loader |
| // SHOULD NOT scan for dependencies within the factory function. |
| !mod.depsDec && factory.toString() |
| .replace(/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, '') |
| .replace(/require\(\s*(['"'])([^'"]+)\1\s*\)/g, |
| function ($0, $1, depId) { |
| deps.push(depId); |
| } |
| ); |
| } |
| |
| var requireModules = []; |
| var depResources = []; |
| each(deps, function (depId, index) { |
| var idInfo = parseId(depId); |
| var absId = normalize(idInfo.mod, id); |
| var moduleInfo; |
| var resInfo; |
| |
| if (absId && !BUILDIN_MODULE[absId]) { |
| // 如果依赖是一个资源,将其信息添加到module.depRs |
| // |
| // module.depRs中的项有可能是重复的。 |
| // 在这个阶段,加载resource的module可能还未defined, |
| // 导致此时resource id无法被normalize。 |
| // |
| // 比如对a/b/c而言,下面几个resource可能指的是同一个资源: |
| // - js!../name.js |
| // - js!a/name.js |
| // - ../../js!../name.js |
| // |
| // 所以加载资源的module ready时,需要遍历module.depRs进行处理 |
| if (idInfo.res) { |
| resInfo = { |
| id: depId, |
| mod: absId, |
| res: idInfo.res |
| }; |
| depResources.push(depId); |
| mod.depRs.push(resInfo); |
| } |
| |
| // 对依赖模块的id normalize能保证正确性,在此处进行去重 |
| moduleInfo = mod.depMkv[absId]; |
| if (!moduleInfo) { |
| moduleInfo = { |
| id: idInfo.mod, |
| absId: absId, |
| hard: index < hardDependsCount |
| }; |
| mod.depMs.push(moduleInfo); |
| mod.depMkv[absId] = moduleInfo; |
| requireModules.push(absId); |
| } |
| } |
| else { |
| moduleInfo = {absId: absId}; |
| } |
| |
| // 如果当前正在分析的依赖项是define中声明的, |
| // 则记录到module.factoryDeps中 |
| // 在factory invoke前将用于生成invoke arguments |
| if (index < hardDependsCount) { |
| mod.factoryDeps.push(resInfo || moduleInfo); |
| } |
| }); |
| |
| mod.state = MODULE_ANALYZED; |
| modInitFactoryInvoker(id); |
| nativeAsyncRequire(requireModules); |
| depResources.length && mod.require( |
| depResources, |
| function () { |
| each(mod.depRs, function (res) { |
| if (!res.absId) { |
| res.absId = normalize(res.id, id); |
| } |
| }); |
| modAutoDefine(); |
| } |
| ); |
| } |
| |
| /** |
| * 对一些需要自动定义的模块进行自动定义 |
| * |
| * @inner |
| */ |
| function modAutoDefine() { |
| for (var id in modAutoDefineModules) { |
| modPrepare(id); |
| modUpdatePreparedState(id); |
| modTryInvokeFactory(id); |
| } |
| } |
| |
| /** |
| * 更新模块的准备状态 |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function modUpdatePreparedState(id) { |
| var visited = {}; |
| update(id); |
| |
| function update(id) { |
| modPrepare(id); |
| if (!modIs(id, MODULE_ANALYZED)) { |
| return false; |
| } |
| if (modIs(id, MODULE_PREPARED) || visited[id]) { |
| return true; |
| } |
| |
| visited[id] = 1; |
| var mod = modModules[id]; |
| var prepared = true; |
| |
| each( |
| mod.depMs, |
| function (dep) { |
| return (prepared = update(dep.absId)); |
| } |
| ); |
| |
| // 判断resource是否加载完成。如果resource未加载完成,则认为未准备好 |
| /* jshint ignore:start */ |
| prepared && each( |
| mod.depRs, |
| function (dep) { |
| prepared = !!dep.absId; |
| return prepared; |
| } |
| ); |
| /* jshint ignore:end */ |
| |
| if (prepared) { |
| mod.state = MODULE_PREPARED; |
| } |
| |
| return prepared; |
| } |
| } |
| |
| /** |
| * 初始化模块定义时所需的factory执行器 |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function modInitFactoryInvoker(id) { |
| var mod = modModules[id]; |
| var invoking; |
| |
| mod.invokeFactory = invokeFactory; |
| |
| /** |
| * 初始化模块 |
| * |
| * @inner |
| */ |
| function invokeFactory() { |
| if (invoking || mod.state !== MODULE_PREPARED) { |
| return; |
| } |
| |
| invoking = 1; |
| |
| // 拼接factory invoke所需的arguments |
| var factoryReady = 1; |
| each( |
| mod.factoryDeps, |
| function (dep) { |
| var depId = dep.absId; |
| |
| if (!BUILDIN_MODULE[depId]) { |
| modTryInvokeFactory(depId); |
| return (factoryReady = modIs(depId, MODULE_DEFINED)); |
| } |
| } |
| ); |
| |
| if (factoryReady) { |
| try { |
| // 调用factory函数初始化module |
| var factory = mod.factory; |
| var exports = typeof factory === 'function' |
| ? factory.apply(global, modGetModulesExports( |
| mod.factoryDeps, |
| { |
| require: mod.require, |
| exports: mod.exports, |
| module: mod |
| } |
| )) |
| : factory; |
| |
| if (exports != null) { |
| mod.exports = exports; |
| } |
| |
| mod.invokeFactory = null; |
| } |
| catch (ex) { |
| if (/^\[MODULE_MISS\]"([^"]+)/.test(ex.message)) { |
| // 出错,则说明在factory的运行中,该require的模块是需要的 |
| // 所以把它加入强依赖中 |
| var hardCirclurDep = mod.depMkv[RegExp.$1]; |
| hardCirclurDep && (hardCirclurDep.hard = 1); |
| |
| // 如果是模块本身有问题导致的运行错误 |
| // 就不要把invoking置回去了,避免影响autoInvoke其他模块的初始化 |
| invoking = 0; |
| return; |
| } |
| |
| throw ex; |
| } |
| |
| // 完成define |
| // 不放在try里,避免后续的运行错误被这里吞掉 |
| modDefined(id); |
| } |
| } |
| } |
| |
| /** |
| * 判断模块是否完成相应的状态 |
| * |
| * @inner |
| * @param {string} id 模块标识 |
| * @param {number} state 状态码,使用时传入相应的枚举变量,比如`MODULE_DEFINED` |
| * @return {boolean} 是否完成相应的状态 |
| */ |
| function modIs(id, state) { |
| return modModules[id] && modModules[id].state >= state; |
| } |
| |
| /** |
| * 尝试执行模块factory函数,进行模块初始化 |
| * |
| * @inner |
| * @param {string} id 模块id |
| */ |
| function modTryInvokeFactory(id) { |
| var mod = modModules[id]; |
| |
| if (mod && mod.invokeFactory) { |
| mod.invokeFactory(); |
| } |
| } |
| |
| /** |
| * 根据模块id数组,获取其的exports数组 |
| * 用于模块初始化的factory参数或require的callback参数生成 |
| * |
| * @inner |
| * @param {Array} modules 模块id数组 |
| * @param {Object} buildinModules 内建模块对象 |
| * @return {Array} 模块exports数组 |
| */ |
| function modGetModulesExports(modules, buildinModules) { |
| var args = []; |
| each( |
| modules, |
| function (id, index) { |
| if (typeof id === 'object') { |
| id = id.absId; |
| } |
| args[index] = buildinModules[id] || modModules[id].exports; |
| } |
| ); |
| |
| return args; |
| } |
| |
| /** |
| * 模块定义完成事件监听器容器 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var modDefinedListeners = {}; |
| |
| /** |
| * 添加模块定义完成时间的监听器 |
| * |
| * @inner |
| * @param {string} id 模块标识 |
| * @param {Function} listener 监听函数 |
| */ |
| function modAddDefinedListener(id, listener) { |
| if (modIs(id, MODULE_DEFINED)) { |
| listener(); |
| return; |
| } |
| |
| var listeners = modDefinedListeners[id]; |
| if (!listeners) { |
| listeners = modDefinedListeners[id] = []; |
| } |
| |
| listeners.push(listener); |
| } |
| |
| /** |
| * 模块状态切换为定义完成 |
| * 因为需要触发事件,MODULE_DEFINED状态切换通过该函数 |
| * |
| * @inner |
| * @param {string} id 模块标识 |
| */ |
| function modDefined(id) { |
| var mod = modModules[id]; |
| mod.state = MODULE_DEFINED; |
| delete modAutoDefineModules[id]; |
| |
| var listeners = modDefinedListeners[id] || []; |
| var len = listeners.length; |
| while (len--) { |
| // 这里不做function类型的检测 |
| // 因为listener都是通过modOn传入的,modOn为内部调用 |
| listeners[len](); |
| } |
| |
| // 清理listeners |
| listeners.length = 0; |
| modDefinedListeners[id] = null; |
| } |
| |
| /** |
| * 异步加载模块 |
| * 内部使用,模块ID必须是经过normalize的Top-Level ID |
| * |
| * @inner |
| * @param {Array} ids 模块名称或模块名称列表 |
| * @param {Function=} callback 获取模块完成时的回调函数 |
| * @param {string} baseId 基础id,用于当ids是relative id时的normalize |
| */ |
| function nativeAsyncRequire(ids, callback, baseId) { |
| var isCallbackCalled = 0; |
| |
| each(ids, function (id) { |
| if (!(BUILDIN_MODULE[id] || modIs(id, MODULE_DEFINED))) { |
| modAddDefinedListener(id, tryFinishRequire); |
| (id.indexOf('!') > 0 |
| ? loadResource |
| : loadModule |
| )(id, baseId); |
| } |
| }); |
| tryFinishRequire(); |
| |
| /** |
| * 尝试完成require,调用callback |
| * 在模块与其依赖模块都加载完时调用 |
| * |
| * @inner |
| */ |
| function tryFinishRequire() { |
| if (typeof callback === 'function' && !isCallbackCalled) { |
| var isAllCompleted = 1; |
| each(ids, function (id) { |
| if (!BUILDIN_MODULE[id]) { |
| return (isAllCompleted = !!modIs(id, MODULE_DEFINED)); |
| } |
| }); |
| |
| // 检测并调用callback |
| if (isAllCompleted) { |
| isCallbackCalled = 1; |
| |
| callback.apply( |
| global, |
| modGetModulesExports(ids, BUILDIN_MODULE) |
| ); |
| } |
| } |
| } |
| } |
| |
| /** |
| * 正在加载的模块列表 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var loadingModules = {}; |
| |
| /** |
| * 加载模块 |
| * |
| * @inner |
| * @param {string} moduleId 模块标识 |
| */ |
| function loadModule(moduleId) { |
| // 加载过的模块,就不要再继续了 |
| if (loadingModules[moduleId] || modModules[moduleId]) { |
| return; |
| } |
| loadingModules[moduleId] = 1; |
| |
| // 初始化相关 shim 的配置 |
| var shimConf = requireConf.shim[moduleId]; |
| if (shimConf instanceof Array) { |
| requireConf.shim[moduleId] = shimConf = { |
| deps: shimConf |
| }; |
| } |
| |
| // shim依赖的模块需要自动标识为shim |
| // 无论是纯正的shim模块还是hybird模块 |
| var shimDeps = shimConf && (shimConf.deps || []); |
| if (shimDeps) { |
| each(shimDeps, function (dep) { |
| if (!requireConf.shim[dep]) { |
| requireConf.shim[dep] = {}; |
| } |
| }); |
| actualGlobalRequire(shimDeps, load); |
| } |
| else { |
| load(); |
| } |
| |
| /** |
| * 发送请求去加载模块 |
| * |
| * @inner |
| */ |
| function load() { |
| /* eslint-disable no-use-before-define */ |
| var bundleModuleId = bundlesIndex[moduleId]; |
| createScript(bundleModuleId || moduleId, loaded); |
| /* eslint-enable no-use-before-define */ |
| } |
| |
| /** |
| * script标签加载完成的事件处理函数 |
| * |
| * @inner |
| */ |
| function loaded() { |
| if (shimConf) { |
| var exports; |
| if (typeof shimConf.init === 'function') { |
| exports = shimConf.init.apply( |
| global, |
| modGetModulesExports(shimDeps, BUILDIN_MODULE) |
| ); |
| } |
| |
| if (exports == null && shimConf.exports) { |
| exports = global; |
| each( |
| shimConf.exports.split('.'), |
| function (prop) { |
| exports = exports[prop]; |
| return !!exports; |
| } |
| ); |
| } |
| |
| globalDefine(moduleId, shimDeps, exports || {}); |
| } |
| else { |
| modCompletePreDefine(moduleId); |
| } |
| |
| modAutoDefine(); |
| } |
| } |
| |
| /** |
| * 加载资源 |
| * |
| * @inner |
| * @param {string} pluginAndResource 插件与资源标识 |
| * @param {string} baseId 当前环境的模块标识 |
| */ |
| function loadResource(pluginAndResource, baseId) { |
| if (modModules[pluginAndResource]) { |
| return; |
| } |
| |
| /* eslint-disable no-use-before-define */ |
| var bundleModuleId = bundlesIndex[pluginAndResource]; |
| if (bundleModuleId) { |
| loadModule(bundleModuleId); |
| return; |
| } |
| /* eslint-enable no-use-before-define */ |
| |
| var idInfo = parseId(pluginAndResource); |
| var resource = { |
| id: pluginAndResource, |
| state: MODULE_ANALYZED |
| }; |
| modModules[pluginAndResource] = resource; |
| |
| /** |
| * plugin加载完成的回调函数 |
| * |
| * @inner |
| * @param {*} value resource的值 |
| */ |
| function pluginOnload(value) { |
| resource.exports = value || true; |
| modDefined(pluginAndResource); |
| } |
| |
| /* jshint ignore:start */ |
| /** |
| * 该方法允许plugin使用加载的资源声明模块 |
| * |
| * @param {string} id 模块id |
| * @param {string} text 模块声明字符串 |
| */ |
| pluginOnload.fromText = function (id, text) { |
| new Function(text)(); |
| modCompletePreDefine(id); |
| }; |
| /* jshint ignore:end */ |
| |
| /** |
| * 加载资源 |
| * |
| * @inner |
| * @param {Object} plugin 用于加载资源的插件模块 |
| */ |
| function load(plugin) { |
| var pluginRequire = baseId |
| ? modModules[baseId].require |
| : actualGlobalRequire; |
| |
| plugin.load( |
| idInfo.res, |
| pluginRequire, |
| pluginOnload, |
| moduleConfigGetter.call({id: pluginAndResource}) |
| ); |
| } |
| |
| load(actualGlobalRequire(idInfo.mod)); |
| } |
| |
| /** |
| * 配置require |
| * |
| * @param {Object} conf 配置对象 |
| */ |
| globalRequire.config = function (conf) { |
| if (conf) { |
| for (var key in requireConf) { |
| var newValue = conf[key]; |
| var oldValue = requireConf[key]; |
| |
| if (!newValue) { |
| continue; |
| } |
| |
| if (key === 'urlArgs' && typeof newValue === 'string') { |
| requireConf.urlArgs['*'] = newValue; |
| } |
| else { |
| // 简单的多处配置还是需要支持,所以配置实现为支持二级mix |
| if (oldValue instanceof Array) { |
| oldValue.push.apply(oldValue, newValue); |
| } |
| else if (typeof oldValue === 'object') { |
| for (var k in newValue) { |
| oldValue[k] = newValue[k]; |
| } |
| } |
| else { |
| requireConf[key] = newValue; |
| } |
| } |
| } |
| |
| createConfIndex(); |
| } |
| }; |
| |
| // 初始化时需要创建配置索引 |
| createConfIndex(); |
| |
| /** |
| * paths内部索引 |
| * |
| * @inner |
| * @type {Array} |
| */ |
| var pathsIndex; |
| |
| /** |
| * packages内部索引 |
| * |
| * @inner |
| * @type {Array} |
| */ |
| var packagesIndex; |
| |
| /** |
| * mapping内部索引 |
| * |
| * @inner |
| * @type {Array} |
| */ |
| var mappingIdIndex; |
| |
| /** |
| * bundles内部索引 |
| * |
| * @inner |
| * @type {Object} |
| */ |
| var bundlesIndex; |
| |
| /** |
| * urlArgs内部索引 |
| * |
| * @inner |
| * @type {Array} |
| */ |
| var urlArgsIndex; |
| |
| /** |
| * 将key为module id prefix的Object,生成数组形式的索引,并按照长度和字面排序 |
| * |
| * @inner |
| * @param {Object} value 源值 |
| * @param {boolean} allowAsterisk 是否允许*号表示匹配所有 |
| * @return {Array} 索引对象 |
| */ |
| function createKVSortedIndex(value, allowAsterisk) { |
| var index = kv2List(value, 1, allowAsterisk); |
| index.sort(descSorterByKOrName); |
| return index; |
| } |
| |
| /** |
| * 创建配置信息内部索引 |
| * |
| * @inner |
| */ |
| function createConfIndex() { |
| requireConf.baseUrl = requireConf.baseUrl.replace(/\/$/, '') + '/'; |
| |
| // create paths index |
| pathsIndex = createKVSortedIndex(requireConf.paths); |
| |
| // create mappingId index |
| mappingIdIndex = createKVSortedIndex(requireConf.map, 1); |
| each( |
| mappingIdIndex, |
| function (item) { |
| item.v = createKVSortedIndex(item.v); |
| } |
| ); |
| |
| // create packages index |
| packagesIndex = []; |
| each( |
| requireConf.packages, |
| function (packageConf) { |
| var pkg = packageConf; |
| if (typeof packageConf === 'string') { |
| pkg = { |
| name: packageConf.split('/')[0], |
| location: packageConf, |
| main: 'main' |
| }; |
| } |
| |
| pkg.location = pkg.location || pkg.name; |
| pkg.main = (pkg.main || 'main').replace(/\.js$/i, ''); |
| pkg.reg = createPrefixRegexp(pkg.name); |
| packagesIndex.push(pkg); |
| } |
| ); |
| packagesIndex.sort(descSorterByKOrName); |
| |
| // create urlArgs index |
| urlArgsIndex = createKVSortedIndex(requireConf.urlArgs, 1); |
| |
| // create bundles index |
| bundlesIndex = {}; |
| /* eslint-disable no-use-before-define */ |
| function bundlesIterator(id) { |
| bundlesIndex[id] = key; |
| } |
| /* eslint-enable no-use-before-define */ |
| for (var key in requireConf.bundles) { |
| each(requireConf.bundles[key], bundlesIterator); |
| } |
| } |
| |
| /** |
| * 对配置信息的索引进行检索 |
| * |
| * @inner |
| * @param {string} value 要检索的值 |
| * @param {Array} index 索引对象 |
| * @param {Function} hitBehavior 索引命中的行为函数 |
| */ |
| function indexRetrieve(value, index, hitBehavior) { |
| each(index, function (item) { |
| if (item.reg.test(value)) { |
| hitBehavior(item.v, item.k, item); |
| return false; |
| } |
| }); |
| } |
| |
| /** |
| * 将`模块标识+'.extension'`形式的字符串转换成相对的url |
| * |
| * @inner |
| * @param {string} source 源字符串 |
| * @return {string} url |
| */ |
| function toUrl(source) { |
| // 分离 模块标识 和 .extension |
| var extReg = /(\.[a-z0-9]+)$/i; |
| var queryReg = /(\?[^#]*)$/; |
| var extname = ''; |
| var id = source; |
| var query = ''; |
| |
| if (queryReg.test(source)) { |
| query = RegExp.$1; |
| source = source.replace(queryReg, ''); |
| } |
| |
| if (extReg.test(source)) { |
| extname = RegExp.$1; |
| id = source.replace(extReg, ''); |
| } |
| |
| var url = id; |
| |
| // paths处理和匹配 |
| var isPathMap; |
| indexRetrieve(id, pathsIndex, function (value, key) { |
| url = url.replace(key, value); |
| isPathMap = 1; |
| }); |
| |
| // packages处理和匹配 |
| if (!isPathMap) { |
| indexRetrieve(id, packagesIndex, function (value, key, item) { |
| url = url.replace(item.name, item.location); |
| }); |
| } |
| |
| // 相对路径时,附加baseUrl |
| if (!/^([a-z]{2,10}:\/)?\//i.test(url)) { |
| url = requireConf.baseUrl + url; |
| } |
| |
| // 附加 .extension 和 query |
| url += extname + query; |
| |
| // urlArgs处理和匹配 |
| indexRetrieve(id, urlArgsIndex, function (value) { |
| url += (url.indexOf('?') > 0 ? '&' : '?') + value; |
| }); |
| |
| return url; |
| } |
| |
| /** |
| * 创建local require函数 |
| * |
| * @inner |
| * @param {number} baseId 当前module id |
| * @return {Function} local require函数 |
| */ |
| function createLocalRequire(baseId) { |
| var requiredCache = {}; |
| |
| function req(requireId, callback) { |
| if (typeof requireId === 'string') { |
| if (!requiredCache[requireId]) { |
| var topLevelId = normalize(requireId, baseId); |
| |
| // 根据 https://github.com/amdjs/amdjs-api/wiki/require |
| // It MUST throw an error if the module has not |
| // already been loaded and evaluated. |
| modTryInvokeFactory(topLevelId); |
| if (!modIs(topLevelId, MODULE_DEFINED)) { |
| throw new Error('[MODULE_MISS]"' + topLevelId + '" is not exists!'); |
| } |
| |
| requiredCache[requireId] = modModules[topLevelId].exports; |
| } |
| |
| return requiredCache[requireId]; |
| } |
| else if (requireId instanceof Array) { |
| // 分析是否有resource,取出pluginModule先 |
| var pureModules = []; |
| var normalizedIds = []; |
| |
| each( |
| requireId, |
| function (id, i) { |
| var idInfo = parseId(id); |
| var absId = normalize(idInfo.mod, baseId); |
| var resId = idInfo.res; |
| var normalizedId = absId; |
| |
| if (resId) { |
| var trueResId = absId + '!' + resId; |
| if (resId.indexOf('.') !== 0 && bundlesIndex[trueResId]) { |
| absId = normalizedId = trueResId; |
| } |
| else { |
| normalizedId = null; |
| } |
| } |
| |
| normalizedIds[i] = normalizedId; |
| modFlagAutoDefine(absId); |
| pureModules.push(absId); |
| } |
| ); |
| |
| // 加载模块 |
| nativeAsyncRequire( |
| pureModules, |
| function () { |
| /* jshint ignore:start */ |
| each(normalizedIds, function (id, i) { |
| if (id == null) { |
| id = normalizedIds[i] = normalize(requireId[i], baseId); |
| modFlagAutoDefine(id); |
| } |
| }); |
| /* jshint ignore:end */ |
| |
| // modAutoDefine中,factory invoke可能发生错误 |
| // 从而导致nativeAsyncRequire没有被调用,callback没挂上 |
| // 所以nativeAsyncRequire要先运行 |
| nativeAsyncRequire(normalizedIds, callback, baseId); |
| modAutoDefine(); |
| }, |
| baseId |
| ); |
| modAutoDefine(); |
| } |
| } |
| |
| /** |
| * 将[module ID] + '.extension'格式的字符串转换成url |
| * |
| * @inner |
| * @param {string} id 符合描述格式的源字符串 |
| * @return {string} url |
| */ |
| req.toUrl = function (id) { |
| return toUrl(normalize(id, baseId)); |
| }; |
| |
| return req; |
| } |
| |
| /** |
| * id normalize化 |
| * |
| * @inner |
| * @param {string} id 需要normalize的模块标识 |
| * @param {string} baseId 当前环境的模块标识 |
| * @return {string} normalize结果 |
| */ |
| function normalize(id, baseId) { |
| if (!id) { |
| return ''; |
| } |
| |
| baseId = baseId || ''; |
| var idInfo = parseId(id); |
| if (!idInfo) { |
| return id; |
| } |
| |
| var resourceId = idInfo.res; |
| var moduleId = relative2absolute(idInfo.mod, baseId); |
| |
| each( |
| packagesIndex, |
| function (packageConf) { |
| var name = packageConf.name; |
| if (name === moduleId) { |
| moduleId = name + '/' + packageConf.main; |
| return false; |
| } |
| } |
| ); |
| |
| // 根据config中的map配置进行module id mapping |
| indexRetrieve( |
| baseId, |
| mappingIdIndex, |
| function (value) { |
| indexRetrieve( |
| moduleId, |
| value, |
| function (mdValue, mdKey) { |
| moduleId = moduleId.replace(mdKey, mdValue); |
| } |
| ); |
| } |
| ); |
| |
| if (resourceId) { |
| var mod = modIs(moduleId, MODULE_DEFINED) && actualGlobalRequire(moduleId); |
| resourceId = mod && mod.normalize |
| ? mod.normalize( |
| resourceId, |
| function (resId) { |
| return normalize(resId, baseId); |
| } |
| ) |
| : normalize(resourceId, baseId); |
| |
| moduleId += '!' + resourceId; |
| } |
| |
| return moduleId; |
| } |
| |
| /** |
| * 相对id转换成绝对id |
| * |
| * @inner |
| * @param {string} id 要转换的相对id |
| * @param {string} baseId 当前所在环境id |
| * @return {string} 绝对id |
| */ |
| function relative2absolute(id, baseId) { |
| if (id.indexOf('.') === 0) { |
| var basePath = baseId.split('/'); |
| var namePath = id.split('/'); |
| var baseLen = basePath.length - 1; |
| var nameLen = namePath.length; |
| var cutBaseTerms = 0; |
| var cutNameTerms = 0; |
| |
| /* eslint-disable block-scoped-var */ |
| pathLoop: for (var i = 0; i < nameLen; i++) { |
| switch (namePath[i]) { |
| case '..': |
| if (cutBaseTerms < baseLen) { |
| cutBaseTerms++; |
| cutNameTerms++; |
| } |
| else { |
| break pathLoop; |
| } |
| break; |
| case '.': |
| cutNameTerms++; |
| break; |
| default: |
| break pathLoop; |
| } |
| } |
| /* eslint-enable block-scoped-var */ |
| |
| basePath.length = baseLen - cutBaseTerms; |
| namePath = namePath.slice(cutNameTerms); |
| |
| return basePath.concat(namePath).join('/'); |
| } |
| |
| return id; |
| } |
| |
| /** |
| * 解析id,返回带有module和resource属性的Object |
| * |
| * @inner |
| * @param {string} id 标识 |
| * @return {Object} id解析结果对象 |
| */ |
| function parseId(id) { |
| var segs = id.split('!'); |
| |
| if (segs[0]) { |
| return { |
| mod: segs[0], |
| res: segs[1] |
| }; |
| } |
| } |
| |
| /** |
| * 将对象数据转换成数组,数组每项是带有k和v的Object |
| * |
| * @inner |
| * @param {Object} source 对象数据 |
| * @param {boolean} keyMatchable key是否允许被前缀匹配 |
| * @param {boolean} allowAsterisk 是否支持*匹配所有 |
| * @return {Array.<Object>} 对象转换数组 |
| */ |
| function kv2List(source, keyMatchable, allowAsterisk) { |
| var list = []; |
| for (var key in source) { |
| if (source.hasOwnProperty(key)) { |
| var item = { |
| k: key, |
| v: source[key] |
| }; |
| list.push(item); |
| |
| if (keyMatchable) { |
| item.reg = key === '*' && allowAsterisk |
| ? /^/ |
| : createPrefixRegexp(key); |
| } |
| } |
| } |
| |
| return list; |
| } |
| |
| // 感谢requirejs,通过currentlyAddingScript兼容老旧ie |
| // |
| // For some cache cases in IE 6-8, the script executes before the end |
| // of the appendChild execution, so to tie an anonymous define |
| // call to the module name (which is stored on the node), hold on |
| // to a reference to this node, but clear after the DOM insertion. |
| var currentlyAddingScript; |
| var interactiveScript; |
| |
| /** |
| * 获取当前script标签 |
| * 用于ie下define未指定module id时获取id |
| * |
| * @inner |
| * @return {HTMLScriptElement} 当前script标签 |
| */ |
| function getCurrentScript() { |
| if (currentlyAddingScript) { |
| return currentlyAddingScript; |
| } |
| else if ( |
| interactiveScript |
| && interactiveScript.readyState === 'interactive' |
| ) { |
| return interactiveScript; |
| } |
| |
| var scripts = document.getElementsByTagName('script'); |
| var scriptLen = scripts.length; |
| while (scriptLen--) { |
| var script = scripts[scriptLen]; |
| if (script.readyState === 'interactive') { |
| interactiveScript = script; |
| return script; |
| } |
| } |
| } |
| |
| var headElement = document.getElementsByTagName('head')[0]; |
| var baseElement = document.getElementsByTagName('base')[0]; |
| if (baseElement) { |
| headElement = baseElement.parentNode; |
| } |
| |
| function createScript(moduleId, onload) { |
| // 创建script标签 |
| // |
| // 这里不挂接onerror的错误处理 |
| // 因为高级浏览器在devtool的console面板会报错 |
| // 再throw一个Error多此一举了 |
| var script = document.createElement('script'); |
| script.setAttribute('data-require-id', moduleId); |
| script.src = toUrl(moduleId + '.js'); |
| script.async = true; |
| if (script.readyState) { |
| script.onreadystatechange = innerOnload; |
| } |
| else { |
| script.onload = innerOnload; |
| } |
| |
| function innerOnload() { |
| var readyState = script.readyState; |
| if ( |
| typeof readyState === 'undefined' |
| || /^(loaded|complete)$/.test(readyState) |
| ) { |
| script.onload = script.onreadystatechange = null; |
| script = null; |
| |
| onload(); |
| } |
| } |
| currentlyAddingScript = script; |
| |
| // If BASE tag is in play, using appendChild is a problem for IE6. |
| // See: http://dev.jquery.com/ticket/2709 |
| baseElement |
| ? headElement.insertBefore(script, baseElement) |
| : headElement.appendChild(script); |
| |
| currentlyAddingScript = null; |
| } |
| |
| /** |
| * 创建id前缀匹配的正则对象 |
| * |
| * @inner |
| * @param {string} prefix id前缀 |
| * @return {RegExp} 前缀匹配的正则对象 |
| */ |
| function createPrefixRegexp(prefix) { |
| return new RegExp('^' + prefix + '(/|$)'); |
| } |
| |
| /** |
| * 循环遍历数组集合 |
| * |
| * @inner |
| * @param {Array} source 数组源 |
| * @param {function(Array,Number):boolean} iterator 遍历函数 |
| */ |
| function each(source, iterator) { |
| if (source instanceof Array) { |
| for (var i = 0, len = source.length; i < len; i++) { |
| if (iterator(source[i], i) === false) { |
| break; |
| } |
| } |
| } |
| } |
| |
| /** |
| * 根据元素的k或name项进行数组字符数逆序的排序函数 |
| * |
| * @inner |
| * @param {Object} a 要比较的对象a |
| * @param {Object} b 要比较的对象b |
| * @return {number} 比较结果 |
| */ |
| function descSorterByKOrName(a, b) { |
| var aValue = a.k || a.name; |
| var bValue = b.k || b.name; |
| |
| if (bValue === '*') { |
| return -1; |
| } |
| |
| if (aValue === '*') { |
| return 1; |
| } |
| |
| return bValue.length - aValue.length; |
| } |
| |
| // 暴露全局对象 |
| if (!define) { |
| define = globalDefine; |
| |
| // 可能碰到其他形式的loader,所以,不要覆盖人家 |
| if (!require) { |
| require = globalRequire; |
| } |
| |
| // 如果存在其他版本的esl,在define那里就判断过了,不会进入这个分支 |
| // 所以这里就不判断了,直接写 |
| esl = globalRequire; |
| } |
| })(this); |
| define('echarts', ['echarts/echarts'], function (main) {return main;}); |
| define('echarts/echarts', [ |
| 'require', |
| './config', |
| 'zrender/tool/util', |
| 'zrender/tool/event', |
| 'zrender/tool/env', |
| 'zrender', |
| 'zrender/config', |
| './chart/island', |
| './component/toolbox', |
| './component', |
| './component/title', |
| './component/tooltip', |
| './component/legend', |
| './util/ecData', |
| './chart', |
| 'zrender/tool/color', |
| './component/timeline', |
| 'zrender/shape/Image', |
| 'zrender/loadingEffect/Bar', |
| 'zrender/loadingEffect/Bubble', |
| 'zrender/loadingEffect/DynamicLine', |
| 'zrender/loadingEffect/Ring', |
| 'zrender/loadingEffect/Spin', |
| 'zrender/loadingEffect/Whirling', |
| './theme/macarons', |
| './theme/infographic' |
| ], function (require) { |
| var ecConfig = require('./config'); |
| var zrUtil = require('zrender/tool/util'); |
| var zrEvent = require('zrender/tool/event'); |
| var self = {}; |
| var _canvasSupported = require('zrender/tool/env').canvasSupported; |
| var _idBase = new Date() - 0; |
| var _instances = {}; |
| var DOM_ATTRIBUTE_KEY = '_echarts_instance_'; |
| self.version = '2.2.6'; |
| self.dependencies = { zrender: '2.1.1' }; |
| self.init = function (dom, theme) { |
| var zrender = require('zrender'); |
| if (zrender.version.replace('.', '') - 0 < self.dependencies.zrender.replace('.', '') - 0) { |
| console.error('ZRender ' + zrender.version + ' is too old for ECharts ' + self.version + '. Current version need ZRender ' + self.dependencies.zrender + '+'); |
| } |
| dom = dom instanceof Array ? dom[0] : dom; |
| var key = dom.getAttribute(DOM_ATTRIBUTE_KEY); |
| if (!key) { |
| key = _idBase++; |
| dom.setAttribute(DOM_ATTRIBUTE_KEY, key); |
| } |
| if (_instances[key]) { |
| _instances[key].dispose(); |
| } |
| _instances[key] = new Echarts(dom); |
| _instances[key].id = key; |
| _instances[key].canvasSupported = _canvasSupported; |
| _instances[key].setTheme(theme); |
| return _instances[key]; |
| }; |
| self.getInstanceById = function (key) { |
| return _instances[key]; |
| }; |
| function MessageCenter() { |
| zrEvent.Dispatcher.call(this); |
| } |
| zrUtil.merge(MessageCenter.prototype, zrEvent.Dispatcher.prototype, true); |
| function Echarts(dom) { |
| dom.innerHTML = ''; |
| this._themeConfig = {}; |
| this.dom = dom; |
| this._connected = false; |
| this._status = { |
| dragIn: false, |
| dragOut: false, |
| needRefresh: false |
| }; |
| this._curEventType = false; |
| this._chartList = []; |
| this._messageCenter = new MessageCenter(); |
| this._messageCenterOutSide = new MessageCenter(); |
| this.resize = this.resize(); |
| this._init(); |
| } |
| var ZR_EVENT = require('zrender/config').EVENT; |
| var ZR_EVENT_LISTENS = [ |
| 'CLICK', |
| 'DBLCLICK', |
| 'MOUSEOVER', |
| 'MOUSEOUT', |
| 'DRAGSTART', |
| 'DRAGEND', |
| 'DRAGENTER', |
| 'DRAGOVER', |
| 'DRAGLEAVE', |
| 'DROP' |
| ]; |
| function callChartListMethodReverse(ecInstance, methodName, arg0, arg1, arg2) { |
| var chartList = ecInstance._chartList; |
| var len = chartList.length; |
| while (len--) { |
| var chart = chartList[len]; |
| if (typeof chart[methodName] === 'function') { |
| chart[methodName](arg0, arg1, arg2); |
| } |
| } |
| } |
| Echarts.prototype = { |
| _init: function () { |
| var self = this; |
| var _zr = require('zrender').init(this.dom); |
| this._zr = _zr; |
| this._messageCenter.dispatch = function (type, event, eventPackage, that) { |
| eventPackage = eventPackage || {}; |
| eventPackage.type = type; |
| eventPackage.event = event; |
| self._messageCenter.dispatchWithContext(type, eventPackage, that); |
| self._messageCenterOutSide.dispatchWithContext(type, eventPackage, that); |
| }; |
| this._onevent = function (param) { |
| return self.__onevent(param); |
| }; |
| for (var e in ecConfig.EVENT) { |
| if (e != 'CLICK' && e != 'DBLCLICK' && e != 'HOVER' && e != 'MOUSEOUT' && e != 'MAP_ROAM') { |
| this._messageCenter.bind(ecConfig.EVENT[e], this._onevent, this); |
| } |
| } |
| var eventBehaviors = {}; |
| this._onzrevent = function (param) { |
| return self[eventBehaviors[param.type]](param); |
| }; |
| for (var i = 0, len = ZR_EVENT_LISTENS.length; i < len; i++) { |
| var eventName = ZR_EVENT_LISTENS[i]; |
| var eventValue = ZR_EVENT[eventName]; |
| eventBehaviors[eventValue] = '_on' + eventName.toLowerCase(); |
| _zr.on(eventValue, this._onzrevent); |
| } |
| this.chart = {}; |
| this.component = {}; |
| var Island = require('./chart/island'); |
| this._island = new Island(this._themeConfig, this._messageCenter, _zr, {}, this); |
| this.chart.island = this._island; |
| var Toolbox = require('./component/toolbox'); |
| this._toolbox = new Toolbox(this._themeConfig, this._messageCenter, _zr, {}, this); |
| this.component.toolbox = this._toolbox; |
| var componentLibrary = require('./component'); |
| componentLibrary.define('title', require('./component/title')); |
| componentLibrary.define('tooltip', require('./component/tooltip')); |
| componentLibrary.define('legend', require('./component/legend')); |
| if (_zr.getWidth() === 0 || _zr.getHeight() === 0) { |
| console.error('Dom’s width & height should be ready before init.'); |
| } |
| }, |
| __onevent: function (param) { |
| param.__echartsId = param.__echartsId || this.id; |
| var fromMyself = param.__echartsId === this.id; |
| if (!this._curEventType) { |
| this._curEventType = param.type; |
| } |
| switch (param.type) { |
| case ecConfig.EVENT.LEGEND_SELECTED: |
| this._onlegendSelected(param); |
| break; |
| case ecConfig.EVENT.DATA_ZOOM: |
| if (!fromMyself) { |
| var dz = this.component.dataZoom; |
| if (dz) { |
| dz.silence(true); |
| dz.absoluteZoom(param.zoom); |
| dz.silence(false); |
| } |
| } |
| this._ondataZoom(param); |
| break; |
| case ecConfig.EVENT.DATA_RANGE: |
| fromMyself && this._ondataRange(param); |
| break; |
| case ecConfig.EVENT.MAGIC_TYPE_CHANGED: |
| if (!fromMyself) { |
| var tb = this.component.toolbox; |
| if (tb) { |
| tb.silence(true); |
| tb.setMagicType(param.magicType); |
| tb.silence(false); |
| } |
| } |
| this._onmagicTypeChanged(param); |
| break; |
| case ecConfig.EVENT.DATA_VIEW_CHANGED: |
| fromMyself && this._ondataViewChanged(param); |
| break; |
| case ecConfig.EVENT.TOOLTIP_HOVER: |
| fromMyself && this._tooltipHover(param); |
| break; |
| case ecConfig.EVENT.RESTORE: |
| this._onrestore(); |
| break; |
| case ecConfig.EVENT.REFRESH: |
| fromMyself && this._onrefresh(param); |
| break; |
| case ecConfig.EVENT.TOOLTIP_IN_GRID: |
| case ecConfig.EVENT.TOOLTIP_OUT_GRID: |
| if (!fromMyself) { |
| var grid = this.component.grid; |
| if (grid) { |
| this._zr.trigger('mousemove', { |
| connectTrigger: true, |
| zrenderX: grid.getX() + param.x * grid.getWidth(), |
| zrenderY: grid.getY() + param.y * grid.getHeight() |
| }); |
| } |
| } else if (this._connected) { |
| var grid = this.component.grid; |
| if (grid) { |
| param.x = (param.event.zrenderX - grid.getX()) / grid.getWidth(); |
| param.y = (param.event.zrenderY - grid.getY()) / grid.getHeight(); |
| } |
| } |
| break; |
| } |
| if (this._connected && fromMyself && this._curEventType === param.type) { |
| for (var c in this._connected) { |
| this._connected[c].connectedEventHandler(param); |
| } |
| this._curEventType = null; |
| } |
| if (!fromMyself || !this._connected && fromMyself) { |
| this._curEventType = null; |
| } |
| }, |
| _onclick: function (param) { |
| callChartListMethodReverse(this, 'onclick', param); |
| if (param.target) { |
| var ecData = this._eventPackage(param.target); |
| if (ecData && ecData.seriesIndex != null) { |
| this._messageCenter.dispatch(ecConfig.EVENT.CLICK, param.event, ecData, this); |
| } |
| } |
| }, |
| _ondblclick: function (param) { |
| callChartListMethodReverse(this, 'ondblclick', param); |
| if (param.target) { |
| var ecData = this._eventPackage(param.target); |
| if (ecData && ecData.seriesIndex != null) { |
| this._messageCenter.dispatch(ecConfig.EVENT.DBLCLICK, param.event, ecData, this); |
| } |
| } |
| }, |
| _onmouseover: function (param) { |
| if (param.target) { |
| var ecData = this._eventPackage(param.target); |
| if (ecData && ecData.seriesIndex != null) { |
| this._messageCenter.dispatch(ecConfig.EVENT.HOVER, param.event, ecData, this); |
| } |
| } |
| }, |
| _onmouseout: function (param) { |
| if (param.target) { |
| var ecData = this._eventPackage(param.target); |
| if (ecData && ecData.seriesIndex != null) { |
| this._messageCenter.dispatch(ecConfig.EVENT.MOUSEOUT, param.event, ecData, this); |
| } |
| } |
| }, |
| _ondragstart: function (param) { |
| this._status = { |
| dragIn: false, |
| dragOut: false, |
| needRefresh: false |
| }; |
| callChartListMethodReverse(this, 'ondragstart', param); |
| }, |
| _ondragenter: function (param) { |
| callChartListMethodReverse(this, 'ondragenter', param); |
| }, |
| _ondragover: function (param) { |
| callChartListMethodReverse(this, 'ondragover', param); |
| }, |
| _ondragleave: function (param) { |
| callChartListMethodReverse(this, 'ondragleave', param); |
| }, |
| _ondrop: function (param) { |
| callChartListMethodReverse(this, 'ondrop', param, this._status); |
| this._island.ondrop(param, this._status); |
| }, |
| _ondragend: function (param) { |
| callChartListMethodReverse(this, 'ondragend', param, this._status); |
| this._timeline && this._timeline.ondragend(param, this._status); |
| this._island.ondragend(param, this._status); |
| if (this._status.needRefresh) { |
| this._syncBackupData(this._option); |
| var messageCenter = this._messageCenter; |
| messageCenter.dispatch(ecConfig.EVENT.DATA_CHANGED, param.event, this._eventPackage(param.target), this); |
| messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this); |
| } |
| }, |
| _onlegendSelected: function (param) { |
| this._status.needRefresh = false; |
| callChartListMethodReverse(this, 'onlegendSelected', param, this._status); |
| if (this._status.needRefresh) { |
| this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this); |
| } |
| }, |
| _ondataZoom: function (param) { |
| this._status.needRefresh = false; |
| callChartListMethodReverse(this, 'ondataZoom', param, this._status); |
| if (this._status.needRefresh) { |
| this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this); |
| } |
| }, |
| _ondataRange: function (param) { |
| this._clearEffect(); |
| this._status.needRefresh = false; |
| callChartListMethodReverse(this, 'ondataRange', param, this._status); |
| if (this._status.needRefresh) { |
| this._zr.refreshNextFrame(); |
| } |
| }, |
| _onmagicTypeChanged: function () { |
| this._clearEffect(); |
| this._render(this._toolbox.getMagicOption()); |
| }, |
| _ondataViewChanged: function (param) { |
| this._syncBackupData(param.option); |
| this._messageCenter.dispatch(ecConfig.EVENT.DATA_CHANGED, null, param, this); |
| this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this); |
| }, |
| _tooltipHover: function (param) { |
| var tipShape = []; |
| callChartListMethodReverse(this, 'ontooltipHover', param, tipShape); |
| }, |
| _onrestore: function () { |
| this.restore(); |
| }, |
| _onrefresh: function (param) { |
| this._refreshInside = true; |
| this.refresh(param); |
| this._refreshInside = false; |
| }, |
| _syncBackupData: function (curOption) { |
| this.component.dataZoom && this.component.dataZoom.syncBackupData(curOption); |
| }, |
| _eventPackage: function (target) { |
| if (target) { |
| var ecData = require('./util/ecData'); |
| var seriesIndex = ecData.get(target, 'seriesIndex'); |
| var dataIndex = ecData.get(target, 'dataIndex'); |
| dataIndex = seriesIndex != -1 && this.component.dataZoom ? this.component.dataZoom.getRealDataIndex(seriesIndex, dataIndex) : dataIndex; |
| return { |
| seriesIndex: seriesIndex, |
| seriesName: (ecData.get(target, 'series') || {}).name, |
| dataIndex: dataIndex, |
| data: ecData.get(target, 'data'), |
| name: ecData.get(target, 'name'), |
| value: ecData.get(target, 'value'), |
| special: ecData.get(target, 'special') |
| }; |
| } |
| return; |
| }, |
| _noDataCheck: function (magicOption) { |
| var series = magicOption.series; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].type == ecConfig.CHART_TYPE_MAP || series[i].data && series[i].data.length > 0 || series[i].markPoint && series[i].markPoint.data && series[i].markPoint.data.length > 0 || series[i].markLine && series[i].markLine.data && series[i].markLine.data.length > 0 || series[i].nodes && series[i].nodes.length > 0 || series[i].links && series[i].links.length > 0 || series[i].matrix && series[i].matrix.length > 0 || series[i].eventList && series[i].eventList.length > 0) { |
| return false; |
| } |
| } |
| var loadOption = this._option && this._option.noDataLoadingOption || this._themeConfig.noDataLoadingOption || ecConfig.noDataLoadingOption || { |
| text: this._option && this._option.noDataText || this._themeConfig.noDataText || ecConfig.noDataText, |
| effect: this._option && this._option.noDataEffect || this._themeConfig.noDataEffect || ecConfig.noDataEffect |
| }; |
| this.clear(); |
| this.showLoading(loadOption); |
| return true; |
| }, |
| _render: function (magicOption) { |
| this._mergeGlobalConifg(magicOption); |
| if (this._noDataCheck(magicOption)) { |
| return; |
| } |
| var bgColor = magicOption.backgroundColor; |
| if (bgColor) { |
| if (!_canvasSupported && bgColor.indexOf('rgba') != -1) { |
| var cList = bgColor.split(','); |
| this.dom.style.filter = 'alpha(opacity=' + cList[3].substring(0, cList[3].lastIndexOf(')')) * 100 + ')'; |
| cList.length = 3; |
| cList[0] = cList[0].replace('a', ''); |
| this.dom.style.backgroundColor = cList.join(',') + ')'; |
| } else { |
| this.dom.style.backgroundColor = bgColor; |
| } |
| } |
| this._zr.clearAnimation(); |
| this._chartList = []; |
| var chartLibrary = require('./chart'); |
| var componentLibrary = require('./component'); |
| if (magicOption.xAxis || magicOption.yAxis) { |
| magicOption.grid = magicOption.grid || {}; |
| magicOption.dataZoom = magicOption.dataZoom || {}; |
| } |
| var componentList = [ |
| 'title', |
| 'legend', |
| 'tooltip', |
| 'dataRange', |
| 'roamController', |
| 'grid', |
| 'dataZoom', |
| 'xAxis', |
| 'yAxis', |
| 'polar' |
| ]; |
| var ComponentClass; |
| var componentType; |
| var component; |
| for (var i = 0, l = componentList.length; i < l; i++) { |
| componentType = componentList[i]; |
| component = this.component[componentType]; |
| if (magicOption[componentType]) { |
| if (component) { |
| component.refresh && component.refresh(magicOption); |
| } else { |
| ComponentClass = componentLibrary.get(/^[xy]Axis$/.test(componentType) ? 'axis' : componentType); |
| component = new ComponentClass(this._themeConfig, this._messageCenter, this._zr, magicOption, this, componentType); |
| this.component[componentType] = component; |
| } |
| this._chartList.push(component); |
| } else if (component) { |
| component.dispose(); |
| this.component[componentType] = null; |
| delete this.component[componentType]; |
| } |
| } |
| var ChartClass; |
| var chartType; |
| var chart; |
| var chartMap = {}; |
| for (var i = 0, l = magicOption.series.length; i < l; i++) { |
| chartType = magicOption.series[i].type; |
| if (!chartType) { |
| console.error('series[' + i + '] chart type has not been defined.'); |
| continue; |
| } |
| if (!chartMap[chartType]) { |
| chartMap[chartType] = true; |
| ChartClass = chartLibrary.get(chartType); |
| if (ChartClass) { |
| if (this.chart[chartType]) { |
| chart = this.chart[chartType]; |
| chart.refresh(magicOption); |
| } else { |
| chart = new ChartClass(this._themeConfig, this._messageCenter, this._zr, magicOption, this); |
| } |
| this._chartList.push(chart); |
| this.chart[chartType] = chart; |
| } else { |
| console.error(chartType + ' has not been required.'); |
| } |
| } |
| } |
| for (chartType in this.chart) { |
| if (chartType != ecConfig.CHART_TYPE_ISLAND && !chartMap[chartType]) { |
| this.chart[chartType].dispose(); |
| this.chart[chartType] = null; |
| delete this.chart[chartType]; |
| } |
| } |
| this.component.grid && this.component.grid.refixAxisShape(this.component); |
| this._island.refresh(magicOption); |
| this._toolbox.refresh(magicOption); |
| magicOption.animation && !magicOption.renderAsImage ? this._zr.refresh() : this._zr.render(); |
| var imgId = 'IMG' + this.id; |
| var img = document.getElementById(imgId); |
| if (magicOption.renderAsImage && _canvasSupported) { |
| if (img) { |
| img.src = this.getDataURL(magicOption.renderAsImage); |
| } else { |
| img = this.getImage(magicOption.renderAsImage); |
| img.id = imgId; |
| img.style.position = 'absolute'; |
| img.style.left = 0; |
| img.style.top = 0; |
| this.dom.firstChild.appendChild(img); |
| } |
| this.un(); |
| this._zr.un(); |
| this._disposeChartList(); |
| this._zr.clear(); |
| } else if (img) { |
| img.parentNode.removeChild(img); |
| } |
| img = null; |
| this._option = magicOption; |
| }, |
| restore: function () { |
| this._clearEffect(); |
| this._option = zrUtil.clone(this._optionRestore); |
| this._disposeChartList(); |
| this._island.clear(); |
| this._toolbox.reset(this._option, true); |
| this._render(this._option); |
| }, |
| refresh: function (param) { |
| this._clearEffect(); |
| param = param || {}; |
| var magicOption = param.option; |
| if (!this._refreshInside && magicOption) { |
| magicOption = this.getOption(); |
| zrUtil.merge(magicOption, param.option, true); |
| zrUtil.merge(this._optionRestore, param.option, true); |
| this._toolbox.reset(magicOption); |
| } |
| this._island.refresh(magicOption); |
| this._toolbox.refresh(magicOption); |
| this._zr.clearAnimation(); |
| for (var i = 0, l = this._chartList.length; i < l; i++) { |
| this._chartList[i].refresh && this._chartList[i].refresh(magicOption); |
| } |
| this.component.grid && this.component.grid.refixAxisShape(this.component); |
| this._zr.refresh(); |
| }, |
| _disposeChartList: function () { |
| this._clearEffect(); |
| this._zr.clearAnimation(); |
| var len = this._chartList.length; |
| while (len--) { |
| var chart = this._chartList[len]; |
| if (chart) { |
| var chartType = chart.type; |
| this.chart[chartType] && delete this.chart[chartType]; |
| this.component[chartType] && delete this.component[chartType]; |
| chart.dispose && chart.dispose(); |
| } |
| } |
| this._chartList = []; |
| }, |
| _mergeGlobalConifg: function (magicOption) { |
| var mergeList = [ |
| 'backgroundColor', |
| 'calculable', |
| 'calculableColor', |
| 'calculableHolderColor', |
| 'nameConnector', |
| 'valueConnector', |
| 'animation', |
| 'animationThreshold', |
| 'animationDuration', |
| 'animationDurationUpdate', |
| 'animationEasing', |
| 'addDataAnimation', |
| 'symbolList', |
| 'DRAG_ENABLE_TIME' |
| ]; |
| var len = mergeList.length; |
| while (len--) { |
| var mergeItem = mergeList[len]; |
| if (magicOption[mergeItem] == null) { |
| magicOption[mergeItem] = this._themeConfig[mergeItem] != null ? this._themeConfig[mergeItem] : ecConfig[mergeItem]; |
| } |
| } |
| var themeColor = magicOption.color; |
| if (!(themeColor && themeColor.length)) { |
| themeColor = this._themeConfig.color || ecConfig.color; |
| } |
| this._zr.getColor = function (idx) { |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getColor(idx, themeColor); |
| }; |
| if (!_canvasSupported) { |
| magicOption.animation = false; |
| magicOption.addDataAnimation = false; |
| } |
| }, |
| setOption: function (option, notMerge) { |
| if (!option.timeline) { |
| return this._setOption(option, notMerge); |
| } else { |
| return this._setTimelineOption(option); |
| } |
| }, |
| _setOption: function (option, notMerge, keepTimeLine) { |
| if (!notMerge && this._option) { |
| this._option = zrUtil.merge(this.getOption(), zrUtil.clone(option), true); |
| } else { |
| this._option = zrUtil.clone(option); |
| !keepTimeLine && this._timeline && this._timeline.dispose(); |
| } |
| this._optionRestore = zrUtil.clone(this._option); |
| if (!this._option.series || this._option.series.length === 0) { |
| this._zr.clear(); |
| return; |
| } |
| if (this.component.dataZoom && (this._option.dataZoom || this._option.toolbox && this._option.toolbox.feature && this._option.toolbox.feature.dataZoom && this._option.toolbox.feature.dataZoom.show)) { |
| this.component.dataZoom.syncOption(this._option); |
| } |
| this._toolbox.reset(this._option); |
| this._render(this._option); |
| return this; |
| }, |
| getOption: function () { |
| var magicOption = zrUtil.clone(this._option); |
| var self = this; |
| function restoreOption(prop) { |
| var restoreSource = self._optionRestore[prop]; |
| if (restoreSource) { |
| if (restoreSource instanceof Array) { |
| var len = restoreSource.length; |
| while (len--) { |
| magicOption[prop][len].data = zrUtil.clone(restoreSource[len].data); |
| } |
| } else { |
| magicOption[prop].data = zrUtil.clone(restoreSource.data); |
| } |
| } |
| } |
| restoreOption('xAxis'); |
| restoreOption('yAxis'); |
| restoreOption('series'); |
| return magicOption; |
| }, |
| setSeries: function (series, notMerge) { |
| if (!notMerge) { |
| this.setOption({ series: series }); |
| } else { |
| this._option.series = series; |
| this.setOption(this._option, notMerge); |
| } |
| return this; |
| }, |
| getSeries: function () { |
| return this.getOption().series; |
| }, |
| _setTimelineOption: function (option) { |
| this._timeline && this._timeline.dispose(); |
| var Timeline = require('./component/timeline'); |
| var timeline = new Timeline(this._themeConfig, this._messageCenter, this._zr, option, this); |
| this._timeline = timeline; |
| this.component.timeline = this._timeline; |
| return this; |
| }, |
| addData: function (seriesIdx, data, isHead, dataGrow, additionData) { |
| var params = seriesIdx instanceof Array ? seriesIdx : [[ |
| seriesIdx, |
| data, |
| isHead, |
| dataGrow, |
| additionData |
| ]]; |
| var magicOption = this.getOption(); |
| var optionRestore = this._optionRestore; |
| var self = this; |
| for (var i = 0, l = params.length; i < l; i++) { |
| seriesIdx = params[i][0]; |
| data = params[i][1]; |
| isHead = params[i][2]; |
| dataGrow = params[i][3]; |
| additionData = params[i][4]; |
| var seriesItem = optionRestore.series[seriesIdx]; |
| var inMethod = isHead ? 'unshift' : 'push'; |
| var outMethod = isHead ? 'pop' : 'shift'; |
| if (seriesItem) { |
| var seriesItemData = seriesItem.data; |
| var mSeriesItemData = magicOption.series[seriesIdx].data; |
| seriesItemData[inMethod](data); |
| mSeriesItemData[inMethod](data); |
| if (!dataGrow) { |
| seriesItemData[outMethod](); |
| data = mSeriesItemData[outMethod](); |
| } |
| if (additionData != null) { |
| var legend; |
| var legendData; |
| if (seriesItem.type === ecConfig.CHART_TYPE_PIE && (legend = optionRestore.legend) && (legendData = legend.data)) { |
| var mLegendData = magicOption.legend.data; |
| legendData[inMethod](additionData); |
| mLegendData[inMethod](additionData); |
| if (!dataGrow) { |
| var legendDataIdx = zrUtil.indexOf(legendData, data.name); |
| legendDataIdx != -1 && legendData.splice(legendDataIdx, 1); |
| legendDataIdx = zrUtil.indexOf(mLegendData, data.name); |
| legendDataIdx != -1 && mLegendData.splice(legendDataIdx, 1); |
| } |
| } else if (optionRestore.xAxis != null && optionRestore.yAxis != null) { |
| var axisData; |
| var mAxisData; |
| var axisIdx = seriesItem.xAxisIndex || 0; |
| if (optionRestore.xAxis[axisIdx].type == null || optionRestore.xAxis[axisIdx].type === 'category') { |
| axisData = optionRestore.xAxis[axisIdx].data; |
| mAxisData = magicOption.xAxis[axisIdx].data; |
| axisData[inMethod](additionData); |
| mAxisData[inMethod](additionData); |
| if (!dataGrow) { |
| axisData[outMethod](); |
| mAxisData[outMethod](); |
| } |
| } |
| axisIdx = seriesItem.yAxisIndex || 0; |
| if (optionRestore.yAxis[axisIdx].type === 'category') { |
| axisData = optionRestore.yAxis[axisIdx].data; |
| mAxisData = magicOption.yAxis[axisIdx].data; |
| axisData[inMethod](additionData); |
| mAxisData[inMethod](additionData); |
| if (!dataGrow) { |
| axisData[outMethod](); |
| mAxisData[outMethod](); |
| } |
| } |
| } |
| } |
| this._option.series[seriesIdx].data = magicOption.series[seriesIdx].data; |
| } |
| } |
| this._zr.clearAnimation(); |
| var chartList = this._chartList; |
| var chartAnimationCount = 0; |
| var chartAnimationDone = function () { |
| chartAnimationCount--; |
| if (chartAnimationCount === 0) { |
| animationDone(); |
| } |
| }; |
| for (var i = 0, l = chartList.length; i < l; i++) { |
| if (magicOption.addDataAnimation && chartList[i].addDataAnimation) { |
| chartAnimationCount++; |
| chartList[i].addDataAnimation(params, chartAnimationDone); |
| } |
| } |
| this.component.dataZoom && this.component.dataZoom.syncOption(magicOption); |
| this._option = magicOption; |
| function animationDone() { |
| if (!self._zr) { |
| return; |
| } |
| self._zr.clearAnimation(); |
| for (var i = 0, l = chartList.length; i < l; i++) { |
| chartList[i].motionlessOnce = magicOption.addDataAnimation && chartList[i].addDataAnimation; |
| } |
| self._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, { option: magicOption }, self); |
| } |
| if (!magicOption.addDataAnimation) { |
| setTimeout(animationDone, 0); |
| } |
| return this; |
| }, |
| addMarkPoint: function (seriesIdx, markData) { |
| return this._addMark(seriesIdx, markData, 'markPoint'); |
| }, |
| addMarkLine: function (seriesIdx, markData) { |
| return this._addMark(seriesIdx, markData, 'markLine'); |
| }, |
| _addMark: function (seriesIdx, markData, markType) { |
| var series = this._option.series; |
| var seriesItem; |
| if (series && (seriesItem = series[seriesIdx])) { |
| var seriesR = this._optionRestore.series; |
| var seriesRItem = seriesR[seriesIdx]; |
| var markOpt = seriesItem[markType]; |
| var markOptR = seriesRItem[markType]; |
| markOpt = seriesItem[markType] = markOpt || { data: [] }; |
| markOptR = seriesRItem[markType] = markOptR || { data: [] }; |
| for (var key in markData) { |
| if (key === 'data') { |
| markOpt.data = markOpt.data.concat(markData.data); |
| markOptR.data = markOptR.data.concat(markData.data); |
| } else if (typeof markData[key] != 'object' || markOpt[key] == null) { |
| markOpt[key] = markOptR[key] = markData[key]; |
| } else { |
| zrUtil.merge(markOpt[key], markData[key], true); |
| zrUtil.merge(markOptR[key], markData[key], true); |
| } |
| } |
| var chart = this.chart[seriesItem.type]; |
| chart && chart.addMark(seriesIdx, markData, markType); |
| } |
| return this; |
| }, |
| delMarkPoint: function (seriesIdx, markName) { |
| return this._delMark(seriesIdx, markName, 'markPoint'); |
| }, |
| delMarkLine: function (seriesIdx, markName) { |
| return this._delMark(seriesIdx, markName, 'markLine'); |
| }, |
| _delMark: function (seriesIdx, markName, markType) { |
| var series = this._option.series; |
| var seriesItem; |
| var mark; |
| var dataArray; |
| if (!(series && (seriesItem = series[seriesIdx]) && (mark = seriesItem[markType]) && (dataArray = mark.data))) { |
| return this; |
| } |
| markName = markName.split(' > '); |
| var targetIndex = -1; |
| for (var i = 0, l = dataArray.length; i < l; i++) { |
| var dataItem = dataArray[i]; |
| if (dataItem instanceof Array) { |
| if (dataItem[0].name === markName[0] && dataItem[1].name === markName[1]) { |
| targetIndex = i; |
| break; |
| } |
| } else if (dataItem.name === markName[0]) { |
| targetIndex = i; |
| break; |
| } |
| } |
| if (targetIndex > -1) { |
| dataArray.splice(targetIndex, 1); |
| this._optionRestore.series[seriesIdx][markType].data.splice(targetIndex, 1); |
| var chart = this.chart[seriesItem.type]; |
| chart && chart.delMark(seriesIdx, markName.join(' > '), markType); |
| } |
| return this; |
| }, |
| getDom: function () { |
| return this.dom; |
| }, |
| getZrender: function () { |
| return this._zr; |
| }, |
| getDataURL: function (imgType) { |
| if (!_canvasSupported) { |
| return ''; |
| } |
| if (this._chartList.length === 0) { |
| var imgId = 'IMG' + this.id; |
| var img = document.getElementById(imgId); |
| if (img) { |
| return img.src; |
| } |
| } |
| var tooltip = this.component.tooltip; |
| tooltip && tooltip.hideTip(); |
| switch (imgType) { |
| case 'jpeg': |
| break; |
| default: |
| imgType = 'png'; |
| } |
| var bgColor = this._option.backgroundColor; |
| if (bgColor && bgColor.replace(' ', '') === 'rgba(0,0,0,0)') { |
| bgColor = '#fff'; |
| } |
| return this._zr.toDataURL('image/' + imgType, bgColor); |
| }, |
| getImage: function (imgType) { |
| var title = this._optionRestore.title; |
| var imgDom = document.createElement('img'); |
| imgDom.src = this.getDataURL(imgType); |
| imgDom.title = title && title.text || 'ECharts'; |
| return imgDom; |
| }, |
| getConnectedDataURL: function (imgType) { |
| if (!this.isConnected()) { |
| return this.getDataURL(imgType); |
| } |
| var tempDom = this.dom; |
| var imgList = { |
| 'self': { |
| img: this.getDataURL(imgType), |
| left: tempDom.offsetLeft, |
| top: tempDom.offsetTop, |
| right: tempDom.offsetLeft + tempDom.offsetWidth, |
| bottom: tempDom.offsetTop + tempDom.offsetHeight |
| } |
| }; |
| var minLeft = imgList.self.left; |
| var minTop = imgList.self.top; |
| var maxRight = imgList.self.right; |
| var maxBottom = imgList.self.bottom; |
| for (var c in this._connected) { |
| tempDom = this._connected[c].getDom(); |
| imgList[c] = { |
| img: this._connected[c].getDataURL(imgType), |
| left: tempDom.offsetLeft, |
| top: tempDom.offsetTop, |
| right: tempDom.offsetLeft + tempDom.offsetWidth, |
| bottom: tempDom.offsetTop + tempDom.offsetHeight |
| }; |
| minLeft = Math.min(minLeft, imgList[c].left); |
| minTop = Math.min(minTop, imgList[c].top); |
| maxRight = Math.max(maxRight, imgList[c].right); |
| maxBottom = Math.max(maxBottom, imgList[c].bottom); |
| } |
| var zrDom = document.createElement('div'); |
| zrDom.style.position = 'absolute'; |
| zrDom.style.left = '-4000px'; |
| zrDom.style.width = maxRight - minLeft + 'px'; |
| zrDom.style.height = maxBottom - minTop + 'px'; |
| document.body.appendChild(zrDom); |
| var zrImg = require('zrender').init(zrDom); |
| var ImageShape = require('zrender/shape/Image'); |
| for (var c in imgList) { |
| zrImg.addShape(new ImageShape({ |
| style: { |
| x: imgList[c].left - minLeft, |
| y: imgList[c].top - minTop, |
| image: imgList[c].img |
| } |
| })); |
| } |
| zrImg.render(); |
| var bgColor = this._option.backgroundColor; |
| if (bgColor && bgColor.replace(/ /g, '') === 'rgba(0,0,0,0)') { |
| bgColor = '#fff'; |
| } |
| var image = zrImg.toDataURL('image/png', bgColor); |
| setTimeout(function () { |
| zrImg.dispose(); |
| zrDom.parentNode.removeChild(zrDom); |
| zrDom = null; |
| }, 100); |
| return image; |
| }, |
| getConnectedImage: function (imgType) { |
| var title = this._optionRestore.title; |
| var imgDom = document.createElement('img'); |
| imgDom.src = this.getConnectedDataURL(imgType); |
| imgDom.title = title && title.text || 'ECharts'; |
| return imgDom; |
| }, |
| on: function (eventName, eventListener) { |
| this._messageCenterOutSide.bind(eventName, eventListener, this); |
| return this; |
| }, |
| un: function (eventName, eventListener) { |
| this._messageCenterOutSide.unbind(eventName, eventListener); |
| return this; |
| }, |
| connect: function (connectTarget) { |
| if (!connectTarget) { |
| return this; |
| } |
| if (!this._connected) { |
| this._connected = {}; |
| } |
| if (connectTarget instanceof Array) { |
| for (var i = 0, l = connectTarget.length; i < l; i++) { |
| this._connected[connectTarget[i].id] = connectTarget[i]; |
| } |
| } else { |
| this._connected[connectTarget.id] = connectTarget; |
| } |
| return this; |
| }, |
| disConnect: function (connectTarget) { |
| if (!connectTarget || !this._connected) { |
| return this; |
| } |
| if (connectTarget instanceof Array) { |
| for (var i = 0, l = connectTarget.length; i < l; i++) { |
| delete this._connected[connectTarget[i].id]; |
| } |
| } else { |
| delete this._connected[connectTarget.id]; |
| } |
| for (var k in this._connected) { |
| return k, this; |
| } |
| this._connected = false; |
| return this; |
| }, |
| connectedEventHandler: function (param) { |
| if (param.__echartsId != this.id) { |
| this._onevent(param); |
| } |
| }, |
| isConnected: function () { |
| return !!this._connected; |
| }, |
| showLoading: function (loadingOption) { |
| var effectList = { |
| bar: require('zrender/loadingEffect/Bar'), |
| bubble: require('zrender/loadingEffect/Bubble'), |
| dynamicLine: require('zrender/loadingEffect/DynamicLine'), |
| ring: require('zrender/loadingEffect/Ring'), |
| spin: require('zrender/loadingEffect/Spin'), |
| whirling: require('zrender/loadingEffect/Whirling') |
| }; |
| this._toolbox.hideDataView(); |
| loadingOption = loadingOption || {}; |
| var textStyle = loadingOption.textStyle || {}; |
| loadingOption.textStyle = textStyle; |
| var finalTextStyle = zrUtil.merge(zrUtil.merge(zrUtil.clone(textStyle), this._themeConfig.textStyle), ecConfig.textStyle); |
| textStyle.textFont = finalTextStyle.fontStyle + ' ' + finalTextStyle.fontWeight + ' ' + finalTextStyle.fontSize + 'px ' + finalTextStyle.fontFamily; |
| textStyle.text = loadingOption.text || this._option && this._option.loadingText || this._themeConfig.loadingText || ecConfig.loadingText; |
| if (loadingOption.x != null) { |
| textStyle.x = loadingOption.x; |
| } |
| if (loadingOption.y != null) { |
| textStyle.y = loadingOption.y; |
| } |
| loadingOption.effectOption = loadingOption.effectOption || {}; |
| loadingOption.effectOption.textStyle = textStyle; |
| var Effect = loadingOption.effect; |
| if (typeof Effect === 'string' || Effect == null) { |
| Effect = effectList[loadingOption.effect || this._option && this._option.loadingEffect || this._themeConfig.loadingEffect || ecConfig.loadingEffect] || effectList.spin; |
| } |
| this._zr.showLoading(new Effect(loadingOption.effectOption)); |
| return this; |
| }, |
| hideLoading: function () { |
| this._zr.hideLoading(); |
| return this; |
| }, |
| setTheme: function (theme) { |
| if (theme) { |
| if (typeof theme === 'string') { |
| switch (theme) { |
| case 'macarons': |
| theme = require('./theme/macarons'); |
| break; |
| case 'infographic': |
| theme = require('./theme/infographic'); |
| break; |
| default: |
| theme = {}; |
| } |
| } else { |
| theme = theme || {}; |
| } |
| this._themeConfig = theme; |
| } |
| if (!_canvasSupported) { |
| var textStyle = this._themeConfig.textStyle; |
| textStyle && textStyle.fontFamily && textStyle.fontFamily2 && (textStyle.fontFamily = textStyle.fontFamily2); |
| textStyle = ecConfig.textStyle; |
| textStyle.fontFamily = textStyle.fontFamily2; |
| } |
| this._timeline && this._timeline.setTheme(true); |
| this._optionRestore && this.restore(); |
| }, |
| resize: function () { |
| var self = this; |
| return function () { |
| self._clearEffect(); |
| self._zr.resize(); |
| if (self._option && self._option.renderAsImage && _canvasSupported) { |
| self._render(self._option); |
| return self; |
| } |
| self._zr.clearAnimation(); |
| self._island.resize(); |
| self._toolbox.resize(); |
| self._timeline && self._timeline.resize(); |
| for (var i = 0, l = self._chartList.length; i < l; i++) { |
| self._chartList[i].resize && self._chartList[i].resize(); |
| } |
| self.component.grid && self.component.grid.refixAxisShape(self.component); |
| self._zr.refresh(); |
| self._messageCenter.dispatch(ecConfig.EVENT.RESIZE, null, null, self); |
| return self; |
| }; |
| }, |
| _clearEffect: function () { |
| this._zr.modLayer(ecConfig.EFFECT_ZLEVEL, { motionBlur: false }); |
| this._zr.painter.clearLayer(ecConfig.EFFECT_ZLEVEL); |
| }, |
| clear: function () { |
| this._disposeChartList(); |
| this._zr.clear(); |
| this._option = {}; |
| this._optionRestore = {}; |
| this.dom.style.backgroundColor = null; |
| return this; |
| }, |
| dispose: function () { |
| var key = this.dom.getAttribute(DOM_ATTRIBUTE_KEY); |
| key && delete _instances[key]; |
| this._island.dispose(); |
| this._toolbox.dispose(); |
| this._timeline && this._timeline.dispose(); |
| this._messageCenter.unbind(); |
| this.clear(); |
| this._zr.dispose(); |
| this._zr = null; |
| } |
| }; |
| return self; |
| });define('echarts/config', [], function () { |
| var config = { |
| CHART_TYPE_LINE: 'line', |
| CHART_TYPE_BAR: 'bar', |
| CHART_TYPE_SCATTER: 'scatter', |
| CHART_TYPE_PIE: 'pie', |
| CHART_TYPE_RADAR: 'radar', |
| CHART_TYPE_VENN: 'venn', |
| CHART_TYPE_TREEMAP: 'treemap', |
| CHART_TYPE_TREE: 'tree', |
| CHART_TYPE_MAP: 'map', |
| CHART_TYPE_K: 'k', |
| CHART_TYPE_ISLAND: 'island', |
| CHART_TYPE_FORCE: 'force', |
| CHART_TYPE_CHORD: 'chord', |
| CHART_TYPE_GAUGE: 'gauge', |
| CHART_TYPE_FUNNEL: 'funnel', |
| CHART_TYPE_EVENTRIVER: 'eventRiver', |
| CHART_TYPE_WORDCLOUD: 'wordCloud', |
| CHART_TYPE_HEATMAP: 'heatmap', |
| COMPONENT_TYPE_TITLE: 'title', |
| COMPONENT_TYPE_LEGEND: 'legend', |
| COMPONENT_TYPE_DATARANGE: 'dataRange', |
| COMPONENT_TYPE_DATAVIEW: 'dataView', |
| COMPONENT_TYPE_DATAZOOM: 'dataZoom', |
| COMPONENT_TYPE_TOOLBOX: 'toolbox', |
| COMPONENT_TYPE_TOOLTIP: 'tooltip', |
| COMPONENT_TYPE_GRID: 'grid', |
| COMPONENT_TYPE_AXIS: 'axis', |
| COMPONENT_TYPE_POLAR: 'polar', |
| COMPONENT_TYPE_X_AXIS: 'xAxis', |
| COMPONENT_TYPE_Y_AXIS: 'yAxis', |
| COMPONENT_TYPE_AXIS_CATEGORY: 'categoryAxis', |
| COMPONENT_TYPE_AXIS_VALUE: 'valueAxis', |
| COMPONENT_TYPE_TIMELINE: 'timeline', |
| COMPONENT_TYPE_ROAMCONTROLLER: 'roamController', |
| backgroundColor: 'rgba(0,0,0,0)', |
| color: [ |
| '#ff7f50', |
| '#87cefa', |
| '#da70d6', |
| '#32cd32', |
| '#6495ed', |
| '#ff69b4', |
| '#ba55d3', |
| '#cd5c5c', |
| '#ffa500', |
| '#40e0d0', |
| '#1e90ff', |
| '#ff6347', |
| '#7b68ee', |
| '#00fa9a', |
| '#ffd700', |
| '#6699FF', |
| '#ff6666', |
| '#3cb371', |
| '#b8860b', |
| '#30e0e0' |
| ], |
| markPoint: { |
| clickable: true, |
| symbol: 'pin', |
| symbolSize: 10, |
| large: false, |
| effect: { |
| show: false, |
| loop: true, |
| period: 15, |
| type: 'scale', |
| scaleSize: 2, |
| bounceDistance: 10 |
| }, |
| itemStyle: { |
| normal: { |
| borderWidth: 2, |
| label: { |
| show: true, |
| position: 'inside' |
| } |
| }, |
| emphasis: { label: { show: true } } |
| } |
| }, |
| markLine: { |
| clickable: true, |
| symbol: [ |
| 'circle', |
| 'arrow' |
| ], |
| symbolSize: [ |
| 2, |
| 4 |
| ], |
| smoothness: 0.2, |
| precision: 2, |
| effect: { |
| show: false, |
| loop: true, |
| period: 15, |
| scaleSize: 2 |
| }, |
| bundling: { |
| enable: false, |
| maxTurningAngle: 45 |
| }, |
| itemStyle: { |
| normal: { |
| borderWidth: 1.5, |
| label: { |
| show: true, |
| position: 'end' |
| }, |
| lineStyle: { type: 'dashed' } |
| }, |
| emphasis: { |
| label: { show: false }, |
| lineStyle: {} |
| } |
| } |
| }, |
| textStyle: { |
| decoration: 'none', |
| fontFamily: 'Arial, Verdana, sans-serif', |
| fontFamily2: '微软雅黑', |
| fontSize: 12, |
| fontStyle: 'normal', |
| fontWeight: 'normal' |
| }, |
| EVENT: { |
| REFRESH: 'refresh', |
| RESTORE: 'restore', |
| RESIZE: 'resize', |
| CLICK: 'click', |
| DBLCLICK: 'dblclick', |
| HOVER: 'hover', |
| MOUSEOUT: 'mouseout', |
| DATA_CHANGED: 'dataChanged', |
| DATA_ZOOM: 'dataZoom', |
| DATA_RANGE: 'dataRange', |
| DATA_RANGE_SELECTED: 'dataRangeSelected', |
| DATA_RANGE_HOVERLINK: 'dataRangeHoverLink', |
| LEGEND_SELECTED: 'legendSelected', |
| LEGEND_HOVERLINK: 'legendHoverLink', |
| MAP_SELECTED: 'mapSelected', |
| PIE_SELECTED: 'pieSelected', |
| MAGIC_TYPE_CHANGED: 'magicTypeChanged', |
| DATA_VIEW_CHANGED: 'dataViewChanged', |
| TIMELINE_CHANGED: 'timelineChanged', |
| MAP_ROAM: 'mapRoam', |
| FORCE_LAYOUT_END: 'forceLayoutEnd', |
| TOOLTIP_HOVER: 'tooltipHover', |
| TOOLTIP_IN_GRID: 'tooltipInGrid', |
| TOOLTIP_OUT_GRID: 'tooltipOutGrid', |
| ROAMCONTROLLER: 'roamController' |
| }, |
| DRAG_ENABLE_TIME: 120, |
| EFFECT_ZLEVEL: 10, |
| effectBlendAlpha: 0.95, |
| symbolList: [ |
| 'circle', |
| 'rectangle', |
| 'triangle', |
| 'diamond', |
| 'emptyCircle', |
| 'emptyRectangle', |
| 'emptyTriangle', |
| 'emptyDiamond' |
| ], |
| loadingEffect: 'spin', |
| loadingText: '数据读取中...', |
| noDataEffect: 'bubble', |
| noDataText: '暂无数据', |
| calculable: false, |
| calculableColor: 'rgba(255,165,0,0.6)', |
| calculableHolderColor: '#ccc', |
| nameConnector: ' & ', |
| valueConnector: ': ', |
| animation: true, |
| addDataAnimation: true, |
| animationThreshold: 2000, |
| animationDuration: 2000, |
| animationDurationUpdate: 500, |
| animationEasing: 'ExponentialOut' |
| }; |
| return config; |
| });define('zrender/tool/util', [ |
| 'require', |
| '../dep/excanvas' |
| ], function (require) { |
| var ArrayProto = Array.prototype; |
| var nativeForEach = ArrayProto.forEach; |
| var nativeMap = ArrayProto.map; |
| var nativeFilter = ArrayProto.filter; |
| var BUILTIN_OBJECT = { |
| '[object Function]': 1, |
| '[object RegExp]': 1, |
| '[object Date]': 1, |
| '[object Error]': 1, |
| '[object CanvasGradient]': 1 |
| }; |
| var objToString = Object.prototype.toString; |
| function isDom(obj) { |
| return obj && obj.nodeType === 1 && typeof obj.nodeName == 'string'; |
| } |
| function clone(source) { |
| if (typeof source == 'object' && source !== null) { |
| var result = source; |
| if (source instanceof Array) { |
| result = []; |
| for (var i = 0, len = source.length; i < len; i++) { |
| result[i] = clone(source[i]); |
| } |
| } else if (!BUILTIN_OBJECT[objToString.call(source)] && !isDom(source)) { |
| result = {}; |
| for (var key in source) { |
| if (source.hasOwnProperty(key)) { |
| result[key] = clone(source[key]); |
| } |
| } |
| } |
| return result; |
| } |
| return source; |
| } |
| function mergeItem(target, source, key, overwrite) { |
| if (source.hasOwnProperty(key)) { |
| var targetProp = target[key]; |
| if (typeof targetProp == 'object' && !BUILTIN_OBJECT[objToString.call(targetProp)] && !isDom(targetProp)) { |
| merge(target[key], source[key], overwrite); |
| } else if (overwrite || !(key in target)) { |
| target[key] = source[key]; |
| } |
| } |
| } |
| function merge(target, source, overwrite) { |
| for (var i in source) { |
| mergeItem(target, source, i, overwrite); |
| } |
| return target; |
| } |
| var _ctx; |
| function getContext() { |
| if (!_ctx) { |
| require('../dep/excanvas'); |
| if (window['G_vmlCanvasManager']) { |
| var _div = document.createElement('div'); |
| _div.style.position = 'absolute'; |
| _div.style.top = '-1000px'; |
| document.body.appendChild(_div); |
| _ctx = G_vmlCanvasManager.initElement(_div).getContext('2d'); |
| } else { |
| _ctx = document.createElement('canvas').getContext('2d'); |
| } |
| } |
| return _ctx; |
| } |
| function indexOf(array, value) { |
| if (array.indexOf) { |
| return array.indexOf(value); |
| } |
| for (var i = 0, len = array.length; i < len; i++) { |
| if (array[i] === value) { |
| return i; |
| } |
| } |
| return -1; |
| } |
| function inherits(clazz, baseClazz) { |
| var clazzPrototype = clazz.prototype; |
| function F() { |
| } |
| F.prototype = baseClazz.prototype; |
| clazz.prototype = new F(); |
| for (var prop in clazzPrototype) { |
| clazz.prototype[prop] = clazzPrototype[prop]; |
| } |
| clazz.constructor = clazz; |
| } |
| function each(obj, cb, context) { |
| if (!(obj && cb)) { |
| return; |
| } |
| if (obj.forEach && obj.forEach === nativeForEach) { |
| obj.forEach(cb, context); |
| } else if (obj.length === +obj.length) { |
| for (var i = 0, len = obj.length; i < len; i++) { |
| cb.call(context, obj[i], i, obj); |
| } |
| } else { |
| for (var key in obj) { |
| if (obj.hasOwnProperty(key)) { |
| cb.call(context, obj[key], key, obj); |
| } |
| } |
| } |
| } |
| function map(obj, cb, context) { |
| if (!(obj && cb)) { |
| return; |
| } |
| if (obj.map && obj.map === nativeMap) { |
| return obj.map(cb, context); |
| } else { |
| var result = []; |
| for (var i = 0, len = obj.length; i < len; i++) { |
| result.push(cb.call(context, obj[i], i, obj)); |
| } |
| return result; |
| } |
| } |
| function filter(obj, cb, context) { |
| if (!(obj && cb)) { |
| return; |
| } |
| if (obj.filter && obj.filter === nativeFilter) { |
| return obj.filter(cb, context); |
| } else { |
| var result = []; |
| for (var i = 0, len = obj.length; i < len; i++) { |
| if (cb.call(context, obj[i], i, obj)) { |
| result.push(obj[i]); |
| } |
| } |
| return result; |
| } |
| } |
| function bind(func, context) { |
| return function () { |
| func.apply(context, arguments); |
| }; |
| } |
| return { |
| inherits: inherits, |
| clone: clone, |
| merge: merge, |
| getContext: getContext, |
| indexOf: indexOf, |
| each: each, |
| map: map, |
| filter: filter, |
| bind: bind |
| }; |
| });define('zrender/tool/event', [ |
| 'require', |
| '../mixin/Eventful' |
| ], function (require) { |
| 'use strict'; |
| var Eventful = require('../mixin/Eventful'); |
| function getX(e) { |
| return typeof e.zrenderX != 'undefined' && e.zrenderX || typeof e.offsetX != 'undefined' && e.offsetX || typeof e.layerX != 'undefined' && e.layerX || typeof e.clientX != 'undefined' && e.clientX; |
| } |
| function getY(e) { |
| return typeof e.zrenderY != 'undefined' && e.zrenderY || typeof e.offsetY != 'undefined' && e.offsetY || typeof e.layerY != 'undefined' && e.layerY || typeof e.clientY != 'undefined' && e.clientY; |
| } |
| function getDelta(e) { |
| return typeof e.zrenderDelta != 'undefined' && e.zrenderDelta || typeof e.wheelDelta != 'undefined' && e.wheelDelta || typeof e.detail != 'undefined' && -e.detail; |
| } |
| var stop = typeof window.addEventListener === 'function' ? function (e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| e.cancelBubble = true; |
| } : function (e) { |
| e.returnValue = false; |
| e.cancelBubble = true; |
| }; |
| return { |
| getX: getX, |
| getY: getY, |
| getDelta: getDelta, |
| stop: stop, |
| Dispatcher: Eventful |
| }; |
| });define('zrender/tool/env', [], function () { |
| function detect(ua) { |
| var os = this.os = {}; |
| var browser = this.browser = {}; |
| var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/); |
| var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); |
| var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); |
| var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); |
| var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); |
| var webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/); |
| var touchpad = webos && ua.match(/TouchPad/); |
| var kindle = ua.match(/Kindle\/([\d.]+)/); |
| var silk = ua.match(/Silk\/([\d._]+)/); |
| var blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/); |
| var bb10 = ua.match(/(BB10).*Version\/([\d.]+)/); |
| var rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/); |
| var playbook = ua.match(/PlayBook/); |
| var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/); |
| var firefox = ua.match(/Firefox\/([\d.]+)/); |
| var ie = ua.match(/MSIE ([\d.]+)/); |
| var safari = webkit && ua.match(/Mobile\//) && !chrome; |
| var webview = ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/) && !chrome; |
| var ie = ua.match(/MSIE\s([\d.]+)/); |
| if (browser.webkit = !!webkit) |
| browser.version = webkit[1]; |
| if (android) |
| os.android = true, os.version = android[2]; |
| if (iphone && !ipod) |
| os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.'); |
| if (ipad) |
| os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.'); |
| if (ipod) |
| os.ios = os.ipod = true, os.version = ipod[3] ? ipod[3].replace(/_/g, '.') : null; |
| if (webos) |
| os.webos = true, os.version = webos[2]; |
| if (touchpad) |
| os.touchpad = true; |
| if (blackberry) |
| os.blackberry = true, os.version = blackberry[2]; |
| if (bb10) |
| os.bb10 = true, os.version = bb10[2]; |
| if (rimtabletos) |
| os.rimtabletos = true, os.version = rimtabletos[2]; |
| if (playbook) |
| browser.playbook = true; |
| if (kindle) |
| os.kindle = true, os.version = kindle[1]; |
| if (silk) |
| browser.silk = true, browser.version = silk[1]; |
| if (!silk && os.android && ua.match(/Kindle Fire/)) |
| browser.silk = true; |
| if (chrome) |
| browser.chrome = true, browser.version = chrome[1]; |
| if (firefox) |
| browser.firefox = true, browser.version = firefox[1]; |
| if (ie) |
| browser.ie = true, browser.version = ie[1]; |
| if (safari && (ua.match(/Safari/) || !!os.ios)) |
| browser.safari = true; |
| if (webview) |
| browser.webview = true; |
| if (ie) |
| browser.ie = true, browser.version = ie[1]; |
| os.tablet = !!(ipad || playbook || android && !ua.match(/Mobile/) || firefox && ua.match(/Tablet/) || ie && !ua.match(/Phone/) && ua.match(/Touch/)); |
| os.phone = !!(!os.tablet && !os.ipod && (android || iphone || webos || blackberry || bb10 || chrome && ua.match(/Android/) || chrome && ua.match(/CriOS\/([\d.]+)/) || firefox && ua.match(/Mobile/) || ie && ua.match(/Touch/))); |
| return { |
| browser: browser, |
| os: os, |
| canvasSupported: document.createElement('canvas').getContext ? true : false |
| }; |
| } |
| return detect(navigator.userAgent); |
| });define('zrender', ['zrender/zrender'], function (main) {return main;}); |
| define('zrender/zrender', [ |
| 'require', |
| './dep/excanvas', |
| './tool/util', |
| './tool/log', |
| './tool/guid', |
| './Handler', |
| './Painter', |
| './Storage', |
| './animation/Animation', |
| './tool/env' |
| ], function (require) { |
| require('./dep/excanvas'); |
| var util = require('./tool/util'); |
| var log = require('./tool/log'); |
| var guid = require('./tool/guid'); |
| var Handler = require('./Handler'); |
| var Painter = require('./Painter'); |
| var Storage = require('./Storage'); |
| var Animation = require('./animation/Animation'); |
| var _instances = {}; |
| var zrender = {}; |
| zrender.version = '2.1.1'; |
| zrender.init = function (dom) { |
| var zr = new ZRender(guid(), dom); |
| _instances[zr.id] = zr; |
| return zr; |
| }; |
| zrender.dispose = function (zr) { |
| if (zr) { |
| zr.dispose(); |
| } else { |
| for (var key in _instances) { |
| _instances[key].dispose(); |
| } |
| _instances = {}; |
| } |
| return zrender; |
| }; |
| zrender.getInstance = function (id) { |
| return _instances[id]; |
| }; |
| zrender.delInstance = function (id) { |
| delete _instances[id]; |
| return zrender; |
| }; |
| function getFrameCallback(zrInstance) { |
| return function () { |
| if (zrInstance._needsRefreshNextFrame) { |
| zrInstance.refresh(); |
| } |
| }; |
| } |
| var ZRender = function (id, dom) { |
| this.id = id; |
| this.env = require('./tool/env'); |
| this.storage = new Storage(); |
| this.painter = new Painter(dom, this.storage); |
| this.handler = new Handler(dom, this.storage, this.painter); |
| this.animation = new Animation({ stage: { update: getFrameCallback(this) } }); |
| this.animation.start(); |
| var self = this; |
| this.painter.refreshNextFrame = function () { |
| self.refreshNextFrame(); |
| }; |
| this._needsRefreshNextFrame = false; |
| var self = this; |
| var storage = this.storage; |
| var oldDelFromMap = storage.delFromMap; |
| storage.delFromMap = function (elId) { |
| var el = storage.get(elId); |
| self.stopAnimation(el); |
| oldDelFromMap.call(storage, elId); |
| }; |
| }; |
| ZRender.prototype.getId = function () { |
| return this.id; |
| }; |
| ZRender.prototype.addShape = function (shape) { |
| this.addElement(shape); |
| return this; |
| }; |
| ZRender.prototype.addGroup = function (group) { |
| this.addElement(group); |
| return this; |
| }; |
| ZRender.prototype.delShape = function (shapeId) { |
| this.delElement(shapeId); |
| return this; |
| }; |
| ZRender.prototype.delGroup = function (groupId) { |
| this.delElement(groupId); |
| return this; |
| }; |
| ZRender.prototype.modShape = function (shapeId, shape) { |
| this.modElement(shapeId, shape); |
| return this; |
| }; |
| ZRender.prototype.modGroup = function (groupId, group) { |
| this.modElement(groupId, group); |
| return this; |
| }; |
| ZRender.prototype.addElement = function (el) { |
| this.storage.addRoot(el); |
| this._needsRefreshNextFrame = true; |
| return this; |
| }; |
| ZRender.prototype.delElement = function (el) { |
| this.storage.delRoot(el); |
| this._needsRefreshNextFrame = true; |
| return this; |
| }; |
| ZRender.prototype.modElement = function (el, params) { |
| this.storage.mod(el, params); |
| this._needsRefreshNextFrame = true; |
| return this; |
| }; |
| ZRender.prototype.modLayer = function (zLevel, config) { |
| this.painter.modLayer(zLevel, config); |
| this._needsRefreshNextFrame = true; |
| return this; |
| }; |
| ZRender.prototype.addHoverShape = function (shape) { |
| this.storage.addHover(shape); |
| return this; |
| }; |
| ZRender.prototype.render = function (callback) { |
| this.painter.render(callback); |
| this._needsRefreshNextFrame = false; |
| return this; |
| }; |
| ZRender.prototype.refresh = function (callback) { |
| this.painter.refresh(callback); |
| this._needsRefreshNextFrame = false; |
| return this; |
| }; |
| ZRender.prototype.refreshNextFrame = function () { |
| this._needsRefreshNextFrame = true; |
| return this; |
| }; |
| ZRender.prototype.refreshHover = function (callback) { |
| this.painter.refreshHover(callback); |
| return this; |
| }; |
| ZRender.prototype.refreshShapes = function (shapeList, callback) { |
| this.painter.refreshShapes(shapeList, callback); |
| return this; |
| }; |
| ZRender.prototype.resize = function () { |
| this.painter.resize(); |
| return this; |
| }; |
| ZRender.prototype.animate = function (el, path, loop) { |
| var self = this; |
| if (typeof el === 'string') { |
| el = this.storage.get(el); |
| } |
| if (el) { |
| var target; |
| if (path) { |
| var pathSplitted = path.split('.'); |
| var prop = el; |
| for (var i = 0, l = pathSplitted.length; i < l; i++) { |
| if (!prop) { |
| continue; |
| } |
| prop = prop[pathSplitted[i]]; |
| } |
| if (prop) { |
| target = prop; |
| } |
| } else { |
| target = el; |
| } |
| if (!target) { |
| log('Property "' + path + '" is not existed in element ' + el.id); |
| return; |
| } |
| if (el.__animators == null) { |
| el.__animators = []; |
| } |
| var animators = el.__animators; |
| var animator = this.animation.animate(target, { loop: loop }).during(function () { |
| self.modShape(el); |
| }).done(function () { |
| var idx = util.indexOf(el.__animators, animator); |
| if (idx >= 0) { |
| animators.splice(idx, 1); |
| } |
| }); |
| animators.push(animator); |
| return animator; |
| } else { |
| log('Element not existed'); |
| } |
| }; |
| ZRender.prototype.stopAnimation = function (el) { |
| if (el.__animators) { |
| var animators = el.__animators; |
| var len = animators.length; |
| for (var i = 0; i < len; i++) { |
| animators[i].stop(); |
| } |
| animators.length = 0; |
| } |
| return this; |
| }; |
| ZRender.prototype.clearAnimation = function () { |
| this.animation.clear(); |
| return this; |
| }; |
| ZRender.prototype.showLoading = function (loadingEffect) { |
| this.painter.showLoading(loadingEffect); |
| return this; |
| }; |
| ZRender.prototype.hideLoading = function () { |
| this.painter.hideLoading(); |
| return this; |
| }; |
| ZRender.prototype.getWidth = function () { |
| return this.painter.getWidth(); |
| }; |
| ZRender.prototype.getHeight = function () { |
| return this.painter.getHeight(); |
| }; |
| ZRender.prototype.toDataURL = function (type, backgroundColor, args) { |
| return this.painter.toDataURL(type, backgroundColor, args); |
| }; |
| ZRender.prototype.shapeToImage = function (e, width, height) { |
| var id = guid(); |
| return this.painter.shapeToImage(id, e, width, height); |
| }; |
| ZRender.prototype.on = function (eventName, eventHandler, context) { |
| this.handler.on(eventName, eventHandler, context); |
| return this; |
| }; |
| ZRender.prototype.un = function (eventName, eventHandler) { |
| this.handler.un(eventName, eventHandler); |
| return this; |
| }; |
| ZRender.prototype.trigger = function (eventName, event) { |
| this.handler.trigger(eventName, event); |
| return this; |
| }; |
| ZRender.prototype.clear = function () { |
| this.storage.delRoot(); |
| this.painter.clear(); |
| return this; |
| }; |
| ZRender.prototype.dispose = function () { |
| this.animation.stop(); |
| this.clear(); |
| this.storage.dispose(); |
| this.painter.dispose(); |
| this.handler.dispose(); |
| this.animation = this.storage = this.painter = this.handler = null; |
| zrender.delInstance(this.id); |
| }; |
| return zrender; |
| });define('zrender/config', [], function () { |
| var config = { |
| EVENT: { |
| RESIZE: 'resize', |
| CLICK: 'click', |
| DBLCLICK: 'dblclick', |
| MOUSEWHEEL: 'mousewheel', |
| MOUSEMOVE: 'mousemove', |
| MOUSEOVER: 'mouseover', |
| MOUSEOUT: 'mouseout', |
| MOUSEDOWN: 'mousedown', |
| MOUSEUP: 'mouseup', |
| GLOBALOUT: 'globalout', |
| DRAGSTART: 'dragstart', |
| DRAGEND: 'dragend', |
| DRAGENTER: 'dragenter', |
| DRAGOVER: 'dragover', |
| DRAGLEAVE: 'dragleave', |
| DROP: 'drop', |
| touchClickDelay: 300 |
| }, |
| elementClassName: 'zr-element', |
| catchBrushException: false, |
| debugMode: 0, |
| devicePixelRatio: Math.max(window.devicePixelRatio || 1, 1) |
| }; |
| return config; |
| });define('echarts/chart/island', [ |
| 'require', |
| './base', |
| 'zrender/shape/Circle', |
| '../config', |
| '../util/ecData', |
| 'zrender/tool/util', |
| 'zrender/tool/event', |
| 'zrender/tool/color', |
| '../util/accMath', |
| '../chart' |
| ], function (require) { |
| var ChartBase = require('./base'); |
| var CircleShape = require('zrender/shape/Circle'); |
| var ecConfig = require('../config'); |
| ecConfig.island = { |
| zlevel: 0, |
| z: 5, |
| r: 15, |
| calculateStep: 0.1 |
| }; |
| var ecData = require('../util/ecData'); |
| var zrUtil = require('zrender/tool/util'); |
| var zrEvent = require('zrender/tool/event'); |
| function Island(ecTheme, messageCenter, zr, option, myChart) { |
| ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this._nameConnector; |
| this._valueConnector; |
| this._zrHeight = this.zr.getHeight(); |
| this._zrWidth = this.zr.getWidth(); |
| var self = this; |
| self.shapeHandler.onmousewheel = function (param) { |
| var shape = param.target; |
| var event = param.event; |
| var delta = zrEvent.getDelta(event); |
| delta = delta > 0 ? -1 : 1; |
| shape.style.r -= delta; |
| shape.style.r = shape.style.r < 5 ? 5 : shape.style.r; |
| var value = ecData.get(shape, 'value'); |
| var dvalue = value * self.option.island.calculateStep; |
| value = dvalue > 1 ? Math.round(value - dvalue * delta) : +(value - dvalue * delta).toFixed(2); |
| var name = ecData.get(shape, 'name'); |
| shape.style.text = name + ':' + value; |
| ecData.set(shape, 'value', value); |
| ecData.set(shape, 'name', name); |
| self.zr.modShape(shape.id); |
| self.zr.refreshNextFrame(); |
| zrEvent.stop(event); |
| }; |
| } |
| Island.prototype = { |
| type: ecConfig.CHART_TYPE_ISLAND, |
| _combine: function (tarShape, srcShape) { |
| var zrColor = require('zrender/tool/color'); |
| var accMath = require('../util/accMath'); |
| var value = accMath.accAdd(ecData.get(tarShape, 'value'), ecData.get(srcShape, 'value')); |
| var name = ecData.get(tarShape, 'name') + this._nameConnector + ecData.get(srcShape, 'name'); |
| tarShape.style.text = name + this._valueConnector + value; |
| ecData.set(tarShape, 'value', value); |
| ecData.set(tarShape, 'name', name); |
| tarShape.style.r = this.option.island.r; |
| tarShape.style.color = zrColor.mix(tarShape.style.color, srcShape.style.color); |
| }, |
| refresh: function (newOption) { |
| if (newOption) { |
| newOption.island = this.reformOption(newOption.island); |
| this.option = newOption; |
| this._nameConnector = this.option.nameConnector; |
| this._valueConnector = this.option.valueConnector; |
| } |
| }, |
| getOption: function () { |
| return this.option; |
| }, |
| resize: function () { |
| var newWidth = this.zr.getWidth(); |
| var newHieght = this.zr.getHeight(); |
| var xScale = newWidth / (this._zrWidth || newWidth); |
| var yScale = newHieght / (this._zrHeight || newHieght); |
| if (xScale === 1 && yScale === 1) { |
| return; |
| } |
| this._zrWidth = newWidth; |
| this._zrHeight = newHieght; |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.modShape(this.shapeList[i].id, { |
| style: { |
| x: Math.round(this.shapeList[i].style.x * xScale), |
| y: Math.round(this.shapeList[i].style.y * yScale) |
| } |
| }); |
| } |
| }, |
| add: function (shape) { |
| var name = ecData.get(shape, 'name'); |
| var value = ecData.get(shape, 'value'); |
| var seriesName = ecData.get(shape, 'series') != null ? ecData.get(shape, 'series').name : ''; |
| var font = this.getFont(this.option.island.textStyle); |
| var islandOption = this.option.island; |
| var islandShape = { |
| zlevel: islandOption.zlevel, |
| z: islandOption.z, |
| style: { |
| x: shape.style.x, |
| y: shape.style.y, |
| r: this.option.island.r, |
| color: shape.style.color || shape.style.strokeColor, |
| text: name + this._valueConnector + value, |
| textFont: font |
| }, |
| draggable: true, |
| hoverable: true, |
| onmousewheel: this.shapeHandler.onmousewheel, |
| _type: 'island' |
| }; |
| if (islandShape.style.color === '#fff') { |
| islandShape.style.color = shape.style.strokeColor; |
| } |
| this.setCalculable(islandShape); |
| islandShape.dragEnableTime = 0; |
| ecData.pack(islandShape, { name: seriesName }, -1, value, -1, name); |
| islandShape = new CircleShape(islandShape); |
| this.shapeList.push(islandShape); |
| this.zr.addShape(islandShape); |
| }, |
| del: function (shape) { |
| this.zr.delShape(shape.id); |
| var newShapeList = []; |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i].id != shape.id) { |
| newShapeList.push(this.shapeList[i]); |
| } |
| } |
| this.shapeList = newShapeList; |
| }, |
| ondrop: function (param, status) { |
| if (!this.isDrop || !param.target) { |
| return; |
| } |
| var target = param.target; |
| var dragged = param.dragged; |
| this._combine(target, dragged); |
| this.zr.modShape(target.id); |
| status.dragIn = true; |
| this.isDrop = false; |
| return; |
| }, |
| ondragend: function (param, status) { |
| var target = param.target; |
| if (!this.isDragend) { |
| if (!status.dragIn) { |
| target.style.x = zrEvent.getX(param.event); |
| target.style.y = zrEvent.getY(param.event); |
| this.add(target); |
| status.needRefresh = true; |
| } |
| } else { |
| if (status.dragIn) { |
| this.del(target); |
| status.needRefresh = true; |
| } |
| } |
| this.isDragend = false; |
| return; |
| } |
| }; |
| zrUtil.inherits(Island, ChartBase); |
| require('../chart').define('island', Island); |
| return Island; |
| });define('echarts/component/toolbox', [ |
| 'require', |
| './base', |
| 'zrender/shape/Line', |
| 'zrender/shape/Image', |
| 'zrender/shape/Rectangle', |
| '../util/shape/Icon', |
| '../config', |
| 'zrender/tool/util', |
| 'zrender/config', |
| 'zrender/tool/event', |
| './dataView', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var LineShape = require('zrender/shape/Line'); |
| var ImageShape = require('zrender/shape/Image'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var IconShape = require('../util/shape/Icon'); |
| var ecConfig = require('../config'); |
| ecConfig.toolbox = { |
| zlevel: 0, |
| z: 6, |
| show: false, |
| orient: 'horizontal', |
| x: 'right', |
| y: 'top', |
| color: [ |
| '#1e90ff', |
| '#22bb22', |
| '#4b0082', |
| '#d2691e' |
| ], |
| disableColor: '#ddd', |
| effectiveColor: 'red', |
| backgroundColor: 'rgba(0,0,0,0)', |
| borderColor: '#ccc', |
| borderWidth: 0, |
| padding: 5, |
| itemGap: 10, |
| itemSize: 16, |
| showTitle: true, |
| feature: { |
| mark: { |
| show: false, |
| title: { |
| mark: '辅助线开关', |
| markUndo: '删除辅助线', |
| markClear: '清空辅助线' |
| }, |
| lineStyle: { |
| width: 1, |
| color: '#1e90ff', |
| type: 'dashed' |
| } |
| }, |
| dataZoom: { |
| show: false, |
| title: { |
| dataZoom: '区域缩放', |
| dataZoomReset: '区域缩放后退' |
| } |
| }, |
| dataView: { |
| show: false, |
| title: '数据视图', |
| readOnly: false, |
| lang: [ |
| '数据视图', |
| '关闭', |
| '刷新' |
| ] |
| }, |
| magicType: { |
| show: false, |
| title: { |
| line: '折线图切换', |
| bar: '柱形图切换', |
| stack: '堆积', |
| tiled: '平铺', |
| force: '力导向布局图切换', |
| chord: '和弦图切换', |
| pie: '饼图切换', |
| funnel: '漏斗图切换' |
| }, |
| type: [] |
| }, |
| restore: { |
| show: false, |
| title: '还原' |
| }, |
| saveAsImage: { |
| show: false, |
| title: '保存为图片', |
| type: 'png', |
| lang: ['点击保存'] |
| } |
| } |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| var zrConfig = require('zrender/config'); |
| var zrEvent = require('zrender/tool/event'); |
| var _MAGICTYPE_STACK = 'stack'; |
| var _MAGICTYPE_TILED = 'tiled'; |
| function Toolbox(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.dom = myChart.dom; |
| this._magicType = {}; |
| this._magicMap = {}; |
| this._isSilence = false; |
| this._iconList; |
| this._iconShapeMap = {}; |
| this._featureTitle = {}; |
| this._featureIcon = {}; |
| this._featureColor = {}; |
| this._featureOption = {}; |
| this._enableColor = 'red'; |
| this._disableColor = '#ccc'; |
| this._markShapeList = []; |
| var self = this; |
| self._onMark = function (param) { |
| self.__onMark(param); |
| }; |
| self._onMarkUndo = function (param) { |
| self.__onMarkUndo(param); |
| }; |
| self._onMarkClear = function (param) { |
| self.__onMarkClear(param); |
| }; |
| self._onDataZoom = function (param) { |
| self.__onDataZoom(param); |
| }; |
| self._onDataZoomReset = function (param) { |
| self.__onDataZoomReset(param); |
| }; |
| self._onDataView = function (param) { |
| self.__onDataView(param); |
| }; |
| self._onRestore = function (param) { |
| self.__onRestore(param); |
| }; |
| self._onSaveAsImage = function (param) { |
| self.__onSaveAsImage(param); |
| }; |
| self._onMagicType = function (param) { |
| self.__onMagicType(param); |
| }; |
| self._onCustomHandler = function (param) { |
| self.__onCustomHandler(param); |
| }; |
| self._onmousemove = function (param) { |
| return self.__onmousemove(param); |
| }; |
| self._onmousedown = function (param) { |
| return self.__onmousedown(param); |
| }; |
| self._onmouseup = function (param) { |
| return self.__onmouseup(param); |
| }; |
| self._onclick = function (param) { |
| return self.__onclick(param); |
| }; |
| } |
| Toolbox.prototype = { |
| type: ecConfig.COMPONENT_TYPE_TOOLBOX, |
| _buildShape: function () { |
| this._iconList = []; |
| var toolboxOption = this.option.toolbox; |
| this._enableColor = toolboxOption.effectiveColor; |
| this._disableColor = toolboxOption.disableColor; |
| var feature = toolboxOption.feature; |
| var iconName = []; |
| for (var key in feature) { |
| if (feature[key].show) { |
| switch (key) { |
| case 'mark': |
| iconName.push({ |
| key: key, |
| name: 'mark' |
| }); |
| iconName.push({ |
| key: key, |
| name: 'markUndo' |
| }); |
| iconName.push({ |
| key: key, |
| name: 'markClear' |
| }); |
| break; |
| case 'magicType': |
| for (var i = 0, l = feature[key].type.length; i < l; i++) { |
| feature[key].title[feature[key].type[i] + 'Chart'] = feature[key].title[feature[key].type[i]]; |
| if (feature[key].option) { |
| feature[key].option[feature[key].type[i] + 'Chart'] = feature[key].option[feature[key].type[i]]; |
| } |
| iconName.push({ |
| key: key, |
| name: feature[key].type[i] + 'Chart' |
| }); |
| } |
| break; |
| case 'dataZoom': |
| iconName.push({ |
| key: key, |
| name: 'dataZoom' |
| }); |
| iconName.push({ |
| key: key, |
| name: 'dataZoomReset' |
| }); |
| break; |
| case 'saveAsImage': |
| if (this.canvasSupported) { |
| iconName.push({ |
| key: key, |
| name: 'saveAsImage' |
| }); |
| } |
| break; |
| default: |
| iconName.push({ |
| key: key, |
| name: key |
| }); |
| break; |
| } |
| } |
| } |
| if (iconName.length > 0) { |
| var name; |
| var key; |
| for (var i = 0, l = iconName.length; i < l; i++) { |
| name = iconName[i].name; |
| key = iconName[i].key; |
| this._iconList.push(name); |
| this._featureTitle[name] = feature[key].title[name] || feature[key].title; |
| if (feature[key].icon) { |
| this._featureIcon[name] = feature[key].icon[name] || feature[key].icon; |
| } |
| if (feature[key].color) { |
| this._featureColor[name] = feature[key].color[name] || feature[key].color; |
| } |
| if (feature[key].option) { |
| this._featureOption[name] = feature[key].option[name] || feature[key].option; |
| } |
| } |
| this._itemGroupLocation = this._getItemGroupLocation(); |
| this._buildBackground(); |
| this._buildItem(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| if (this._iconShapeMap['mark']) { |
| this._iconDisable(this._iconShapeMap['markUndo']); |
| this._iconDisable(this._iconShapeMap['markClear']); |
| } |
| if (this._iconShapeMap['dataZoomReset'] && this._zoomQueue.length === 0) { |
| this._iconDisable(this._iconShapeMap['dataZoomReset']); |
| } |
| } |
| }, |
| _buildItem: function () { |
| var toolboxOption = this.option.toolbox; |
| var iconLength = this._iconList.length; |
| var lastX = this._itemGroupLocation.x; |
| var lastY = this._itemGroupLocation.y; |
| var itemSize = toolboxOption.itemSize; |
| var itemGap = toolboxOption.itemGap; |
| var itemShape; |
| var color = toolboxOption.color instanceof Array ? toolboxOption.color : [toolboxOption.color]; |
| var textFont = this.getFont(toolboxOption.textStyle); |
| var textPosition; |
| var textAlign; |
| var textBaseline; |
| if (toolboxOption.orient === 'horizontal') { |
| textPosition = this._itemGroupLocation.y / this.zr.getHeight() < 0.5 ? 'bottom' : 'top'; |
| textAlign = this._itemGroupLocation.x / this.zr.getWidth() < 0.5 ? 'left' : 'right'; |
| textBaseline = this._itemGroupLocation.y / this.zr.getHeight() < 0.5 ? 'top' : 'bottom'; |
| } else { |
| textPosition = this._itemGroupLocation.x / this.zr.getWidth() < 0.5 ? 'right' : 'left'; |
| } |
| this._iconShapeMap = {}; |
| var self = this; |
| for (var i = 0; i < iconLength; i++) { |
| itemShape = { |
| type: 'icon', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: lastX, |
| y: lastY, |
| width: itemSize, |
| height: itemSize, |
| iconType: this._iconList[i], |
| lineWidth: 1, |
| strokeColor: this._featureColor[this._iconList[i]] || color[i % color.length], |
| brushType: 'stroke' |
| }, |
| highlightStyle: { |
| lineWidth: 1, |
| text: toolboxOption.showTitle ? this._featureTitle[this._iconList[i]] : undefined, |
| textFont: textFont, |
| textPosition: textPosition, |
| strokeColor: this._featureColor[this._iconList[i]] || color[i % color.length] |
| }, |
| hoverable: true, |
| clickable: true |
| }; |
| if (this._featureIcon[this._iconList[i]]) { |
| itemShape.style.image = this._featureIcon[this._iconList[i]].replace(new RegExp('^image:\\/\\/'), ''); |
| itemShape.style.opacity = 0.8; |
| itemShape.highlightStyle.opacity = 1; |
| itemShape.type = 'image'; |
| } |
| if (toolboxOption.orient === 'horizontal') { |
| if (i === 0 && textAlign === 'left') { |
| itemShape.highlightStyle.textPosition = 'specific'; |
| itemShape.highlightStyle.textAlign = textAlign; |
| itemShape.highlightStyle.textBaseline = textBaseline; |
| itemShape.highlightStyle.textX = lastX; |
| itemShape.highlightStyle.textY = textBaseline === 'top' ? lastY + itemSize + 10 : lastY - 10; |
| } |
| if (i === iconLength - 1 && textAlign === 'right') { |
| itemShape.highlightStyle.textPosition = 'specific'; |
| itemShape.highlightStyle.textAlign = textAlign; |
| itemShape.highlightStyle.textBaseline = textBaseline; |
| itemShape.highlightStyle.textX = lastX + itemSize; |
| itemShape.highlightStyle.textY = textBaseline === 'top' ? lastY + itemSize + 10 : lastY - 10; |
| } |
| } |
| switch (this._iconList[i]) { |
| case 'mark': |
| itemShape.onclick = self._onMark; |
| break; |
| case 'markUndo': |
| itemShape.onclick = self._onMarkUndo; |
| break; |
| case 'markClear': |
| itemShape.onclick = self._onMarkClear; |
| break; |
| case 'dataZoom': |
| itemShape.onclick = self._onDataZoom; |
| break; |
| case 'dataZoomReset': |
| itemShape.onclick = self._onDataZoomReset; |
| break; |
| case 'dataView': |
| if (!this._dataView) { |
| var DataView = require('./dataView'); |
| this._dataView = new DataView(this.ecTheme, this.messageCenter, this.zr, this.option, this.myChart); |
| } |
| itemShape.onclick = self._onDataView; |
| break; |
| case 'restore': |
| itemShape.onclick = self._onRestore; |
| break; |
| case 'saveAsImage': |
| itemShape.onclick = self._onSaveAsImage; |
| break; |
| default: |
| if (this._iconList[i].match('Chart')) { |
| itemShape._name = this._iconList[i].replace('Chart', ''); |
| itemShape.onclick = self._onMagicType; |
| } else { |
| itemShape.onclick = self._onCustomHandler; |
| } |
| break; |
| } |
| if (itemShape.type === 'icon') { |
| itemShape = new IconShape(itemShape); |
| } else if (itemShape.type === 'image') { |
| itemShape = new ImageShape(itemShape); |
| } |
| this.shapeList.push(itemShape); |
| this._iconShapeMap[this._iconList[i]] = itemShape; |
| if (toolboxOption.orient === 'horizontal') { |
| lastX += itemSize + itemGap; |
| } else { |
| lastY += itemSize + itemGap; |
| } |
| } |
| }, |
| _buildBackground: function () { |
| var toolboxOption = this.option.toolbox; |
| var padding = this.reformCssArray(this.option.toolbox.padding); |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._itemGroupLocation.x - padding[3], |
| y: this._itemGroupLocation.y - padding[0], |
| width: this._itemGroupLocation.width + padding[3] + padding[1], |
| height: this._itemGroupLocation.height + padding[0] + padding[2], |
| brushType: toolboxOption.borderWidth === 0 ? 'fill' : 'both', |
| color: toolboxOption.backgroundColor, |
| strokeColor: toolboxOption.borderColor, |
| lineWidth: toolboxOption.borderWidth |
| } |
| })); |
| }, |
| _getItemGroupLocation: function () { |
| var toolboxOption = this.option.toolbox; |
| var padding = this.reformCssArray(this.option.toolbox.padding); |
| var iconLength = this._iconList.length; |
| var itemGap = toolboxOption.itemGap; |
| var itemSize = toolboxOption.itemSize; |
| var totalWidth = 0; |
| var totalHeight = 0; |
| if (toolboxOption.orient === 'horizontal') { |
| totalWidth = (itemSize + itemGap) * iconLength - itemGap; |
| totalHeight = itemSize; |
| } else { |
| totalHeight = (itemSize + itemGap) * iconLength - itemGap; |
| totalWidth = itemSize; |
| } |
| var x; |
| var zrWidth = this.zr.getWidth(); |
| switch (toolboxOption.x) { |
| case 'center': |
| x = Math.floor((zrWidth - totalWidth) / 2); |
| break; |
| case 'left': |
| x = padding[3] + toolboxOption.borderWidth; |
| break; |
| case 'right': |
| x = zrWidth - totalWidth - padding[1] - toolboxOption.borderWidth; |
| break; |
| default: |
| x = toolboxOption.x - 0; |
| x = isNaN(x) ? 0 : x; |
| break; |
| } |
| var y; |
| var zrHeight = this.zr.getHeight(); |
| switch (toolboxOption.y) { |
| case 'top': |
| y = padding[0] + toolboxOption.borderWidth; |
| break; |
| case 'bottom': |
| y = zrHeight - totalHeight - padding[2] - toolboxOption.borderWidth; |
| break; |
| case 'center': |
| y = Math.floor((zrHeight - totalHeight) / 2); |
| break; |
| default: |
| y = toolboxOption.y - 0; |
| y = isNaN(y) ? 0 : y; |
| break; |
| } |
| return { |
| x: x, |
| y: y, |
| width: totalWidth, |
| height: totalHeight |
| }; |
| }, |
| __onmousemove: function (param) { |
| if (this._marking) { |
| this._markShape.style.xEnd = zrEvent.getX(param.event); |
| this._markShape.style.yEnd = zrEvent.getY(param.event); |
| this.zr.addHoverShape(this._markShape); |
| } |
| if (this._zooming) { |
| this._zoomShape.style.width = zrEvent.getX(param.event) - this._zoomShape.style.x; |
| this._zoomShape.style.height = zrEvent.getY(param.event) - this._zoomShape.style.y; |
| this.zr.addHoverShape(this._zoomShape); |
| this.dom.style.cursor = 'crosshair'; |
| zrEvent.stop(param.event); |
| } |
| if (this._zoomStart && (this.dom.style.cursor != 'pointer' && this.dom.style.cursor != 'move')) { |
| this.dom.style.cursor = 'crosshair'; |
| } |
| }, |
| __onmousedown: function (param) { |
| if (param.target) { |
| return; |
| } |
| this._zooming = true; |
| var x = zrEvent.getX(param.event); |
| var y = zrEvent.getY(param.event); |
| var zoomOption = this.option.dataZoom || {}; |
| this._zoomShape = new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: x, |
| y: y, |
| width: 1, |
| height: 1, |
| brushType: 'both' |
| }, |
| highlightStyle: { |
| lineWidth: 2, |
| color: zoomOption.fillerColor || ecConfig.dataZoom.fillerColor, |
| strokeColor: zoomOption.handleColor || ecConfig.dataZoom.handleColor, |
| brushType: 'both' |
| } |
| }); |
| this.zr.addHoverShape(this._zoomShape); |
| return true; |
| }, |
| __onmouseup: function () { |
| if (!this._zoomShape || Math.abs(this._zoomShape.style.width) < 10 || Math.abs(this._zoomShape.style.height) < 10) { |
| this._zooming = false; |
| return true; |
| } |
| if (this._zooming && this.component.dataZoom) { |
| this._zooming = false; |
| var zoom = this.component.dataZoom.rectZoom(this._zoomShape.style); |
| if (zoom) { |
| this._zoomQueue.push({ |
| start: zoom.start, |
| end: zoom.end, |
| start2: zoom.start2, |
| end2: zoom.end2 |
| }); |
| this._iconEnable(this._iconShapeMap['dataZoomReset']); |
| this.zr.refreshNextFrame(); |
| } |
| } |
| return true; |
| }, |
| __onclick: function (param) { |
| if (param.target) { |
| return; |
| } |
| if (this._marking) { |
| this._marking = false; |
| this._markShapeList.push(this._markShape); |
| this._iconEnable(this._iconShapeMap['markUndo']); |
| this._iconEnable(this._iconShapeMap['markClear']); |
| this.zr.addShape(this._markShape); |
| this.zr.refreshNextFrame(); |
| } else if (this._markStart) { |
| this._marking = true; |
| var x = zrEvent.getX(param.event); |
| var y = zrEvent.getY(param.event); |
| this._markShape = new LineShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| xStart: x, |
| yStart: y, |
| xEnd: x, |
| yEnd: y, |
| lineWidth: this.query(this.option, 'toolbox.feature.mark.lineStyle.width'), |
| strokeColor: this.query(this.option, 'toolbox.feature.mark.lineStyle.color'), |
| lineType: this.query(this.option, 'toolbox.feature.mark.lineStyle.type') |
| } |
| }); |
| this.zr.addHoverShape(this._markShape); |
| } |
| }, |
| __onMark: function (param) { |
| var target = param.target; |
| if (this._marking || this._markStart) { |
| this._resetMark(); |
| this.zr.refreshNextFrame(); |
| } else { |
| this._resetZoom(); |
| this.zr.modShape(target.id, { style: { strokeColor: this._enableColor } }); |
| this.zr.refreshNextFrame(); |
| this._markStart = true; |
| var self = this; |
| setTimeout(function () { |
| self.zr && self.zr.on(zrConfig.EVENT.CLICK, self._onclick) && self.zr.on(zrConfig.EVENT.MOUSEMOVE, self._onmousemove); |
| }, 10); |
| } |
| return true; |
| }, |
| __onMarkUndo: function () { |
| if (this._marking) { |
| this._marking = false; |
| } else { |
| var len = this._markShapeList.length; |
| if (len >= 1) { |
| var target = this._markShapeList[len - 1]; |
| this.zr.delShape(target.id); |
| this.zr.refreshNextFrame(); |
| this._markShapeList.pop(); |
| if (len === 1) { |
| this._iconDisable(this._iconShapeMap['markUndo']); |
| this._iconDisable(this._iconShapeMap['markClear']); |
| } |
| } |
| } |
| return true; |
| }, |
| __onMarkClear: function () { |
| if (this._marking) { |
| this._marking = false; |
| } |
| var len = this._markShapeList.length; |
| if (len > 0) { |
| while (len--) { |
| this.zr.delShape(this._markShapeList.pop().id); |
| } |
| this._iconDisable(this._iconShapeMap['markUndo']); |
| this._iconDisable(this._iconShapeMap['markClear']); |
| this.zr.refreshNextFrame(); |
| } |
| return true; |
| }, |
| __onDataZoom: function (param) { |
| var target = param.target; |
| if (this._zooming || this._zoomStart) { |
| this._resetZoom(); |
| this.zr.refreshNextFrame(); |
| this.dom.style.cursor = 'default'; |
| } else { |
| this._resetMark(); |
| this.zr.modShape(target.id, { style: { strokeColor: this._enableColor } }); |
| this.zr.refreshNextFrame(); |
| this._zoomStart = true; |
| var self = this; |
| setTimeout(function () { |
| self.zr && self.zr.on(zrConfig.EVENT.MOUSEDOWN, self._onmousedown) && self.zr.on(zrConfig.EVENT.MOUSEUP, self._onmouseup) && self.zr.on(zrConfig.EVENT.MOUSEMOVE, self._onmousemove); |
| }, 10); |
| this.dom.style.cursor = 'crosshair'; |
| } |
| return true; |
| }, |
| __onDataZoomReset: function () { |
| if (this._zooming) { |
| this._zooming = false; |
| } |
| this._zoomQueue.pop(); |
| if (this._zoomQueue.length > 0) { |
| this.component.dataZoom.absoluteZoom(this._zoomQueue[this._zoomQueue.length - 1]); |
| } else { |
| this.component.dataZoom.rectZoom(); |
| this._iconDisable(this._iconShapeMap['dataZoomReset']); |
| this.zr.refreshNextFrame(); |
| } |
| return true; |
| }, |
| _resetMark: function () { |
| this._marking = false; |
| if (this._markStart) { |
| this._markStart = false; |
| if (this._iconShapeMap['mark']) { |
| this.zr.modShape(this._iconShapeMap['mark'].id, { style: { strokeColor: this._iconShapeMap['mark'].highlightStyle.strokeColor } }); |
| } |
| this.zr.un(zrConfig.EVENT.CLICK, this._onclick); |
| this.zr.un(zrConfig.EVENT.MOUSEMOVE, this._onmousemove); |
| } |
| }, |
| _resetZoom: function () { |
| this._zooming = false; |
| if (this._zoomStart) { |
| this._zoomStart = false; |
| if (this._iconShapeMap['dataZoom']) { |
| this.zr.modShape(this._iconShapeMap['dataZoom'].id, { style: { strokeColor: this._iconShapeMap['dataZoom'].highlightStyle.strokeColor } }); |
| } |
| this.zr.un(zrConfig.EVENT.MOUSEDOWN, this._onmousedown); |
| this.zr.un(zrConfig.EVENT.MOUSEUP, this._onmouseup); |
| this.zr.un(zrConfig.EVENT.MOUSEMOVE, this._onmousemove); |
| } |
| }, |
| _iconDisable: function (target) { |
| if (target.type != 'image') { |
| this.zr.modShape(target.id, { |
| hoverable: false, |
| clickable: false, |
| style: { strokeColor: this._disableColor } |
| }); |
| } else { |
| this.zr.modShape(target.id, { |
| hoverable: false, |
| clickable: false, |
| style: { opacity: 0.3 } |
| }); |
| } |
| }, |
| _iconEnable: function (target) { |
| if (target.type != 'image') { |
| this.zr.modShape(target.id, { |
| hoverable: true, |
| clickable: true, |
| style: { strokeColor: target.highlightStyle.strokeColor } |
| }); |
| } else { |
| this.zr.modShape(target.id, { |
| hoverable: true, |
| clickable: true, |
| style: { opacity: 0.8 } |
| }); |
| } |
| }, |
| __onDataView: function () { |
| this._dataView.show(this.option); |
| return true; |
| }, |
| __onRestore: function () { |
| this._resetMark(); |
| this._resetZoom(); |
| this.messageCenter.dispatch(ecConfig.EVENT.RESTORE, null, null, this.myChart); |
| return true; |
| }, |
| __onSaveAsImage: function () { |
| var saveOption = this.option.toolbox.feature.saveAsImage; |
| var imgType = saveOption.type || 'png'; |
| if (imgType != 'png' && imgType != 'jpeg') { |
| imgType = 'png'; |
| } |
| var image; |
| if (!this.myChart.isConnected()) { |
| image = this.zr.toDataURL('image/' + imgType, this.option.backgroundColor && this.option.backgroundColor.replace(' ', '') === 'rgba(0,0,0,0)' ? '#fff' : this.option.backgroundColor); |
| } else { |
| image = this.myChart.getConnectedDataURL(imgType); |
| } |
| var downloadDiv = document.createElement('div'); |
| downloadDiv.id = '__echarts_download_wrap__'; |
| downloadDiv.style.cssText = 'position:fixed;' + 'z-index:99999;' + 'display:block;' + 'top:0;left:0;' + 'background-color:rgba(33,33,33,0.5);' + 'text-align:center;' + 'width:100%;' + 'height:100%;' + 'line-height:' + document.documentElement.clientHeight + 'px;'; |
| var downloadLink = document.createElement('a'); |
| downloadLink.href = image; |
| downloadLink.setAttribute('download', (saveOption.name ? saveOption.name : this.option.title && (this.option.title.text || this.option.title.subtext) ? this.option.title.text || this.option.title.subtext : 'ECharts') + '.' + imgType); |
| downloadLink.innerHTML = '<img style="vertical-align:middle" src="' + image + '" title="' + (!!window.ActiveXObject || 'ActiveXObject' in window ? '右键->图片另存为' : saveOption.lang ? saveOption.lang[0] : '点击保存') + '"/>'; |
| downloadDiv.appendChild(downloadLink); |
| document.body.appendChild(downloadDiv); |
| downloadLink = null; |
| downloadDiv = null; |
| setTimeout(function () { |
| var _d = document.getElementById('__echarts_download_wrap__'); |
| if (_d) { |
| _d.onclick = function () { |
| var d = document.getElementById('__echarts_download_wrap__'); |
| d.onclick = null; |
| d.innerHTML = ''; |
| document.body.removeChild(d); |
| d = null; |
| }; |
| _d = null; |
| } |
| }, 500); |
| return; |
| }, |
| __onMagicType: function (param) { |
| this._resetMark(); |
| var itemName = param.target._name; |
| if (!this._magicType[itemName]) { |
| this._magicType[itemName] = true; |
| if (itemName === ecConfig.CHART_TYPE_LINE) { |
| this._magicType[ecConfig.CHART_TYPE_BAR] = false; |
| } else if (itemName === ecConfig.CHART_TYPE_BAR) { |
| this._magicType[ecConfig.CHART_TYPE_LINE] = false; |
| } |
| if (itemName === ecConfig.CHART_TYPE_PIE) { |
| this._magicType[ecConfig.CHART_TYPE_FUNNEL] = false; |
| } else if (itemName === ecConfig.CHART_TYPE_FUNNEL) { |
| this._magicType[ecConfig.CHART_TYPE_PIE] = false; |
| } |
| if (itemName === ecConfig.CHART_TYPE_FORCE) { |
| this._magicType[ecConfig.CHART_TYPE_CHORD] = false; |
| } else if (itemName === ecConfig.CHART_TYPE_CHORD) { |
| this._magicType[ecConfig.CHART_TYPE_FORCE] = false; |
| } |
| if (itemName === _MAGICTYPE_STACK) { |
| this._magicType[_MAGICTYPE_TILED] = false; |
| } else if (itemName === _MAGICTYPE_TILED) { |
| this._magicType[_MAGICTYPE_STACK] = false; |
| } |
| this.messageCenter.dispatch(ecConfig.EVENT.MAGIC_TYPE_CHANGED, param.event, { magicType: this._magicType }, this.myChart); |
| } |
| return true; |
| }, |
| setMagicType: function (magicType) { |
| this._resetMark(); |
| this._magicType = magicType; |
| !this._isSilence && this.messageCenter.dispatch(ecConfig.EVENT.MAGIC_TYPE_CHANGED, null, { magicType: this._magicType }, this.myChart); |
| }, |
| __onCustomHandler: function (param) { |
| var target = param.target.style.iconType; |
| var featureHandler = this.option.toolbox.feature[target].onclick; |
| if (typeof featureHandler === 'function') { |
| featureHandler.call(this, this.option); |
| } |
| }, |
| reset: function (newOption, isRestore) { |
| isRestore && this.clear(); |
| if (this.query(newOption, 'toolbox.show') && this.query(newOption, 'toolbox.feature.magicType.show')) { |
| var magicType = newOption.toolbox.feature.magicType.type; |
| var len = magicType.length; |
| this._magicMap = {}; |
| while (len--) { |
| this._magicMap[magicType[len]] = true; |
| } |
| len = newOption.series.length; |
| var oriType; |
| var axis; |
| while (len--) { |
| oriType = newOption.series[len].type; |
| if (this._magicMap[oriType]) { |
| axis = newOption.xAxis instanceof Array ? newOption.xAxis[newOption.series[len].xAxisIndex || 0] : newOption.xAxis; |
| if (axis && (axis.type || 'category') === 'category') { |
| axis.__boundaryGap = axis.boundaryGap != null ? axis.boundaryGap : true; |
| } |
| axis = newOption.yAxis instanceof Array ? newOption.yAxis[newOption.series[len].yAxisIndex || 0] : newOption.yAxis; |
| if (axis && axis.type === 'category') { |
| axis.__boundaryGap = axis.boundaryGap != null ? axis.boundaryGap : true; |
| } |
| newOption.series[len].__type = oriType; |
| newOption.series[len].__itemStyle = zrUtil.clone(newOption.series[len].itemStyle || {}); |
| } |
| if (this._magicMap[_MAGICTYPE_STACK] || this._magicMap[_MAGICTYPE_TILED]) { |
| newOption.series[len].__stack = newOption.series[len].stack; |
| } |
| } |
| } |
| this._magicType = isRestore ? {} : this._magicType || {}; |
| for (var itemName in this._magicType) { |
| if (this._magicType[itemName]) { |
| this.option = newOption; |
| this.getMagicOption(); |
| break; |
| } |
| } |
| var zoomOption = newOption.dataZoom; |
| if (zoomOption && zoomOption.show) { |
| var start = zoomOption.start != null && zoomOption.start >= 0 && zoomOption.start <= 100 ? zoomOption.start : 0; |
| var end = zoomOption.end != null && zoomOption.end >= 0 && zoomOption.end <= 100 ? zoomOption.end : 100; |
| if (start > end) { |
| start = start + end; |
| end = start - end; |
| start = start - end; |
| } |
| this._zoomQueue = [{ |
| start: start, |
| end: end, |
| start2: 0, |
| end2: 100 |
| }]; |
| } else { |
| this._zoomQueue = []; |
| } |
| }, |
| getMagicOption: function () { |
| var axis; |
| var chartType; |
| if (this._magicType[ecConfig.CHART_TYPE_LINE] || this._magicType[ecConfig.CHART_TYPE_BAR]) { |
| var boundaryGap = this._magicType[ecConfig.CHART_TYPE_LINE] ? false : true; |
| for (var i = 0, l = this.option.series.length; i < l; i++) { |
| chartType = this.option.series[i].type; |
| if (chartType == ecConfig.CHART_TYPE_LINE || chartType == ecConfig.CHART_TYPE_BAR) { |
| axis = this.option.xAxis instanceof Array ? this.option.xAxis[this.option.series[i].xAxisIndex || 0] : this.option.xAxis; |
| if (axis && (axis.type || 'category') === 'category') { |
| axis.boundaryGap = boundaryGap ? true : axis.__boundaryGap; |
| } |
| axis = this.option.yAxis instanceof Array ? this.option.yAxis[this.option.series[i].yAxisIndex || 0] : this.option.yAxis; |
| if (axis && axis.type === 'category') { |
| axis.boundaryGap = boundaryGap ? true : axis.__boundaryGap; |
| } |
| } |
| } |
| this._defaultMagic(ecConfig.CHART_TYPE_LINE, ecConfig.CHART_TYPE_BAR); |
| } |
| this._defaultMagic(ecConfig.CHART_TYPE_CHORD, ecConfig.CHART_TYPE_FORCE); |
| this._defaultMagic(ecConfig.CHART_TYPE_PIE, ecConfig.CHART_TYPE_FUNNEL); |
| if (this._magicType[_MAGICTYPE_STACK] || this._magicType[_MAGICTYPE_TILED]) { |
| for (var i = 0, l = this.option.series.length; i < l; i++) { |
| if (this._magicType[_MAGICTYPE_STACK]) { |
| this.option.series[i].stack = '_ECHARTS_STACK_KENER_2014_'; |
| chartType = _MAGICTYPE_STACK; |
| } else if (this._magicType[_MAGICTYPE_TILED]) { |
| this.option.series[i].stack = null; |
| chartType = _MAGICTYPE_TILED; |
| } |
| if (this._featureOption[chartType + 'Chart']) { |
| zrUtil.merge(this.option.series[i], this._featureOption[chartType + 'Chart'] || {}, true); |
| } |
| } |
| } |
| return this.option; |
| }, |
| _defaultMagic: function (cType1, cType2) { |
| if (this._magicType[cType1] || this._magicType[cType2]) { |
| for (var i = 0, l = this.option.series.length; i < l; i++) { |
| var chartType = this.option.series[i].type; |
| if (chartType == cType1 || chartType == cType2) { |
| this.option.series[i].type = this._magicType[cType1] ? cType1 : cType2; |
| this.option.series[i].itemStyle = zrUtil.clone(this.option.series[i].__itemStyle); |
| chartType = this.option.series[i].type; |
| if (this._featureOption[chartType + 'Chart']) { |
| zrUtil.merge(this.option.series[i], this._featureOption[chartType + 'Chart'] || {}, true); |
| } |
| } |
| } |
| } |
| }, |
| silence: function (s) { |
| this._isSilence = s; |
| }, |
| resize: function () { |
| this._resetMark(); |
| this.clear(); |
| if (this.option && this.option.toolbox && this.option.toolbox.show) { |
| this._buildShape(); |
| } |
| if (this._dataView) { |
| this._dataView.resize(); |
| } |
| }, |
| hideDataView: function () { |
| if (this._dataView) { |
| this._dataView.hide(); |
| } |
| }, |
| clear: function (notMark) { |
| if (this.zr) { |
| this.zr.delShape(this.shapeList); |
| this.shapeList = []; |
| if (!notMark) { |
| this.zr.delShape(this._markShapeList); |
| this._markShapeList = []; |
| } |
| } |
| }, |
| onbeforDispose: function () { |
| if (this._dataView) { |
| this._dataView.dispose(); |
| this._dataView = null; |
| } |
| this._markShapeList = null; |
| }, |
| refresh: function (newOption) { |
| if (newOption) { |
| this._resetMark(); |
| this._resetZoom(); |
| newOption.toolbox = this.reformOption(newOption.toolbox); |
| this.option = newOption; |
| this.clear(true); |
| if (newOption.toolbox.show) { |
| this._buildShape(); |
| } |
| this.hideDataView(); |
| } |
| } |
| }; |
| zrUtil.inherits(Toolbox, Base); |
| require('../component').define('toolbox', Toolbox); |
| return Toolbox; |
| });define('echarts/component', [], function () { |
| var self = {}; |
| var _componentLibrary = {}; |
| self.define = function (name, clazz) { |
| _componentLibrary[name] = clazz; |
| return self; |
| }; |
| self.get = function (name) { |
| return _componentLibrary[name]; |
| }; |
| return self; |
| });define('echarts/component/title', [ |
| 'require', |
| './base', |
| 'zrender/shape/Text', |
| 'zrender/shape/Rectangle', |
| '../config', |
| 'zrender/tool/util', |
| 'zrender/tool/area', |
| 'zrender/tool/color', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var TextShape = require('zrender/shape/Text'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var ecConfig = require('../config'); |
| ecConfig.title = { |
| zlevel: 0, |
| z: 6, |
| show: true, |
| text: '', |
| subtext: '', |
| x: 'left', |
| y: 'top', |
| backgroundColor: 'rgba(0,0,0,0)', |
| borderColor: '#ccc', |
| borderWidth: 0, |
| padding: 5, |
| itemGap: 5, |
| textStyle: { |
| fontSize: 18, |
| fontWeight: 'bolder', |
| color: '#333' |
| }, |
| subtextStyle: { color: '#aaa' } |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| var zrArea = require('zrender/tool/area'); |
| var zrColor = require('zrender/tool/color'); |
| function Title(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.refresh(option); |
| } |
| Title.prototype = { |
| type: ecConfig.COMPONENT_TYPE_TITLE, |
| _buildShape: function () { |
| if (!this.titleOption.show) { |
| return; |
| } |
| this._itemGroupLocation = this._getItemGroupLocation(); |
| this._buildBackground(); |
| this._buildItem(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| }, |
| _buildItem: function () { |
| var text = this.titleOption.text; |
| var link = this.titleOption.link; |
| var target = this.titleOption.target; |
| var subtext = this.titleOption.subtext; |
| var sublink = this.titleOption.sublink; |
| var subtarget = this.titleOption.subtarget; |
| var font = this.getFont(this.titleOption.textStyle); |
| var subfont = this.getFont(this.titleOption.subtextStyle); |
| var x = this._itemGroupLocation.x; |
| var y = this._itemGroupLocation.y; |
| var width = this._itemGroupLocation.width; |
| var height = this._itemGroupLocation.height; |
| var textShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| y: y, |
| color: this.titleOption.textStyle.color, |
| text: text, |
| textFont: font, |
| textBaseline: 'top' |
| }, |
| highlightStyle: { |
| color: zrColor.lift(this.titleOption.textStyle.color, 1), |
| brushType: 'fill' |
| }, |
| hoverable: false |
| }; |
| if (link) { |
| textShape.hoverable = true; |
| textShape.clickable = true; |
| textShape.onclick = function () { |
| if (!target || target != 'self') { |
| window.open(link); |
| } else { |
| window.location = link; |
| } |
| }; |
| } |
| var subtextShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| y: y + height, |
| color: this.titleOption.subtextStyle.color, |
| text: subtext, |
| textFont: subfont, |
| textBaseline: 'bottom' |
| }, |
| highlightStyle: { |
| color: zrColor.lift(this.titleOption.subtextStyle.color, 1), |
| brushType: 'fill' |
| }, |
| hoverable: false |
| }; |
| if (sublink) { |
| subtextShape.hoverable = true; |
| subtextShape.clickable = true; |
| subtextShape.onclick = function () { |
| if (!subtarget || subtarget != 'self') { |
| window.open(sublink); |
| } else { |
| window.location = sublink; |
| } |
| }; |
| } |
| switch (this.titleOption.x) { |
| case 'center': |
| textShape.style.x = subtextShape.style.x = x + width / 2; |
| textShape.style.textAlign = subtextShape.style.textAlign = 'center'; |
| break; |
| case 'left': |
| textShape.style.x = subtextShape.style.x = x; |
| textShape.style.textAlign = subtextShape.style.textAlign = 'left'; |
| break; |
| case 'right': |
| textShape.style.x = subtextShape.style.x = x + width; |
| textShape.style.textAlign = subtextShape.style.textAlign = 'right'; |
| break; |
| default: |
| x = this.titleOption.x - 0; |
| x = isNaN(x) ? 0 : x; |
| textShape.style.x = subtextShape.style.x = x; |
| break; |
| } |
| if (this.titleOption.textAlign) { |
| textShape.style.textAlign = subtextShape.style.textAlign = this.titleOption.textAlign; |
| } |
| this.shapeList.push(new TextShape(textShape)); |
| subtext !== '' && this.shapeList.push(new TextShape(subtextShape)); |
| }, |
| _buildBackground: function () { |
| var padding = this.reformCssArray(this.titleOption.padding); |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._itemGroupLocation.x - padding[3], |
| y: this._itemGroupLocation.y - padding[0], |
| width: this._itemGroupLocation.width + padding[3] + padding[1], |
| height: this._itemGroupLocation.height + padding[0] + padding[2], |
| brushType: this.titleOption.borderWidth === 0 ? 'fill' : 'both', |
| color: this.titleOption.backgroundColor, |
| strokeColor: this.titleOption.borderColor, |
| lineWidth: this.titleOption.borderWidth |
| } |
| })); |
| }, |
| _getItemGroupLocation: function () { |
| var padding = this.reformCssArray(this.titleOption.padding); |
| var text = this.titleOption.text; |
| var subtext = this.titleOption.subtext; |
| var font = this.getFont(this.titleOption.textStyle); |
| var subfont = this.getFont(this.titleOption.subtextStyle); |
| var totalWidth = Math.max(zrArea.getTextWidth(text, font), zrArea.getTextWidth(subtext, subfont)); |
| var totalHeight = zrArea.getTextHeight(text, font) + (subtext === '' ? 0 : this.titleOption.itemGap + zrArea.getTextHeight(subtext, subfont)); |
| var x; |
| var zrWidth = this.zr.getWidth(); |
| switch (this.titleOption.x) { |
| case 'center': |
| x = Math.floor((zrWidth - totalWidth) / 2); |
| break; |
| case 'left': |
| x = padding[3] + this.titleOption.borderWidth; |
| break; |
| case 'right': |
| x = zrWidth - totalWidth - padding[1] - this.titleOption.borderWidth; |
| break; |
| default: |
| x = this.titleOption.x - 0; |
| x = isNaN(x) ? 0 : x; |
| break; |
| } |
| var y; |
| var zrHeight = this.zr.getHeight(); |
| switch (this.titleOption.y) { |
| case 'top': |
| y = padding[0] + this.titleOption.borderWidth; |
| break; |
| case 'bottom': |
| y = zrHeight - totalHeight - padding[2] - this.titleOption.borderWidth; |
| break; |
| case 'center': |
| y = Math.floor((zrHeight - totalHeight) / 2); |
| break; |
| default: |
| y = this.titleOption.y - 0; |
| y = isNaN(y) ? 0 : y; |
| break; |
| } |
| return { |
| x: x, |
| y: y, |
| width: totalWidth, |
| height: totalHeight |
| }; |
| }, |
| refresh: function (newOption) { |
| if (newOption) { |
| this.option = newOption; |
| this.option.title = this.reformOption(this.option.title); |
| this.titleOption = this.option.title; |
| this.titleOption.textStyle = this.getTextStyle(this.titleOption.textStyle); |
| this.titleOption.subtextStyle = this.getTextStyle(this.titleOption.subtextStyle); |
| } |
| this.clear(); |
| this._buildShape(); |
| } |
| }; |
| zrUtil.inherits(Title, Base); |
| require('../component').define('title', Title); |
| return Title; |
| });define('echarts/component/tooltip', [ |
| 'require', |
| './base', |
| '../util/shape/Cross', |
| 'zrender/shape/Line', |
| 'zrender/shape/Rectangle', |
| '../config', |
| '../util/ecData', |
| 'zrender/config', |
| 'zrender/tool/event', |
| 'zrender/tool/area', |
| 'zrender/tool/color', |
| 'zrender/tool/util', |
| 'zrender/shape/Base', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var CrossShape = require('../util/shape/Cross'); |
| var LineShape = require('zrender/shape/Line'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var rectangleInstance = new RectangleShape({}); |
| var ecConfig = require('../config'); |
| ecConfig.tooltip = { |
| zlevel: 1, |
| z: 8, |
| show: true, |
| showContent: true, |
| trigger: 'item', |
| islandFormatter: '{a} <br/>{b} : {c}', |
| showDelay: 20, |
| hideDelay: 100, |
| transitionDuration: 0.4, |
| enterable: false, |
| backgroundColor: 'rgba(0,0,0,0.7)', |
| borderColor: '#333', |
| borderRadius: 4, |
| borderWidth: 0, |
| padding: 5, |
| axisPointer: { |
| type: 'line', |
| lineStyle: { |
| color: '#48b', |
| width: 2, |
| type: 'solid' |
| }, |
| crossStyle: { |
| color: '#1e90ff', |
| width: 1, |
| type: 'dashed' |
| }, |
| shadowStyle: { |
| color: 'rgba(150,150,150,0.3)', |
| width: 'auto', |
| type: 'default' |
| } |
| }, |
| textStyle: { color: '#fff' } |
| }; |
| var ecData = require('../util/ecData'); |
| var zrConfig = require('zrender/config'); |
| var zrEvent = require('zrender/tool/event'); |
| var zrArea = require('zrender/tool/area'); |
| var zrColor = require('zrender/tool/color'); |
| var zrUtil = require('zrender/tool/util'); |
| var zrShapeBase = require('zrender/shape/Base'); |
| function Tooltip(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.dom = myChart.dom; |
| var self = this; |
| self._onmousemove = function (param) { |
| return self.__onmousemove(param); |
| }; |
| self._onglobalout = function (param) { |
| return self.__onglobalout(param); |
| }; |
| this.zr.on(zrConfig.EVENT.MOUSEMOVE, self._onmousemove); |
| this.zr.on(zrConfig.EVENT.GLOBALOUT, self._onglobalout); |
| self._hide = function (param) { |
| return self.__hide(param); |
| }; |
| self._tryShow = function (param) { |
| return self.__tryShow(param); |
| }; |
| self._refixed = function (param) { |
| return self.__refixed(param); |
| }; |
| self._setContent = function (ticket, res) { |
| return self.__setContent(ticket, res); |
| }; |
| this._tDom = this._tDom || document.createElement('div'); |
| this._tDom.onselectstart = function () { |
| return false; |
| }; |
| this._tDom.onmouseover = function () { |
| self._mousein = true; |
| }; |
| this._tDom.onmouseout = function () { |
| self._mousein = false; |
| }; |
| this._tDom.className = 'echarts-tooltip'; |
| this._tDom.style.position = 'absolute'; |
| this.hasAppend = false; |
| this._axisLineShape && this.zr.delShape(this._axisLineShape.id); |
| this._axisLineShape = new LineShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| invisible: true, |
| hoverable: false |
| }); |
| this.shapeList.push(this._axisLineShape); |
| this.zr.addShape(this._axisLineShape); |
| this._axisShadowShape && this.zr.delShape(this._axisShadowShape.id); |
| this._axisShadowShape = new LineShape({ |
| zlevel: this.getZlevelBase(), |
| z: 1, |
| invisible: true, |
| hoverable: false |
| }); |
| this.shapeList.push(this._axisShadowShape); |
| this.zr.addShape(this._axisShadowShape); |
| this._axisCrossShape && this.zr.delShape(this._axisCrossShape.id); |
| this._axisCrossShape = new CrossShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| invisible: true, |
| hoverable: false |
| }); |
| this.shapeList.push(this._axisCrossShape); |
| this.zr.addShape(this._axisCrossShape); |
| this.showing = false; |
| this.refresh(option); |
| } |
| Tooltip.prototype = { |
| type: ecConfig.COMPONENT_TYPE_TOOLTIP, |
| _gCssText: 'position:absolute;display:block;border-style:solid;white-space:nowrap;', |
| _style: function (opt) { |
| if (!opt) { |
| return ''; |
| } |
| var cssText = []; |
| if (opt.transitionDuration) { |
| var transitionText = 'left ' + opt.transitionDuration + 's,' + 'top ' + opt.transitionDuration + 's'; |
| cssText.push('transition:' + transitionText); |
| cssText.push('-moz-transition:' + transitionText); |
| cssText.push('-webkit-transition:' + transitionText); |
| cssText.push('-o-transition:' + transitionText); |
| } |
| if (opt.backgroundColor) { |
| cssText.push('background-Color:' + zrColor.toHex(opt.backgroundColor)); |
| cssText.push('filter:alpha(opacity=70)'); |
| cssText.push('background-Color:' + opt.backgroundColor); |
| } |
| if (opt.borderWidth != null) { |
| cssText.push('border-width:' + opt.borderWidth + 'px'); |
| } |
| if (opt.borderColor != null) { |
| cssText.push('border-color:' + opt.borderColor); |
| } |
| if (opt.borderRadius != null) { |
| cssText.push('border-radius:' + opt.borderRadius + 'px'); |
| cssText.push('-moz-border-radius:' + opt.borderRadius + 'px'); |
| cssText.push('-webkit-border-radius:' + opt.borderRadius + 'px'); |
| cssText.push('-o-border-radius:' + opt.borderRadius + 'px'); |
| } |
| var textStyle = opt.textStyle; |
| if (textStyle) { |
| textStyle.color && cssText.push('color:' + textStyle.color); |
| textStyle.decoration && cssText.push('text-decoration:' + textStyle.decoration); |
| textStyle.align && cssText.push('text-align:' + textStyle.align); |
| textStyle.fontFamily && cssText.push('font-family:' + textStyle.fontFamily); |
| textStyle.fontSize && cssText.push('font-size:' + textStyle.fontSize + 'px'); |
| textStyle.fontSize && cssText.push('line-height:' + Math.round(textStyle.fontSize * 3 / 2) + 'px'); |
| textStyle.fontStyle && cssText.push('font-style:' + textStyle.fontStyle); |
| textStyle.fontWeight && cssText.push('font-weight:' + textStyle.fontWeight); |
| } |
| var padding = opt.padding; |
| if (padding != null) { |
| padding = this.reformCssArray(padding); |
| cssText.push('padding:' + padding[0] + 'px ' + padding[1] + 'px ' + padding[2] + 'px ' + padding[3] + 'px'); |
| } |
| cssText = cssText.join(';') + ';'; |
| return cssText; |
| }, |
| __hide: function () { |
| this._lastDataIndex = -1; |
| this._lastSeriesIndex = -1; |
| this._lastItemTriggerId = -1; |
| if (this._tDom) { |
| this._tDom.style.display = 'none'; |
| } |
| var needRefresh = false; |
| if (!this._axisLineShape.invisible) { |
| this._axisLineShape.invisible = true; |
| this.zr.modShape(this._axisLineShape.id); |
| needRefresh = true; |
| } |
| if (!this._axisShadowShape.invisible) { |
| this._axisShadowShape.invisible = true; |
| this.zr.modShape(this._axisShadowShape.id); |
| needRefresh = true; |
| } |
| if (!this._axisCrossShape.invisible) { |
| this._axisCrossShape.invisible = true; |
| this.zr.modShape(this._axisCrossShape.id); |
| needRefresh = true; |
| } |
| if (this._lastTipShape && this._lastTipShape.tipShape.length > 0) { |
| this.zr.delShape(this._lastTipShape.tipShape); |
| this._lastTipShape = false; |
| this.shapeList.length = 2; |
| } |
| needRefresh && this.zr.refreshNextFrame(); |
| this.showing = false; |
| }, |
| _show: function (position, x, y, specialCssText) { |
| var domHeight = this._tDom.offsetHeight; |
| var domWidth = this._tDom.offsetWidth; |
| if (position) { |
| if (typeof position === 'function') { |
| position = position([ |
| x, |
| y |
| ]); |
| } |
| if (position instanceof Array) { |
| x = position[0]; |
| y = position[1]; |
| } |
| } |
| if (x + domWidth > this._zrWidth) { |
| x -= domWidth + 40; |
| } |
| if (y + domHeight > this._zrHeight) { |
| y -= domHeight - 20; |
| } |
| if (y < 20) { |
| y = 0; |
| } |
| this._tDom.style.cssText = this._gCssText + this._defaultCssText + (specialCssText ? specialCssText : '') + 'left:' + x + 'px;top:' + y + 'px;'; |
| if (domHeight < 10 || domWidth < 10) { |
| setTimeout(this._refixed, 20); |
| } |
| this.showing = true; |
| }, |
| __refixed: function () { |
| if (this._tDom) { |
| var cssText = ''; |
| var domHeight = this._tDom.offsetHeight; |
| var domWidth = this._tDom.offsetWidth; |
| if (this._tDom.offsetLeft + domWidth > this._zrWidth) { |
| cssText += 'left:' + (this._zrWidth - domWidth - 20) + 'px;'; |
| } |
| if (this._tDom.offsetTop + domHeight > this._zrHeight) { |
| cssText += 'top:' + (this._zrHeight - domHeight - 10) + 'px;'; |
| } |
| if (cssText !== '') { |
| this._tDom.style.cssText += cssText; |
| } |
| } |
| }, |
| __tryShow: function () { |
| var needShow; |
| var trigger; |
| if (!this._curTarget) { |
| this._findPolarTrigger() || this._findAxisTrigger(); |
| } else { |
| if (this._curTarget._type === 'island' && this.option.tooltip.show) { |
| this._showItemTrigger(); |
| return; |
| } |
| var serie = ecData.get(this._curTarget, 'series'); |
| var data = ecData.get(this._curTarget, 'data'); |
| needShow = this.deepQuery([ |
| data, |
| serie, |
| this.option |
| ], 'tooltip.show'); |
| if (serie == null || data == null || !needShow) { |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| this._hidingTicket = setTimeout(this._hide, this._hideDelay); |
| } else { |
| trigger = this.deepQuery([ |
| data, |
| serie, |
| this.option |
| ], 'tooltip.trigger'); |
| trigger === 'axis' ? this._showAxisTrigger(serie.xAxisIndex, serie.yAxisIndex, ecData.get(this._curTarget, 'dataIndex')) : this._showItemTrigger(); |
| } |
| } |
| }, |
| _findAxisTrigger: function () { |
| if (!this.component.xAxis || !this.component.yAxis) { |
| this._hidingTicket = setTimeout(this._hide, this._hideDelay); |
| return; |
| } |
| var series = this.option.series; |
| var xAxisIndex; |
| var yAxisIndex; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (this.deepQuery([ |
| series[i], |
| this.option |
| ], 'tooltip.trigger') === 'axis') { |
| xAxisIndex = series[i].xAxisIndex || 0; |
| yAxisIndex = series[i].yAxisIndex || 0; |
| if (this.component.xAxis.getAxis(xAxisIndex) && this.component.xAxis.getAxis(xAxisIndex).type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY) { |
| this._showAxisTrigger(xAxisIndex, yAxisIndex, this._getNearestDataIndex('x', this.component.xAxis.getAxis(xAxisIndex))); |
| return; |
| } else if (this.component.yAxis.getAxis(yAxisIndex) && this.component.yAxis.getAxis(yAxisIndex).type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY) { |
| this._showAxisTrigger(xAxisIndex, yAxisIndex, this._getNearestDataIndex('y', this.component.yAxis.getAxis(yAxisIndex))); |
| return; |
| } else { |
| this._showAxisTrigger(xAxisIndex, yAxisIndex, -1); |
| return; |
| } |
| } |
| } |
| if (this.option.tooltip.axisPointer.type === 'cross') { |
| this._showAxisTrigger(-1, -1, -1); |
| } |
| }, |
| _findPolarTrigger: function () { |
| if (!this.component.polar) { |
| return false; |
| } |
| var x = zrEvent.getX(this._event); |
| var y = zrEvent.getY(this._event); |
| var polarIndex = this.component.polar.getNearestIndex([ |
| x, |
| y |
| ]); |
| var valueIndex; |
| if (polarIndex) { |
| valueIndex = polarIndex.valueIndex; |
| polarIndex = polarIndex.polarIndex; |
| } else { |
| polarIndex = -1; |
| } |
| if (polarIndex != -1) { |
| return this._showPolarTrigger(polarIndex, valueIndex); |
| } |
| return false; |
| }, |
| _getNearestDataIndex: function (direction, categoryAxis) { |
| var dataIndex = -1; |
| var x = zrEvent.getX(this._event); |
| var y = zrEvent.getY(this._event); |
| if (direction === 'x') { |
| var left; |
| var right; |
| var xEnd = this.component.grid.getXend(); |
| var curCoord = categoryAxis.getCoordByIndex(dataIndex); |
| while (curCoord < xEnd) { |
| right = curCoord; |
| if (curCoord <= x) { |
| left = curCoord; |
| } else { |
| break; |
| } |
| curCoord = categoryAxis.getCoordByIndex(++dataIndex); |
| } |
| if (dataIndex <= 0) { |
| dataIndex = 0; |
| } else if (x - left <= right - x) { |
| dataIndex -= 1; |
| } else { |
| if (categoryAxis.getNameByIndex(dataIndex) == null) { |
| dataIndex -= 1; |
| } |
| } |
| return dataIndex; |
| } else { |
| var top; |
| var bottom; |
| var yStart = this.component.grid.getY(); |
| var curCoord = categoryAxis.getCoordByIndex(dataIndex); |
| while (curCoord > yStart) { |
| top = curCoord; |
| if (curCoord >= y) { |
| bottom = curCoord; |
| } else { |
| break; |
| } |
| curCoord = categoryAxis.getCoordByIndex(++dataIndex); |
| } |
| if (dataIndex <= 0) { |
| dataIndex = 0; |
| } else if (y - top >= bottom - y) { |
| dataIndex -= 1; |
| } else { |
| if (categoryAxis.getNameByIndex(dataIndex) == null) { |
| dataIndex -= 1; |
| } |
| } |
| return dataIndex; |
| } |
| return -1; |
| }, |
| _showAxisTrigger: function (xAxisIndex, yAxisIndex, dataIndex) { |
| !this._event.connectTrigger && this.messageCenter.dispatch(ecConfig.EVENT.TOOLTIP_IN_GRID, this._event, null, this.myChart); |
| if (this.component.xAxis == null || this.component.yAxis == null || xAxisIndex == null || yAxisIndex == null) { |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| this._hidingTicket = setTimeout(this._hide, this._hideDelay); |
| return; |
| } |
| var series = this.option.series; |
| var seriesArray = []; |
| var seriesIndex = []; |
| var categoryAxis; |
| var formatter; |
| var position; |
| var showContent; |
| var specialCssText = ''; |
| if (this.option.tooltip.trigger === 'axis') { |
| if (!this.option.tooltip.show) { |
| return; |
| } |
| formatter = this.option.tooltip.formatter; |
| position = this.option.tooltip.position; |
| } |
| var axisLayout = xAxisIndex != -1 && this.component.xAxis.getAxis(xAxisIndex).type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ? 'xAxis' : yAxisIndex != -1 && this.component.yAxis.getAxis(yAxisIndex).type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ? 'yAxis' : false; |
| var x; |
| var y; |
| if (axisLayout) { |
| var axisIndex = axisLayout == 'xAxis' ? xAxisIndex : yAxisIndex; |
| categoryAxis = this.component[axisLayout].getAxis(axisIndex); |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (!this._isSelected(series[i].name)) { |
| continue; |
| } |
| if (series[i][axisLayout + 'Index'] === axisIndex && this.deepQuery([ |
| series[i], |
| this.option |
| ], 'tooltip.trigger') === 'axis') { |
| showContent = this.query(series[i], 'tooltip.showContent') || showContent; |
| formatter = this.query(series[i], 'tooltip.formatter') || formatter; |
| position = this.query(series[i], 'tooltip.position') || position; |
| specialCssText += this._style(this.query(series[i], 'tooltip')); |
| if (series[i].stack != null && axisLayout == 'xAxis') { |
| seriesArray.unshift(series[i]); |
| seriesIndex.unshift(i); |
| } else { |
| seriesArray.push(series[i]); |
| seriesIndex.push(i); |
| } |
| } |
| } |
| this.messageCenter.dispatch(ecConfig.EVENT.TOOLTIP_HOVER, this._event, { |
| seriesIndex: seriesIndex, |
| dataIndex: dataIndex |
| }, this.myChart); |
| var rect; |
| if (axisLayout == 'xAxis') { |
| x = this.subPixelOptimize(categoryAxis.getCoordByIndex(dataIndex), this._axisLineWidth); |
| y = zrEvent.getY(this._event); |
| rect = [ |
| x, |
| this.component.grid.getY(), |
| x, |
| this.component.grid.getYend() |
| ]; |
| } else { |
| x = zrEvent.getX(this._event); |
| y = this.subPixelOptimize(categoryAxis.getCoordByIndex(dataIndex), this._axisLineWidth); |
| rect = [ |
| this.component.grid.getX(), |
| y, |
| this.component.grid.getXend(), |
| y |
| ]; |
| } |
| this._styleAxisPointer(seriesArray, rect[0], rect[1], rect[2], rect[3], categoryAxis.getGap(), x, y); |
| } else { |
| x = zrEvent.getX(this._event); |
| y = zrEvent.getY(this._event); |
| this._styleAxisPointer(series, this.component.grid.getX(), y, this.component.grid.getXend(), y, 0, x, y); |
| if (dataIndex >= 0) { |
| this._showItemTrigger(true); |
| } else { |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| this._tDom.style.display = 'none'; |
| } |
| } |
| if (seriesArray.length > 0) { |
| this._lastItemTriggerId = -1; |
| if (this._lastDataIndex != dataIndex || this._lastSeriesIndex != seriesIndex[0]) { |
| this._lastDataIndex = dataIndex; |
| this._lastSeriesIndex = seriesIndex[0]; |
| var data; |
| var value; |
| if (typeof formatter === 'function') { |
| var params = []; |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| data = seriesArray[i].data[dataIndex]; |
| value = this.getDataFromOption(data, '-'); |
| params.push({ |
| seriesIndex: seriesIndex[i], |
| seriesName: seriesArray[i].name || '', |
| series: seriesArray[i], |
| dataIndex: dataIndex, |
| data: data, |
| name: categoryAxis.getNameByIndex(dataIndex), |
| value: value, |
| 0: seriesArray[i].name || '', |
| 1: categoryAxis.getNameByIndex(dataIndex), |
| 2: value, |
| 3: data |
| }); |
| } |
| this._curTicket = 'axis:' + dataIndex; |
| this._tDom.innerHTML = formatter.call(this.myChart, params, this._curTicket, this._setContent); |
| } else if (typeof formatter === 'string') { |
| this._curTicket = NaN; |
| formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}'); |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| formatter = formatter.replace('{a' + i + '}', this._encodeHTML(seriesArray[i].name || '')); |
| formatter = formatter.replace('{b' + i + '}', this._encodeHTML(categoryAxis.getNameByIndex(dataIndex))); |
| data = seriesArray[i].data[dataIndex]; |
| data = this.getDataFromOption(data, '-'); |
| formatter = formatter.replace('{c' + i + '}', data instanceof Array ? data : this.numAddCommas(data)); |
| } |
| this._tDom.innerHTML = formatter; |
| } else { |
| this._curTicket = NaN; |
| formatter = this._encodeHTML(categoryAxis.getNameByIndex(dataIndex)); |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| formatter += '<br/>' + this._encodeHTML(seriesArray[i].name || '') + ' : '; |
| data = seriesArray[i].data[dataIndex]; |
| data = this.getDataFromOption(data, '-'); |
| formatter += data instanceof Array ? data : this.numAddCommas(data); |
| } |
| this._tDom.innerHTML = formatter; |
| } |
| } |
| if (showContent === false || !this.option.tooltip.showContent) { |
| return; |
| } |
| if (!this.hasAppend) { |
| this._tDom.style.left = this._zrWidth / 2 + 'px'; |
| this._tDom.style.top = this._zrHeight / 2 + 'px'; |
| this.dom.firstChild.appendChild(this._tDom); |
| this.hasAppend = true; |
| } |
| this._show(position, x + 10, y + 10, specialCssText); |
| } |
| }, |
| _showPolarTrigger: function (polarIndex, dataIndex) { |
| if (this.component.polar == null || polarIndex == null || dataIndex == null || dataIndex < 0) { |
| return false; |
| } |
| var series = this.option.series; |
| var seriesArray = []; |
| var seriesIndex = []; |
| var formatter; |
| var position; |
| var showContent; |
| var specialCssText = ''; |
| if (this.option.tooltip.trigger === 'axis') { |
| if (!this.option.tooltip.show) { |
| return false; |
| } |
| formatter = this.option.tooltip.formatter; |
| position = this.option.tooltip.position; |
| } |
| var indicatorName = this.option.polar[polarIndex].indicator[dataIndex].text; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (!this._isSelected(series[i].name)) { |
| continue; |
| } |
| if (series[i].polarIndex === polarIndex && this.deepQuery([ |
| series[i], |
| this.option |
| ], 'tooltip.trigger') === 'axis') { |
| showContent = this.query(series[i], 'tooltip.showContent') || showContent; |
| formatter = this.query(series[i], 'tooltip.formatter') || formatter; |
| position = this.query(series[i], 'tooltip.position') || position; |
| specialCssText += this._style(this.query(series[i], 'tooltip')); |
| seriesArray.push(series[i]); |
| seriesIndex.push(i); |
| } |
| } |
| if (seriesArray.length > 0) { |
| var polarData; |
| var data; |
| var value; |
| var params = []; |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| polarData = seriesArray[i].data; |
| for (var j = 0, k = polarData.length; j < k; j++) { |
| data = polarData[j]; |
| if (!this._isSelected(data.name)) { |
| continue; |
| } |
| data = data != null ? data : { |
| name: '', |
| value: { dataIndex: '-' } |
| }; |
| value = this.getDataFromOption(data.value[dataIndex]); |
| params.push({ |
| seriesIndex: seriesIndex[i], |
| seriesName: seriesArray[i].name || '', |
| series: seriesArray[i], |
| dataIndex: dataIndex, |
| data: data, |
| name: data.name, |
| indicator: indicatorName, |
| value: value, |
| 0: seriesArray[i].name || '', |
| 1: data.name, |
| 2: value, |
| 3: indicatorName |
| }); |
| } |
| } |
| if (params.length <= 0) { |
| return; |
| } |
| this._lastItemTriggerId = -1; |
| if (this._lastDataIndex != dataIndex || this._lastSeriesIndex != seriesIndex[0]) { |
| this._lastDataIndex = dataIndex; |
| this._lastSeriesIndex = seriesIndex[0]; |
| if (typeof formatter === 'function') { |
| this._curTicket = 'axis:' + dataIndex; |
| this._tDom.innerHTML = formatter.call(this.myChart, params, this._curTicket, this._setContent); |
| } else if (typeof formatter === 'string') { |
| formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}').replace('{d}', '{d0}'); |
| for (var i = 0, l = params.length; i < l; i++) { |
| formatter = formatter.replace('{a' + i + '}', this._encodeHTML(params[i].seriesName)); |
| formatter = formatter.replace('{b' + i + '}', this._encodeHTML(params[i].name)); |
| formatter = formatter.replace('{c' + i + '}', this.numAddCommas(params[i].value)); |
| formatter = formatter.replace('{d' + i + '}', this._encodeHTML(params[i].indicator)); |
| } |
| this._tDom.innerHTML = formatter; |
| } else { |
| formatter = this._encodeHTML(params[0].name) + '<br/>' + this._encodeHTML(params[0].indicator) + ' : ' + this.numAddCommas(params[0].value); |
| for (var i = 1, l = params.length; i < l; i++) { |
| formatter += '<br/>' + this._encodeHTML(params[i].name) + '<br/>'; |
| formatter += this._encodeHTML(params[i].indicator) + ' : ' + this.numAddCommas(params[i].value); |
| } |
| this._tDom.innerHTML = formatter; |
| } |
| } |
| if (showContent === false || !this.option.tooltip.showContent) { |
| return; |
| } |
| if (!this.hasAppend) { |
| this._tDom.style.left = this._zrWidth / 2 + 'px'; |
| this._tDom.style.top = this._zrHeight / 2 + 'px'; |
| this.dom.firstChild.appendChild(this._tDom); |
| this.hasAppend = true; |
| } |
| this._show(position, zrEvent.getX(this._event), zrEvent.getY(this._event), specialCssText); |
| return true; |
| } |
| }, |
| _showItemTrigger: function (axisTrigger) { |
| if (!this._curTarget) { |
| return; |
| } |
| var serie = ecData.get(this._curTarget, 'series'); |
| var seriesIndex = ecData.get(this._curTarget, 'seriesIndex'); |
| var data = ecData.get(this._curTarget, 'data'); |
| var dataIndex = ecData.get(this._curTarget, 'dataIndex'); |
| var name = ecData.get(this._curTarget, 'name'); |
| var value = ecData.get(this._curTarget, 'value'); |
| var special = ecData.get(this._curTarget, 'special'); |
| var special2 = ecData.get(this._curTarget, 'special2'); |
| var queryTarget = [ |
| data, |
| serie, |
| this.option |
| ]; |
| var formatter; |
| var position; |
| var showContent; |
| var specialCssText = ''; |
| if (this._curTarget._type != 'island') { |
| var trigger = axisTrigger ? 'axis' : 'item'; |
| if (this.option.tooltip.trigger === trigger) { |
| formatter = this.option.tooltip.formatter; |
| position = this.option.tooltip.position; |
| } |
| if (this.query(serie, 'tooltip.trigger') === trigger) { |
| showContent = this.query(serie, 'tooltip.showContent') || showContent; |
| formatter = this.query(serie, 'tooltip.formatter') || formatter; |
| position = this.query(serie, 'tooltip.position') || position; |
| specialCssText += this._style(this.query(serie, 'tooltip')); |
| } |
| showContent = this.query(data, 'tooltip.showContent') || showContent; |
| formatter = this.query(data, 'tooltip.formatter') || formatter; |
| position = this.query(data, 'tooltip.position') || position; |
| specialCssText += this._style(this.query(data, 'tooltip')); |
| } else { |
| this._lastItemTriggerId = NaN; |
| showContent = this.deepQuery(queryTarget, 'tooltip.showContent'); |
| formatter = this.deepQuery(queryTarget, 'tooltip.islandFormatter'); |
| position = this.deepQuery(queryTarget, 'tooltip.islandPosition'); |
| } |
| this._lastDataIndex = -1; |
| this._lastSeriesIndex = -1; |
| if (this._lastItemTriggerId !== this._curTarget.id) { |
| this._lastItemTriggerId = this._curTarget.id; |
| if (typeof formatter === 'function') { |
| this._curTicket = (serie.name || '') + ':' + dataIndex; |
| this._tDom.innerHTML = formatter.call(this.myChart, { |
| seriesIndex: seriesIndex, |
| seriesName: serie.name || '', |
| series: serie, |
| dataIndex: dataIndex, |
| data: data, |
| name: name, |
| value: value, |
| percent: special, |
| indicator: special, |
| value2: special2, |
| indicator2: special2, |
| 0: serie.name || '', |
| 1: name, |
| 2: value, |
| 3: special, |
| 4: special2, |
| 5: data, |
| 6: seriesIndex, |
| 7: dataIndex |
| }, this._curTicket, this._setContent); |
| } else if (typeof formatter === 'string') { |
| this._curTicket = NaN; |
| formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}'); |
| formatter = formatter.replace('{a0}', this._encodeHTML(serie.name || '')).replace('{b0}', this._encodeHTML(name)).replace('{c0}', value instanceof Array ? value : this.numAddCommas(value)); |
| formatter = formatter.replace('{d}', '{d0}').replace('{d0}', special || ''); |
| formatter = formatter.replace('{e}', '{e0}').replace('{e0}', ecData.get(this._curTarget, 'special2') || ''); |
| this._tDom.innerHTML = formatter; |
| } else { |
| this._curTicket = NaN; |
| if (serie.type === ecConfig.CHART_TYPE_RADAR && special) { |
| this._tDom.innerHTML = this._itemFormatter.radar.call(this, serie, name, value, special); |
| } else if (serie.type === ecConfig.CHART_TYPE_EVENTRIVER) { |
| this._tDom.innerHTML = this._itemFormatter.eventRiver.call(this, serie, name, value, data); |
| } else { |
| this._tDom.innerHTML = '' + (serie.name != null ? this._encodeHTML(serie.name) + '<br/>' : '') + (name === '' ? '' : this._encodeHTML(name) + ' : ') + (value instanceof Array ? value : this.numAddCommas(value)); |
| } |
| } |
| } |
| var x = zrEvent.getX(this._event); |
| var y = zrEvent.getY(this._event); |
| if (this.deepQuery(queryTarget, 'tooltip.axisPointer.show') && this.component.grid) { |
| this._styleAxisPointer([serie], this.component.grid.getX(), y, this.component.grid.getXend(), y, 0, x, y); |
| } else { |
| this._hide(); |
| } |
| if (showContent === false || !this.option.tooltip.showContent) { |
| return; |
| } |
| if (!this.hasAppend) { |
| this._tDom.style.left = this._zrWidth / 2 + 'px'; |
| this._tDom.style.top = this._zrHeight / 2 + 'px'; |
| this.dom.firstChild.appendChild(this._tDom); |
| this.hasAppend = true; |
| } |
| this._show(position, x + 20, y - 20, specialCssText); |
| }, |
| _itemFormatter: { |
| radar: function (serie, name, value, indicator) { |
| var html = ''; |
| html += this._encodeHTML(name === '' ? serie.name || '' : name); |
| html += html === '' ? '' : '<br />'; |
| for (var i = 0; i < indicator.length; i++) { |
| html += this._encodeHTML(indicator[i].text) + ' : ' + this.numAddCommas(value[i]) + '<br />'; |
| } |
| return html; |
| }, |
| chord: function (serie, name, value, special, special2) { |
| if (special2 == null) { |
| return this._encodeHTML(name) + ' (' + this.numAddCommas(value) + ')'; |
| } else { |
| var name1 = this._encodeHTML(name); |
| var name2 = this._encodeHTML(special); |
| return '' + (serie.name != null ? this._encodeHTML(serie.name) + '<br/>' : '') + name1 + ' -> ' + name2 + ' (' + this.numAddCommas(value) + ')' + '<br />' + name2 + ' -> ' + name1 + ' (' + this.numAddCommas(special2) + ')'; |
| } |
| }, |
| eventRiver: function (serie, name, value, data) { |
| var html = ''; |
| html += this._encodeHTML(serie.name === '' ? '' : serie.name + ' : '); |
| html += this._encodeHTML(name); |
| html += html === '' ? '' : '<br />'; |
| data = data.evolution; |
| for (var i = 0, l = data.length; i < l; i++) { |
| html += '<div style="padding-top:5px;">'; |
| if (!data[i].detail) { |
| continue; |
| } |
| if (data[i].detail.img) { |
| html += '<img src="' + data[i].detail.img + '" style="float:left;width:40px;height:40px;">'; |
| } |
| html += '<div style="margin-left:45px;">' + data[i].time + '<br/>'; |
| html += '<a href="' + data[i].detail.link + '" target="_blank">'; |
| html += data[i].detail.text + '</a></div>'; |
| html += '</div>'; |
| } |
| return html; |
| } |
| }, |
| _styleAxisPointer: function (seriesArray, xStart, yStart, xEnd, yEnd, gap, x, y) { |
| if (seriesArray.length > 0) { |
| var queryTarget; |
| var curType; |
| var axisPointer = this.option.tooltip.axisPointer; |
| var pointType = axisPointer.type; |
| var style = { |
| line: {}, |
| cross: {}, |
| shadow: {} |
| }; |
| for (var pType in style) { |
| style[pType].color = axisPointer[pType + 'Style'].color; |
| style[pType].width = axisPointer[pType + 'Style'].width; |
| style[pType].type = axisPointer[pType + 'Style'].type; |
| } |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| queryTarget = seriesArray[i]; |
| curType = this.query(queryTarget, 'tooltip.axisPointer.type'); |
| pointType = curType || pointType; |
| if (curType) { |
| style[curType].color = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.color') || style[curType].color; |
| style[curType].width = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.width') || style[curType].width; |
| style[curType].type = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.type') || style[curType].type; |
| } |
| } |
| if (pointType === 'line') { |
| var lineWidth = style.line.width; |
| var isVertical = xStart == xEnd; |
| this._axisLineShape.style = { |
| xStart: isVertical ? this.subPixelOptimize(xStart, lineWidth) : xStart, |
| yStart: isVertical ? yStart : this.subPixelOptimize(yStart, lineWidth), |
| xEnd: isVertical ? this.subPixelOptimize(xEnd, lineWidth) : xEnd, |
| yEnd: isVertical ? yEnd : this.subPixelOptimize(yEnd, lineWidth), |
| strokeColor: style.line.color, |
| lineWidth: lineWidth, |
| lineType: style.line.type |
| }; |
| this._axisLineShape.invisible = false; |
| this.zr.modShape(this._axisLineShape.id); |
| } else if (pointType === 'cross') { |
| var crossWidth = style.cross.width; |
| this._axisCrossShape.style = { |
| brushType: 'stroke', |
| rect: this.component.grid.getArea(), |
| x: this.subPixelOptimize(x, crossWidth), |
| y: this.subPixelOptimize(y, crossWidth), |
| text: ('( ' + this.component.xAxis.getAxis(0).getValueFromCoord(x) + ' , ' + this.component.yAxis.getAxis(0).getValueFromCoord(y) + ' )').replace(' , ', ' ').replace(' , ', ' '), |
| textPosition: 'specific', |
| strokeColor: style.cross.color, |
| lineWidth: crossWidth, |
| lineType: style.cross.type |
| }; |
| if (this.component.grid.getXend() - x > 100) { |
| this._axisCrossShape.style.textAlign = 'left'; |
| this._axisCrossShape.style.textX = x + 10; |
| } else { |
| this._axisCrossShape.style.textAlign = 'right'; |
| this._axisCrossShape.style.textX = x - 10; |
| } |
| if (y - this.component.grid.getY() > 50) { |
| this._axisCrossShape.style.textBaseline = 'bottom'; |
| this._axisCrossShape.style.textY = y - 10; |
| } else { |
| this._axisCrossShape.style.textBaseline = 'top'; |
| this._axisCrossShape.style.textY = y + 10; |
| } |
| this._axisCrossShape.invisible = false; |
| this.zr.modShape(this._axisCrossShape.id); |
| } else if (pointType === 'shadow') { |
| if (style.shadow.width == null || style.shadow.width === 'auto' || isNaN(style.shadow.width)) { |
| style.shadow.width = gap; |
| } |
| if (xStart === xEnd) { |
| if (Math.abs(this.component.grid.getX() - xStart) < 2) { |
| style.shadow.width /= 2; |
| xStart = xEnd = xEnd + style.shadow.width / 2; |
| } else if (Math.abs(this.component.grid.getXend() - xStart) < 2) { |
| style.shadow.width /= 2; |
| xStart = xEnd = xEnd - style.shadow.width / 2; |
| } |
| } else if (yStart === yEnd) { |
| if (Math.abs(this.component.grid.getY() - yStart) < 2) { |
| style.shadow.width /= 2; |
| yStart = yEnd = yEnd + style.shadow.width / 2; |
| } else if (Math.abs(this.component.grid.getYend() - yStart) < 2) { |
| style.shadow.width /= 2; |
| yStart = yEnd = yEnd - style.shadow.width / 2; |
| } |
| } |
| this._axisShadowShape.style = { |
| xStart: xStart, |
| yStart: yStart, |
| xEnd: xEnd, |
| yEnd: yEnd, |
| strokeColor: style.shadow.color, |
| lineWidth: style.shadow.width |
| }; |
| this._axisShadowShape.invisible = false; |
| this.zr.modShape(this._axisShadowShape.id); |
| } |
| this.zr.refreshNextFrame(); |
| } |
| }, |
| __onmousemove: function (param) { |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| if (this._mousein && this._enterable) { |
| return; |
| } |
| var target = param.target; |
| var mx = zrEvent.getX(param.event); |
| var my = zrEvent.getY(param.event); |
| if (!target) { |
| this._curTarget = false; |
| this._event = param.event; |
| this._event.zrenderX = mx; |
| this._event.zrenderY = my; |
| if (this._needAxisTrigger && this.component.grid && zrArea.isInside(rectangleInstance, this.component.grid.getArea(), mx, my)) { |
| this._showingTicket = setTimeout(this._tryShow, this._showDelay); |
| } else if (this._needAxisTrigger && this.component.polar && this.component.polar.isInside([ |
| mx, |
| my |
| ]) != -1) { |
| this._showingTicket = setTimeout(this._tryShow, this._showDelay); |
| } else { |
| !this._event.connectTrigger && this.messageCenter.dispatch(ecConfig.EVENT.TOOLTIP_OUT_GRID, this._event, null, this.myChart); |
| this._hidingTicket = setTimeout(this._hide, this._hideDelay); |
| } |
| } else { |
| this._curTarget = target; |
| this._event = param.event; |
| this._event.zrenderX = mx; |
| this._event.zrenderY = my; |
| var polarIndex; |
| if (this._needAxisTrigger && this.component.polar && (polarIndex = this.component.polar.isInside([ |
| mx, |
| my |
| ])) != -1) { |
| var series = this.option.series; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].polarIndex === polarIndex && this.deepQuery([ |
| series[i], |
| this.option |
| ], 'tooltip.trigger') === 'axis') { |
| this._curTarget = null; |
| break; |
| } |
| } |
| } |
| this._showingTicket = setTimeout(this._tryShow, this._showDelay); |
| } |
| }, |
| __onglobalout: function () { |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| this._hidingTicket = setTimeout(this._hide, this._hideDelay); |
| }, |
| __setContent: function (ticket, content) { |
| if (!this._tDom) { |
| return; |
| } |
| if (ticket === this._curTicket) { |
| this._tDom.innerHTML = content; |
| } |
| setTimeout(this._refixed, 20); |
| }, |
| ontooltipHover: function (param, tipShape) { |
| if (!this._lastTipShape || this._lastTipShape && this._lastTipShape.dataIndex != param.dataIndex) { |
| if (this._lastTipShape && this._lastTipShape.tipShape.length > 0) { |
| this.zr.delShape(this._lastTipShape.tipShape); |
| this.shapeList.length = 2; |
| } |
| for (var i = 0, l = tipShape.length; i < l; i++) { |
| tipShape[i].zlevel = this.getZlevelBase(); |
| tipShape[i].z = this.getZBase(); |
| tipShape[i].style = zrShapeBase.prototype.getHighlightStyle(tipShape[i].style, tipShape[i].highlightStyle); |
| tipShape[i].draggable = false; |
| tipShape[i].hoverable = false; |
| tipShape[i].clickable = false; |
| tipShape[i].ondragend = null; |
| tipShape[i].ondragover = null; |
| tipShape[i].ondrop = null; |
| this.shapeList.push(tipShape[i]); |
| this.zr.addShape(tipShape[i]); |
| } |
| this._lastTipShape = { |
| dataIndex: param.dataIndex, |
| tipShape: tipShape |
| }; |
| } |
| }, |
| ondragend: function () { |
| this._hide(); |
| }, |
| onlegendSelected: function (param) { |
| this._selectedMap = param.selected; |
| }, |
| _setSelectedMap: function () { |
| if (this.component.legend) { |
| this._selectedMap = zrUtil.clone(this.component.legend.getSelectedMap()); |
| } else { |
| this._selectedMap = {}; |
| } |
| }, |
| _isSelected: function (itemName) { |
| if (this._selectedMap[itemName] != null) { |
| return this._selectedMap[itemName]; |
| } else { |
| return true; |
| } |
| }, |
| showTip: function (params) { |
| if (!params) { |
| return; |
| } |
| var seriesIndex; |
| var series = this.option.series; |
| if (params.seriesIndex != null) { |
| seriesIndex = params.seriesIndex; |
| } else { |
| var seriesName = params.seriesName; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].name === seriesName) { |
| seriesIndex = i; |
| break; |
| } |
| } |
| } |
| var serie = series[seriesIndex]; |
| if (serie == null) { |
| return; |
| } |
| var chart = this.myChart.chart[serie.type]; |
| var isAxisTrigger = this.deepQuery([ |
| serie, |
| this.option |
| ], 'tooltip.trigger') === 'axis'; |
| if (!chart) { |
| return; |
| } |
| if (isAxisTrigger) { |
| var dataIndex = params.dataIndex; |
| switch (chart.type) { |
| case ecConfig.CHART_TYPE_LINE: |
| case ecConfig.CHART_TYPE_BAR: |
| case ecConfig.CHART_TYPE_K: |
| case ecConfig.CHART_TYPE_RADAR: |
| if (this.component.polar == null || serie.data[0].value.length <= dataIndex) { |
| return; |
| } |
| var polarIndex = serie.polarIndex || 0; |
| var vector = this.component.polar.getVector(polarIndex, dataIndex, 'max'); |
| this._event = { |
| zrenderX: vector[0], |
| zrenderY: vector[1] |
| }; |
| this._showPolarTrigger(polarIndex, dataIndex); |
| break; |
| } |
| } else { |
| var shapeList = chart.shapeList; |
| var x; |
| var y; |
| switch (chart.type) { |
| case ecConfig.CHART_TYPE_LINE: |
| case ecConfig.CHART_TYPE_BAR: |
| case ecConfig.CHART_TYPE_K: |
| case ecConfig.CHART_TYPE_TREEMAP: |
| case ecConfig.CHART_TYPE_SCATTER: |
| var dataIndex = params.dataIndex; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i]._mark == null && ecData.get(shapeList[i], 'seriesIndex') == seriesIndex && ecData.get(shapeList[i], 'dataIndex') == dataIndex) { |
| this._curTarget = shapeList[i]; |
| x = shapeList[i].style.x; |
| y = chart.type != ecConfig.CHART_TYPE_K ? shapeList[i].style.y : shapeList[i].style.y[0]; |
| break; |
| } |
| } |
| break; |
| case ecConfig.CHART_TYPE_RADAR: |
| var dataIndex = params.dataIndex; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i].type === 'polygon' && ecData.get(shapeList[i], 'seriesIndex') == seriesIndex && ecData.get(shapeList[i], 'dataIndex') == dataIndex) { |
| this._curTarget = shapeList[i]; |
| var vector = this.component.polar.getCenter(serie.polarIndex || 0); |
| x = vector[0]; |
| y = vector[1]; |
| break; |
| } |
| } |
| break; |
| case ecConfig.CHART_TYPE_PIE: |
| var name = params.name; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i].type === 'sector' && ecData.get(shapeList[i], 'seriesIndex') == seriesIndex && ecData.get(shapeList[i], 'name') == name) { |
| this._curTarget = shapeList[i]; |
| var style = this._curTarget.style; |
| var midAngle = (style.startAngle + style.endAngle) / 2 * Math.PI / 180; |
| x = this._curTarget.style.x + Math.cos(midAngle) * style.r / 1.5; |
| y = this._curTarget.style.y - Math.sin(midAngle) * style.r / 1.5; |
| break; |
| } |
| } |
| break; |
| case ecConfig.CHART_TYPE_MAP: |
| var name = params.name; |
| var mapType = serie.mapType; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i].type === 'text' && shapeList[i]._mapType === mapType && shapeList[i].style._name === name) { |
| this._curTarget = shapeList[i]; |
| x = this._curTarget.style.x + this._curTarget.position[0]; |
| y = this._curTarget.style.y + this._curTarget.position[1]; |
| break; |
| } |
| } |
| break; |
| case ecConfig.CHART_TYPE_CHORD: |
| var name = params.name; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i].type === 'sector' && ecData.get(shapeList[i], 'name') == name) { |
| this._curTarget = shapeList[i]; |
| var style = this._curTarget.style; |
| var midAngle = (style.startAngle + style.endAngle) / 2 * Math.PI / 180; |
| x = this._curTarget.style.x + Math.cos(midAngle) * (style.r - 2); |
| y = this._curTarget.style.y - Math.sin(midAngle) * (style.r - 2); |
| this.zr.trigger(zrConfig.EVENT.MOUSEMOVE, { |
| zrenderX: x, |
| zrenderY: y |
| }); |
| return; |
| } |
| } |
| break; |
| case ecConfig.CHART_TYPE_FORCE: |
| var name = params.name; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (shapeList[i].type === 'circle' && ecData.get(shapeList[i], 'name') == name) { |
| this._curTarget = shapeList[i]; |
| x = this._curTarget.position[0]; |
| y = this._curTarget.position[1]; |
| break; |
| } |
| } |
| break; |
| } |
| if (x != null && y != null) { |
| this._event = { |
| zrenderX: x, |
| zrenderY: y |
| }; |
| this.zr.addHoverShape(this._curTarget); |
| this.zr.refreshHover(); |
| this._showItemTrigger(); |
| } |
| } |
| }, |
| hideTip: function () { |
| this._hide(); |
| }, |
| refresh: function (newOption) { |
| this._zrHeight = this.zr.getHeight(); |
| this._zrWidth = this.zr.getWidth(); |
| if (this._lastTipShape && this._lastTipShape.tipShape.length > 0) { |
| this.zr.delShape(this._lastTipShape.tipShape); |
| } |
| this._lastTipShape = false; |
| this.shapeList.length = 2; |
| this._lastDataIndex = -1; |
| this._lastSeriesIndex = -1; |
| this._lastItemTriggerId = -1; |
| if (newOption) { |
| this.option = newOption; |
| this.option.tooltip = this.reformOption(this.option.tooltip); |
| this.option.tooltip.textStyle = zrUtil.merge(this.option.tooltip.textStyle, this.ecTheme.textStyle); |
| this._needAxisTrigger = false; |
| if (this.option.tooltip.trigger === 'axis') { |
| this._needAxisTrigger = true; |
| } |
| var series = this.option.series; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (this.query(series[i], 'tooltip.trigger') === 'axis') { |
| this._needAxisTrigger = true; |
| break; |
| } |
| } |
| this._showDelay = this.option.tooltip.showDelay; |
| this._hideDelay = this.option.tooltip.hideDelay; |
| this._defaultCssText = this._style(this.option.tooltip); |
| this._setSelectedMap(); |
| this._axisLineWidth = this.option.tooltip.axisPointer.lineStyle.width; |
| this._enterable = this.option.tooltip.enterable; |
| if (!this._enterable && this._tDom.className.indexOf(zrConfig.elementClassName) < 0) { |
| this._tDom.className += ' ' + zrConfig.elementClassName; |
| } |
| } |
| if (this.showing) { |
| var self = this; |
| setTimeout(function () { |
| self.zr.trigger(zrConfig.EVENT.MOUSEMOVE, self.zr.handler._event); |
| }, 50); |
| } |
| }, |
| onbeforDispose: function () { |
| if (this._lastTipShape && this._lastTipShape.tipShape.length > 0) { |
| this.zr.delShape(this._lastTipShape.tipShape); |
| } |
| clearTimeout(this._hidingTicket); |
| clearTimeout(this._showingTicket); |
| this.zr.un(zrConfig.EVENT.MOUSEMOVE, this._onmousemove); |
| this.zr.un(zrConfig.EVENT.GLOBALOUT, this._onglobalout); |
| if (this.hasAppend && !!this.dom.firstChild) { |
| this.dom.firstChild.removeChild(this._tDom); |
| } |
| this._tDom = null; |
| }, |
| _encodeHTML: function (source) { |
| return String(source).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); |
| } |
| }; |
| zrUtil.inherits(Tooltip, Base); |
| require('../component').define('tooltip', Tooltip); |
| return Tooltip; |
| });define('echarts/component/legend', [ |
| 'require', |
| './base', |
| 'zrender/shape/Text', |
| 'zrender/shape/Rectangle', |
| 'zrender/shape/Sector', |
| '../util/shape/Icon', |
| '../util/shape/Candle', |
| '../config', |
| 'zrender/tool/util', |
| 'zrender/tool/area', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var TextShape = require('zrender/shape/Text'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var SectorShape = require('zrender/shape/Sector'); |
| var IconShape = require('../util/shape/Icon'); |
| var CandleShape = require('../util/shape/Candle'); |
| var ecConfig = require('../config'); |
| ecConfig.legend = { |
| zlevel: 0, |
| z: 4, |
| show: true, |
| orient: 'horizontal', |
| x: 'center', |
| y: 'top', |
| backgroundColor: 'rgba(0,0,0,0)', |
| borderColor: '#ccc', |
| borderWidth: 0, |
| padding: 5, |
| itemGap: 10, |
| itemWidth: 20, |
| itemHeight: 14, |
| textStyle: { color: '#333' }, |
| selectedMode: true |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| var zrArea = require('zrender/tool/area'); |
| function Legend(ecTheme, messageCenter, zr, option, myChart) { |
| if (!this.query(option, 'legend.data')) { |
| console.error('option.legend.data has not been defined.'); |
| return; |
| } |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| var self = this; |
| self._legendSelected = function (param) { |
| self.__legendSelected(param); |
| }; |
| self._dispatchHoverLink = function (param) { |
| return self.__dispatchHoverLink(param); |
| }; |
| this._colorIndex = 0; |
| this._colorMap = {}; |
| this._selectedMap = {}; |
| this._hasDataMap = {}; |
| this.refresh(option); |
| } |
| Legend.prototype = { |
| type: ecConfig.COMPONENT_TYPE_LEGEND, |
| _buildShape: function () { |
| if (!this.legendOption.show) { |
| return; |
| } |
| this._itemGroupLocation = this._getItemGroupLocation(); |
| this._buildBackground(); |
| this._buildItem(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| }, |
| _buildItem: function () { |
| var data = this.legendOption.data; |
| var dataLength = data.length; |
| var itemName; |
| var itemType; |
| var itemShape; |
| var textShape; |
| var textStyle = this.legendOption.textStyle; |
| var dataTextStyle; |
| var dataFont; |
| var formattedName; |
| var zrWidth = this.zr.getWidth(); |
| var zrHeight = this.zr.getHeight(); |
| var lastX = this._itemGroupLocation.x; |
| var lastY = this._itemGroupLocation.y; |
| var itemWidth = this.legendOption.itemWidth; |
| var itemHeight = this.legendOption.itemHeight; |
| var itemGap = this.legendOption.itemGap; |
| var color; |
| if (this.legendOption.orient === 'vertical' && this.legendOption.x === 'right') { |
| lastX = this._itemGroupLocation.x + this._itemGroupLocation.width - itemWidth; |
| } |
| for (var i = 0; i < dataLength; i++) { |
| dataTextStyle = zrUtil.merge(data[i].textStyle || {}, textStyle); |
| dataFont = this.getFont(dataTextStyle); |
| itemName = this._getName(data[i]); |
| formattedName = this._getFormatterName(itemName); |
| if (itemName === '') { |
| if (this.legendOption.orient === 'horizontal') { |
| lastX = this._itemGroupLocation.x; |
| lastY += itemHeight + itemGap; |
| } else { |
| this.legendOption.x === 'right' ? lastX -= this._itemGroupLocation.maxWidth + itemGap : lastX += this._itemGroupLocation.maxWidth + itemGap; |
| lastY = this._itemGroupLocation.y; |
| } |
| continue; |
| } |
| itemType = data[i].icon || this._getSomethingByName(itemName).type; |
| color = this.getColor(itemName); |
| if (this.legendOption.orient === 'horizontal') { |
| if (zrWidth - lastX < 200 && itemWidth + 5 + zrArea.getTextWidth(formattedName, dataFont) + (i === dataLength - 1 || data[i + 1] === '' ? 0 : itemGap) >= zrWidth - lastX) { |
| lastX = this._itemGroupLocation.x; |
| lastY += itemHeight + itemGap; |
| } |
| } else { |
| if (zrHeight - lastY < 200 && itemHeight + (i === dataLength - 1 || data[i + 1] === '' ? 0 : itemGap) >= zrHeight - lastY) { |
| this.legendOption.x === 'right' ? lastX -= this._itemGroupLocation.maxWidth + itemGap : lastX += this._itemGroupLocation.maxWidth + itemGap; |
| lastY = this._itemGroupLocation.y; |
| } |
| } |
| itemShape = this._getItemShapeByType(lastX, lastY, itemWidth, itemHeight, this._selectedMap[itemName] && this._hasDataMap[itemName] ? color : '#ccc', itemType, color); |
| itemShape._name = itemName; |
| itemShape = new IconShape(itemShape); |
| textShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: lastX + itemWidth + 5, |
| y: lastY + itemHeight / 2, |
| color: this._selectedMap[itemName] ? dataTextStyle.color === 'auto' ? color : dataTextStyle.color : '#ccc', |
| text: formattedName, |
| textFont: dataFont, |
| textBaseline: 'middle' |
| }, |
| highlightStyle: { |
| color: color, |
| brushType: 'fill' |
| }, |
| hoverable: !!this.legendOption.selectedMode, |
| clickable: !!this.legendOption.selectedMode |
| }; |
| if (this.legendOption.orient === 'vertical' && this.legendOption.x === 'right') { |
| textShape.style.x -= itemWidth + 10; |
| textShape.style.textAlign = 'right'; |
| } |
| textShape._name = itemName; |
| textShape = new TextShape(textShape); |
| if (this.legendOption.selectedMode) { |
| itemShape.onclick = textShape.onclick = this._legendSelected; |
| itemShape.onmouseover = textShape.onmouseover = this._dispatchHoverLink; |
| itemShape.hoverConnect = textShape.id; |
| textShape.hoverConnect = itemShape.id; |
| } |
| this.shapeList.push(itemShape); |
| this.shapeList.push(textShape); |
| if (this.legendOption.orient === 'horizontal') { |
| lastX += itemWidth + 5 + zrArea.getTextWidth(formattedName, dataFont) + itemGap; |
| } else { |
| lastY += itemHeight + itemGap; |
| } |
| } |
| if (this.legendOption.orient === 'horizontal' && this.legendOption.x === 'center' && lastY != this._itemGroupLocation.y) { |
| this._mLineOptimize(); |
| } |
| }, |
| _getName: function (data) { |
| return typeof data.name != 'undefined' ? data.name : data; |
| }, |
| _getFormatterName: function (itemName) { |
| var formatter = this.legendOption.formatter; |
| var formattedName; |
| if (typeof formatter === 'function') { |
| formattedName = formatter.call(this.myChart, itemName); |
| } else if (typeof formatter === 'string') { |
| formattedName = formatter.replace('{name}', itemName); |
| } else { |
| formattedName = itemName; |
| } |
| return formattedName; |
| }, |
| _getFormatterNameFromData: function (data) { |
| var itemName = this._getName(data); |
| return this._getFormatterName(itemName); |
| }, |
| _mLineOptimize: function () { |
| var lineOffsetArray = []; |
| var lastX = this._itemGroupLocation.x; |
| for (var i = 2, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i].style.x === lastX) { |
| lineOffsetArray.push((this._itemGroupLocation.width - (this.shapeList[i - 1].style.x + zrArea.getTextWidth(this.shapeList[i - 1].style.text, this.shapeList[i - 1].style.textFont) - lastX)) / 2); |
| } else if (i === l - 1) { |
| lineOffsetArray.push((this._itemGroupLocation.width - (this.shapeList[i].style.x + zrArea.getTextWidth(this.shapeList[i].style.text, this.shapeList[i].style.textFont) - lastX)) / 2); |
| } |
| } |
| var curLineIndex = -1; |
| for (var i = 1, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i].style.x === lastX) { |
| curLineIndex++; |
| } |
| if (lineOffsetArray[curLineIndex] === 0) { |
| continue; |
| } else { |
| this.shapeList[i].style.x += lineOffsetArray[curLineIndex]; |
| } |
| } |
| }, |
| _buildBackground: function () { |
| var padding = this.reformCssArray(this.legendOption.padding); |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._itemGroupLocation.x - padding[3], |
| y: this._itemGroupLocation.y - padding[0], |
| width: this._itemGroupLocation.width + padding[3] + padding[1], |
| height: this._itemGroupLocation.height + padding[0] + padding[2], |
| brushType: this.legendOption.borderWidth === 0 ? 'fill' : 'both', |
| color: this.legendOption.backgroundColor, |
| strokeColor: this.legendOption.borderColor, |
| lineWidth: this.legendOption.borderWidth |
| } |
| })); |
| }, |
| _getItemGroupLocation: function () { |
| var data = this.legendOption.data; |
| var dataLength = data.length; |
| var itemGap = this.legendOption.itemGap; |
| var itemWidth = this.legendOption.itemWidth + 5; |
| var itemHeight = this.legendOption.itemHeight; |
| var textStyle = this.legendOption.textStyle; |
| var font = this.getFont(textStyle); |
| var totalWidth = 0; |
| var totalHeight = 0; |
| var padding = this.reformCssArray(this.legendOption.padding); |
| var zrWidth = this.zr.getWidth() - padding[1] - padding[3]; |
| var zrHeight = this.zr.getHeight() - padding[0] - padding[2]; |
| var temp = 0; |
| var maxWidth = 0; |
| if (this.legendOption.orient === 'horizontal') { |
| totalHeight = itemHeight; |
| for (var i = 0; i < dataLength; i++) { |
| if (this._getName(data[i]) === '') { |
| temp -= itemGap; |
| totalWidth = Math.max(totalWidth, temp); |
| totalHeight += itemHeight + itemGap; |
| temp = 0; |
| continue; |
| } |
| var tempTextWidth = zrArea.getTextWidth(this._getFormatterNameFromData(data[i]), data[i].textStyle ? this.getFont(zrUtil.merge(data[i].textStyle || {}, textStyle)) : font); |
| if (temp + itemWidth + tempTextWidth + itemGap > zrWidth) { |
| temp -= itemGap; |
| totalWidth = Math.max(totalWidth, temp); |
| totalHeight += itemHeight + itemGap; |
| temp = 0; |
| } else { |
| temp += itemWidth + tempTextWidth + itemGap; |
| totalWidth = Math.max(totalWidth, temp - itemGap); |
| } |
| } |
| } else { |
| for (var i = 0; i < dataLength; i++) { |
| maxWidth = Math.max(maxWidth, zrArea.getTextWidth(this._getFormatterNameFromData(data[i]), data[i].textStyle ? this.getFont(zrUtil.merge(data[i].textStyle || {}, textStyle)) : font)); |
| } |
| maxWidth += itemWidth; |
| totalWidth = maxWidth; |
| for (var i = 0; i < dataLength; i++) { |
| if (this._getName(data[i]) === '') { |
| totalWidth += maxWidth + itemGap; |
| temp -= itemGap; |
| totalHeight = Math.max(totalHeight, temp); |
| temp = 0; |
| continue; |
| } |
| if (temp + itemHeight + itemGap > zrHeight) { |
| totalWidth += maxWidth + itemGap; |
| temp -= itemGap; |
| totalHeight = Math.max(totalHeight, temp); |
| temp = 0; |
| } else { |
| temp += itemHeight + itemGap; |
| totalHeight = Math.max(totalHeight, temp - itemGap); |
| } |
| } |
| } |
| zrWidth = this.zr.getWidth(); |
| zrHeight = this.zr.getHeight(); |
| var x; |
| switch (this.legendOption.x) { |
| case 'center': |
| x = Math.floor((zrWidth - totalWidth) / 2); |
| break; |
| case 'left': |
| x = padding[3] + this.legendOption.borderWidth; |
| break; |
| case 'right': |
| x = zrWidth - totalWidth - padding[1] - padding[3] - this.legendOption.borderWidth * 2; |
| break; |
| default: |
| x = this.parsePercent(this.legendOption.x, zrWidth); |
| break; |
| } |
| var y; |
| switch (this.legendOption.y) { |
| case 'top': |
| y = padding[0] + this.legendOption.borderWidth; |
| break; |
| case 'bottom': |
| y = zrHeight - totalHeight - padding[0] - padding[2] - this.legendOption.borderWidth * 2; |
| break; |
| case 'center': |
| y = Math.floor((zrHeight - totalHeight) / 2); |
| break; |
| default: |
| y = this.parsePercent(this.legendOption.y, zrHeight); |
| break; |
| } |
| return { |
| x: x, |
| y: y, |
| width: totalWidth, |
| height: totalHeight, |
| maxWidth: maxWidth |
| }; |
| }, |
| _getSomethingByName: function (name) { |
| var series = this.option.series; |
| var data; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].name === name) { |
| return { |
| type: series[i].type, |
| series: series[i], |
| seriesIndex: i, |
| data: null, |
| dataIndex: -1 |
| }; |
| } |
| if (series[i].type === ecConfig.CHART_TYPE_PIE || series[i].type === ecConfig.CHART_TYPE_RADAR || series[i].type === ecConfig.CHART_TYPE_CHORD || series[i].type === ecConfig.CHART_TYPE_FORCE || series[i].type === ecConfig.CHART_TYPE_FUNNEL || series[i].type === ecConfig.CHART_TYPE_TREEMAP) { |
| data = series[i].categories || series[i].data || series[i].nodes; |
| for (var j = 0, k = data.length; j < k; j++) { |
| if (data[j].name === name) { |
| return { |
| type: series[i].type, |
| series: series[i], |
| seriesIndex: i, |
| data: data[j], |
| dataIndex: j |
| }; |
| } |
| } |
| } |
| } |
| return { |
| type: 'bar', |
| series: null, |
| seriesIndex: -1, |
| data: null, |
| dataIndex: -1 |
| }; |
| }, |
| _getItemShapeByType: function (x, y, width, height, color, itemType, defaultColor) { |
| var highlightColor = color === '#ccc' ? defaultColor : color; |
| var itemShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| iconType: 'legendicon' + itemType, |
| x: x, |
| y: y, |
| width: width, |
| height: height, |
| color: color, |
| strokeColor: color, |
| lineWidth: 2 |
| }, |
| highlightStyle: { |
| color: highlightColor, |
| strokeColor: highlightColor, |
| lineWidth: 1 |
| }, |
| hoverable: this.legendOption.selectedMode, |
| clickable: this.legendOption.selectedMode |
| }; |
| var imageLocation; |
| if (itemType.match('image')) { |
| var imageLocation = itemType.replace(new RegExp('^image:\\/\\/'), ''); |
| itemType = 'image'; |
| } |
| switch (itemType) { |
| case 'line': |
| itemShape.style.brushType = 'stroke'; |
| itemShape.highlightStyle.lineWidth = 3; |
| break; |
| case 'radar': |
| case 'venn': |
| case 'tree': |
| case 'treemap': |
| case 'scatter': |
| itemShape.highlightStyle.lineWidth = 3; |
| break; |
| case 'k': |
| itemShape.style.brushType = 'both'; |
| itemShape.highlightStyle.lineWidth = 3; |
| itemShape.highlightStyle.color = itemShape.style.color = this.deepQuery([ |
| this.ecTheme, |
| ecConfig |
| ], 'k.itemStyle.normal.color') || '#fff'; |
| itemShape.style.strokeColor = color != '#ccc' ? this.deepQuery([ |
| this.ecTheme, |
| ecConfig |
| ], 'k.itemStyle.normal.lineStyle.color') || '#ff3200' : color; |
| break; |
| case 'image': |
| itemShape.style.iconType = 'image'; |
| itemShape.style.image = imageLocation; |
| if (color === '#ccc') { |
| itemShape.style.opacity = 0.5; |
| } |
| break; |
| } |
| return itemShape; |
| }, |
| __legendSelected: function (param) { |
| var itemName = param.target._name; |
| if (this.legendOption.selectedMode === 'single') { |
| for (var k in this._selectedMap) { |
| this._selectedMap[k] = false; |
| } |
| } |
| this._selectedMap[itemName] = !this._selectedMap[itemName]; |
| this.messageCenter.dispatch(ecConfig.EVENT.LEGEND_SELECTED, param.event, { |
| selected: this._selectedMap, |
| target: itemName |
| }, this.myChart); |
| }, |
| __dispatchHoverLink: function (param) { |
| this.messageCenter.dispatch(ecConfig.EVENT.LEGEND_HOVERLINK, param.event, { target: param.target._name }, this.myChart); |
| return; |
| }, |
| refresh: function (newOption) { |
| if (newOption) { |
| this.option = newOption || this.option; |
| this.option.legend = this.reformOption(this.option.legend); |
| this.legendOption = this.option.legend; |
| var data = this.legendOption.data || []; |
| var itemName; |
| var something; |
| var color; |
| var queryTarget; |
| if (this.legendOption.selected) { |
| for (var k in this.legendOption.selected) { |
| this._selectedMap[k] = typeof this._selectedMap[k] != 'undefined' ? this._selectedMap[k] : this.legendOption.selected[k]; |
| } |
| } |
| for (var i = 0, dataLength = data.length; i < dataLength; i++) { |
| itemName = this._getName(data[i]); |
| if (itemName === '') { |
| continue; |
| } |
| something = this._getSomethingByName(itemName); |
| if (!something.series) { |
| this._hasDataMap[itemName] = false; |
| } else { |
| this._hasDataMap[itemName] = true; |
| if (something.data && (something.type === ecConfig.CHART_TYPE_PIE || something.type === ecConfig.CHART_TYPE_FORCE || something.type === ecConfig.CHART_TYPE_FUNNEL)) { |
| queryTarget = [ |
| something.data, |
| something.series |
| ]; |
| } else { |
| queryTarget = [something.series]; |
| } |
| color = this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), something.seriesIndex, something.dataIndex, something.data); |
| if (color && something.type != ecConfig.CHART_TYPE_K) { |
| this.setColor(itemName, color); |
| } |
| this._selectedMap[itemName] = this._selectedMap[itemName] != null ? this._selectedMap[itemName] : true; |
| } |
| } |
| } |
| this.clear(); |
| this._buildShape(); |
| }, |
| getRelatedAmount: function (name) { |
| var amount = 0; |
| var series = this.option.series; |
| var data; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].name === name) { |
| amount++; |
| } |
| if (series[i].type === ecConfig.CHART_TYPE_PIE || series[i].type === ecConfig.CHART_TYPE_RADAR || series[i].type === ecConfig.CHART_TYPE_CHORD || series[i].type === ecConfig.CHART_TYPE_FORCE || series[i].type === ecConfig.CHART_TYPE_FUNNEL) { |
| data = series[i].type != ecConfig.CHART_TYPE_FORCE ? series[i].data : series[i].categories; |
| for (var j = 0, k = data.length; j < k; j++) { |
| if (data[j].name === name && data[j].value != '-') { |
| amount++; |
| } |
| } |
| } |
| } |
| return amount; |
| }, |
| setColor: function (legendName, color) { |
| this._colorMap[legendName] = color; |
| }, |
| getColor: function (legendName) { |
| if (!this._colorMap[legendName]) { |
| this._colorMap[legendName] = this.zr.getColor(this._colorIndex++); |
| } |
| return this._colorMap[legendName]; |
| }, |
| hasColor: function (legendName) { |
| return this._colorMap[legendName] ? this._colorMap[legendName] : false; |
| }, |
| add: function (name, color) { |
| var data = this.legendOption.data; |
| for (var i = 0, dataLength = data.length; i < dataLength; i++) { |
| if (this._getName(data[i]) === name) { |
| return; |
| } |
| } |
| this.legendOption.data.push(name); |
| this.setColor(name, color); |
| this._selectedMap[name] = true; |
| this._hasDataMap[name] = true; |
| }, |
| del: function (name) { |
| var data = this.legendOption.data; |
| for (var i = 0, dataLength = data.length; i < dataLength; i++) { |
| if (this._getName(data[i]) === name) { |
| return this.legendOption.data.splice(i, 1); |
| } |
| } |
| }, |
| getItemShape: function (name) { |
| if (name == null) { |
| return; |
| } |
| var shape; |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| shape = this.shapeList[i]; |
| if (shape._name === name && shape.type != 'text') { |
| return shape; |
| } |
| } |
| }, |
| setItemShape: function (name, itemShape) { |
| var shape; |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| shape = this.shapeList[i]; |
| if (shape._name === name && shape.type != 'text') { |
| if (!this._selectedMap[name]) { |
| itemShape.style.color = '#ccc'; |
| itemShape.style.strokeColor = '#ccc'; |
| } |
| this.zr.modShape(shape.id, itemShape); |
| } |
| } |
| }, |
| isSelected: function (itemName) { |
| if (typeof this._selectedMap[itemName] != 'undefined') { |
| return this._selectedMap[itemName]; |
| } else { |
| return true; |
| } |
| }, |
| getSelectedMap: function () { |
| return this._selectedMap; |
| }, |
| setSelected: function (itemName, selectStatus) { |
| if (this.legendOption.selectedMode === 'single') { |
| for (var k in this._selectedMap) { |
| this._selectedMap[k] = false; |
| } |
| } |
| this._selectedMap[itemName] = selectStatus; |
| this.messageCenter.dispatch(ecConfig.EVENT.LEGEND_SELECTED, null, { |
| selected: this._selectedMap, |
| target: itemName |
| }, this.myChart); |
| }, |
| onlegendSelected: function (param, status) { |
| var legendSelected = param.selected; |
| for (var itemName in legendSelected) { |
| if (this._selectedMap[itemName] != legendSelected[itemName]) { |
| status.needRefresh = true; |
| } |
| this._selectedMap[itemName] = legendSelected[itemName]; |
| } |
| return; |
| } |
| }; |
| var legendIcon = { |
| line: function (ctx, style) { |
| var dy = style.height / 2; |
| ctx.moveTo(style.x, style.y + dy); |
| ctx.lineTo(style.x + style.width, style.y + dy); |
| }, |
| pie: function (ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| SectorShape.prototype.buildPath(ctx, { |
| x: x + width / 2, |
| y: y + height + 2, |
| r: height, |
| r0: 6, |
| startAngle: 45, |
| endAngle: 135 |
| }); |
| }, |
| eventRiver: function (ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| ctx.moveTo(x, y + height); |
| ctx.bezierCurveTo(x + width, y + height, x, y + 4, x + width, y + 4); |
| ctx.lineTo(x + width, y); |
| ctx.bezierCurveTo(x, y, x + width, y + height - 4, x, y + height - 4); |
| ctx.lineTo(x, y + height); |
| }, |
| k: function (ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| CandleShape.prototype.buildPath(ctx, { |
| x: x + width / 2, |
| y: [ |
| y + 1, |
| y + 1, |
| y + height - 6, |
| y + height |
| ], |
| width: width - 6 |
| }); |
| }, |
| bar: function (ctx, style) { |
| var x = style.x; |
| var y = style.y + 1; |
| var width = style.width; |
| var height = style.height - 2; |
| var r = 3; |
| ctx.moveTo(x + r, y); |
| ctx.lineTo(x + width - r, y); |
| ctx.quadraticCurveTo(x + width, y, x + width, y + r); |
| ctx.lineTo(x + width, y + height - r); |
| ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height); |
| ctx.lineTo(x + r, y + height); |
| ctx.quadraticCurveTo(x, y + height, x, y + height - r); |
| ctx.lineTo(x, y + r); |
| ctx.quadraticCurveTo(x, y, x + r, y); |
| }, |
| force: function (ctx, style) { |
| IconShape.prototype.iconLibrary.circle(ctx, style); |
| }, |
| radar: function (ctx, style) { |
| var n = 6; |
| var x = style.x + style.width / 2; |
| var y = style.y + style.height / 2; |
| var r = style.height / 2; |
| var dStep = 2 * Math.PI / n; |
| var deg = -Math.PI / 2; |
| var xStart = x + r * Math.cos(deg); |
| var yStart = y + r * Math.sin(deg); |
| ctx.moveTo(xStart, yStart); |
| deg += dStep; |
| for (var i = 0, end = n - 1; i < end; i++) { |
| ctx.lineTo(x + r * Math.cos(deg), y + r * Math.sin(deg)); |
| deg += dStep; |
| } |
| ctx.lineTo(xStart, yStart); |
| } |
| }; |
| legendIcon.chord = legendIcon.pie; |
| legendIcon.map = legendIcon.bar; |
| for (var k in legendIcon) { |
| IconShape.prototype.iconLibrary['legendicon' + k] = legendIcon[k]; |
| } |
| zrUtil.inherits(Legend, Base); |
| require('../component').define('legend', Legend); |
| return Legend; |
| });define('echarts/util/ecData', [], function () { |
| function pack(shape, series, seriesIndex, data, dataIndex, name, special, special2) { |
| var value; |
| if (typeof data != 'undefined') { |
| value = data.value == null ? data : data.value; |
| } |
| shape._echartsData = { |
| '_series': series, |
| '_seriesIndex': seriesIndex, |
| '_data': data, |
| '_dataIndex': dataIndex, |
| '_name': name, |
| '_value': value, |
| '_special': special, |
| '_special2': special2 |
| }; |
| return shape._echartsData; |
| } |
| function get(shape, key) { |
| var data = shape._echartsData; |
| if (!key) { |
| return data; |
| } |
| switch (key) { |
| case 'series': |
| case 'seriesIndex': |
| case 'data': |
| case 'dataIndex': |
| case 'name': |
| case 'value': |
| case 'special': |
| case 'special2': |
| return data && data['_' + key]; |
| } |
| return null; |
| } |
| function set(shape, key, value) { |
| shape._echartsData = shape._echartsData || {}; |
| switch (key) { |
| case 'series': |
| case 'seriesIndex': |
| case 'data': |
| case 'dataIndex': |
| case 'name': |
| case 'value': |
| case 'special': |
| case 'special2': |
| shape._echartsData['_' + key] = value; |
| break; |
| } |
| } |
| function clone(source, target) { |
| target._echartsData = { |
| '_series': source._echartsData._series, |
| '_seriesIndex': source._echartsData._seriesIndex, |
| '_data': source._echartsData._data, |
| '_dataIndex': source._echartsData._dataIndex, |
| '_name': source._echartsData._name, |
| '_value': source._echartsData._value, |
| '_special': source._echartsData._special, |
| '_special2': source._echartsData._special2 |
| }; |
| } |
| return { |
| pack: pack, |
| set: set, |
| get: get, |
| clone: clone |
| }; |
| });define('echarts/chart', [], function () { |
| var self = {}; |
| var _chartLibrary = {}; |
| self.define = function (name, clazz) { |
| _chartLibrary[name] = clazz; |
| return self; |
| }; |
| self.get = function (name) { |
| return _chartLibrary[name]; |
| }; |
| return self; |
| });define('zrender/tool/color', [ |
| 'require', |
| '../tool/util' |
| ], function (require) { |
| var util = require('../tool/util'); |
| var _ctx; |
| var palette = [ |
| '#ff9277', |
| ' #dddd00', |
| ' #ffc877', |
| ' #bbe3ff', |
| ' #d5ffbb', |
| '#bbbbff', |
| ' #ddb000', |
| ' #b0dd00', |
| ' #e2bbff', |
| ' #ffbbe3', |
| '#ff7777', |
| ' #ff9900', |
| ' #83dd00', |
| ' #77e3ff', |
| ' #778fff', |
| '#c877ff', |
| ' #ff77ab', |
| ' #ff6600', |
| ' #aa8800', |
| ' #77c7ff', |
| '#ad77ff', |
| ' #ff77ff', |
| ' #dd0083', |
| ' #777700', |
| ' #00aa00', |
| '#0088aa', |
| ' #8400dd', |
| ' #aa0088', |
| ' #dd0000', |
| ' #772e00' |
| ]; |
| var _palette = palette; |
| var highlightColor = 'rgba(255,255,0,0.5)'; |
| var _highlightColor = highlightColor; |
| var colorRegExp = /^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i; |
| var _nameColors = { |
| aliceblue: '#f0f8ff', |
| antiquewhite: '#faebd7', |
| aqua: '#0ff', |
| aquamarine: '#7fffd4', |
| azure: '#f0ffff', |
| beige: '#f5f5dc', |
| bisque: '#ffe4c4', |
| black: '#000', |
| blanchedalmond: '#ffebcd', |
| blue: '#00f', |
| blueviolet: '#8a2be2', |
| brown: '#a52a2a', |
| burlywood: '#deb887', |
| cadetblue: '#5f9ea0', |
| chartreuse: '#7fff00', |
| chocolate: '#d2691e', |
| coral: '#ff7f50', |
| cornflowerblue: '#6495ed', |
| cornsilk: '#fff8dc', |
| crimson: '#dc143c', |
| cyan: '#0ff', |
| darkblue: '#00008b', |
| darkcyan: '#008b8b', |
| darkgoldenrod: '#b8860b', |
| darkgray: '#a9a9a9', |
| darkgrey: '#a9a9a9', |
| darkgreen: '#006400', |
| darkkhaki: '#bdb76b', |
| darkmagenta: '#8b008b', |
| darkolivegreen: '#556b2f', |
| darkorange: '#ff8c00', |
| darkorchid: '#9932cc', |
| darkred: '#8b0000', |
| darksalmon: '#e9967a', |
| darkseagreen: '#8fbc8f', |
| darkslateblue: '#483d8b', |
| darkslategray: '#2f4f4f', |
| darkslategrey: '#2f4f4f', |
| darkturquoise: '#00ced1', |
| darkviolet: '#9400d3', |
| deeppink: '#ff1493', |
| deepskyblue: '#00bfff', |
| dimgray: '#696969', |
| dimgrey: '#696969', |
| dodgerblue: '#1e90ff', |
| firebrick: '#b22222', |
| floralwhite: '#fffaf0', |
| forestgreen: '#228b22', |
| fuchsia: '#f0f', |
| gainsboro: '#dcdcdc', |
| ghostwhite: '#f8f8ff', |
| gold: '#ffd700', |
| goldenrod: '#daa520', |
| gray: '#808080', |
| grey: '#808080', |
| green: '#008000', |
| greenyellow: '#adff2f', |
| honeydew: '#f0fff0', |
| hotpink: '#ff69b4', |
| indianred: '#cd5c5c', |
| indigo: '#4b0082', |
| ivory: '#fffff0', |
| khaki: '#f0e68c', |
| lavender: '#e6e6fa', |
| lavenderblush: '#fff0f5', |
| lawngreen: '#7cfc00', |
| lemonchiffon: '#fffacd', |
| lightblue: '#add8e6', |
| lightcoral: '#f08080', |
| lightcyan: '#e0ffff', |
| lightgoldenrodyellow: '#fafad2', |
| lightgray: '#d3d3d3', |
| lightgrey: '#d3d3d3', |
| lightgreen: '#90ee90', |
| lightpink: '#ffb6c1', |
| lightsalmon: '#ffa07a', |
| lightseagreen: '#20b2aa', |
| lightskyblue: '#87cefa', |
| lightslategray: '#789', |
| lightslategrey: '#789', |
| lightsteelblue: '#b0c4de', |
| lightyellow: '#ffffe0', |
| lime: '#0f0', |
| limegreen: '#32cd32', |
| linen: '#faf0e6', |
| magenta: '#f0f', |
| maroon: '#800000', |
| mediumaquamarine: '#66cdaa', |
| mediumblue: '#0000cd', |
| mediumorchid: '#ba55d3', |
| mediumpurple: '#9370d8', |
| mediumseagreen: '#3cb371', |
| mediumslateblue: '#7b68ee', |
| mediumspringgreen: '#00fa9a', |
| mediumturquoise: '#48d1cc', |
| mediumvioletred: '#c71585', |
| midnightblue: '#191970', |
| mintcream: '#f5fffa', |
| mistyrose: '#ffe4e1', |
| moccasin: '#ffe4b5', |
| navajowhite: '#ffdead', |
| navy: '#000080', |
| oldlace: '#fdf5e6', |
| olive: '#808000', |
| olivedrab: '#6b8e23', |
| orange: '#ffa500', |
| orangered: '#ff4500', |
| orchid: '#da70d6', |
| palegoldenrod: '#eee8aa', |
| palegreen: '#98fb98', |
| paleturquoise: '#afeeee', |
| palevioletred: '#d87093', |
| papayawhip: '#ffefd5', |
| peachpuff: '#ffdab9', |
| peru: '#cd853f', |
| pink: '#ffc0cb', |
| plum: '#dda0dd', |
| powderblue: '#b0e0e6', |
| purple: '#800080', |
| red: '#f00', |
| rosybrown: '#bc8f8f', |
| royalblue: '#4169e1', |
| saddlebrown: '#8b4513', |
| salmon: '#fa8072', |
| sandybrown: '#f4a460', |
| seagreen: '#2e8b57', |
| seashell: '#fff5ee', |
| sienna: '#a0522d', |
| silver: '#c0c0c0', |
| skyblue: '#87ceeb', |
| slateblue: '#6a5acd', |
| slategray: '#708090', |
| slategrey: '#708090', |
| snow: '#fffafa', |
| springgreen: '#00ff7f', |
| steelblue: '#4682b4', |
| tan: '#d2b48c', |
| teal: '#008080', |
| thistle: '#d8bfd8', |
| tomato: '#ff6347', |
| turquoise: '#40e0d0', |
| violet: '#ee82ee', |
| wheat: '#f5deb3', |
| white: '#fff', |
| whitesmoke: '#f5f5f5', |
| yellow: '#ff0', |
| yellowgreen: '#9acd32' |
| }; |
| function customPalette(userPalete) { |
| palette = userPalete; |
| } |
| function resetPalette() { |
| palette = _palette; |
| } |
| function getColor(idx, userPalete) { |
| idx = idx | 0; |
| userPalete = userPalete || palette; |
| return userPalete[idx % userPalete.length]; |
| } |
| function customHighlight(userHighlightColor) { |
| highlightColor = userHighlightColor; |
| } |
| function resetHighlight() { |
| _highlightColor = highlightColor; |
| } |
| function getHighlightColor() { |
| return highlightColor; |
| } |
| function getRadialGradient(x0, y0, r0, x1, y1, r1, colorList) { |
| if (!_ctx) { |
| _ctx = util.getContext(); |
| } |
| var gradient = _ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); |
| for (var i = 0, l = colorList.length; i < l; i++) { |
| gradient.addColorStop(colorList[i][0], colorList[i][1]); |
| } |
| gradient.__nonRecursion = true; |
| return gradient; |
| } |
| function getLinearGradient(x0, y0, x1, y1, colorList) { |
| if (!_ctx) { |
| _ctx = util.getContext(); |
| } |
| var gradient = _ctx.createLinearGradient(x0, y0, x1, y1); |
| for (var i = 0, l = colorList.length; i < l; i++) { |
| gradient.addColorStop(colorList[i][0], colorList[i][1]); |
| } |
| gradient.__nonRecursion = true; |
| return gradient; |
| } |
| function getStepColors(start, end, step) { |
| start = toRGBA(start); |
| end = toRGBA(end); |
| start = getData(start); |
| end = getData(end); |
| var colors = []; |
| var stepR = (end[0] - start[0]) / step; |
| var stepG = (end[1] - start[1]) / step; |
| var stepB = (end[2] - start[2]) / step; |
| var stepA = (end[3] - start[3]) / step; |
| for (var i = 0, r = start[0], g = start[1], b = start[2], a = start[3]; i < step; i++) { |
| colors[i] = toColor([ |
| adjust(Math.floor(r), [ |
| 0, |
| 255 |
| ]), |
| adjust(Math.floor(g), [ |
| 0, |
| 255 |
| ]), |
| adjust(Math.floor(b), [ |
| 0, |
| 255 |
| ]), |
| a.toFixed(4) - 0 |
| ], 'rgba'); |
| r += stepR; |
| g += stepG; |
| b += stepB; |
| a += stepA; |
| } |
| r = end[0]; |
| g = end[1]; |
| b = end[2]; |
| a = end[3]; |
| colors[i] = toColor([ |
| r, |
| g, |
| b, |
| a |
| ], 'rgba'); |
| return colors; |
| } |
| function getGradientColors(colors, step) { |
| var ret = []; |
| var len = colors.length; |
| if (step === undefined) { |
| step = 20; |
| } |
| if (len === 1) { |
| ret = getStepColors(colors[0], colors[0], step); |
| } else if (len > 1) { |
| for (var i = 0, n = len - 1; i < n; i++) { |
| var steps = getStepColors(colors[i], colors[i + 1], step); |
| if (i < n - 1) { |
| steps.pop(); |
| } |
| ret = ret.concat(steps); |
| } |
| } |
| return ret; |
| } |
| function toColor(data, format) { |
| format = format || 'rgb'; |
| if (data && (data.length === 3 || data.length === 4)) { |
| data = map(data, function (c) { |
| return c > 1 ? Math.ceil(c) : c; |
| }); |
| if (format.indexOf('hex') > -1) { |
| return '#' + ((1 << 24) + (data[0] << 16) + (data[1] << 8) + +data[2]).toString(16).slice(1); |
| } else if (format.indexOf('hs') > -1) { |
| var sx = map(data.slice(1, 3), function (c) { |
| return c + '%'; |
| }); |
| data[1] = sx[0]; |
| data[2] = sx[1]; |
| } |
| if (format.indexOf('a') > -1) { |
| if (data.length === 3) { |
| data.push(1); |
| } |
| data[3] = adjust(data[3], [ |
| 0, |
| 1 |
| ]); |
| return format + '(' + data.slice(0, 4).join(',') + ')'; |
| } |
| return format + '(' + data.slice(0, 3).join(',') + ')'; |
| } |
| } |
| function toArray(color) { |
| color = trim(color); |
| if (color.indexOf('rgba') < 0) { |
| color = toRGBA(color); |
| } |
| var data = []; |
| var i = 0; |
| color.replace(/[\d.]+/g, function (n) { |
| if (i < 3) { |
| n = n | 0; |
| } else { |
| n = +n; |
| } |
| data[i++] = n; |
| }); |
| return data; |
| } |
| function convert(color, format) { |
| if (!isCalculableColor(color)) { |
| return color; |
| } |
| var data = getData(color); |
| var alpha = data[3]; |
| if (typeof alpha === 'undefined') { |
| alpha = 1; |
| } |
| if (color.indexOf('hsb') > -1) { |
| data = _HSV_2_RGB(data); |
| } else if (color.indexOf('hsl') > -1) { |
| data = _HSL_2_RGB(data); |
| } |
| if (format.indexOf('hsb') > -1 || format.indexOf('hsv') > -1) { |
| data = _RGB_2_HSB(data); |
| } else if (format.indexOf('hsl') > -1) { |
| data = _RGB_2_HSL(data); |
| } |
| data[3] = alpha; |
| return toColor(data, format); |
| } |
| function toRGBA(color) { |
| return convert(color, 'rgba'); |
| } |
| function toRGB(color) { |
| return convert(color, 'rgb'); |
| } |
| function toHex(color) { |
| return convert(color, 'hex'); |
| } |
| function toHSVA(color) { |
| return convert(color, 'hsva'); |
| } |
| function toHSV(color) { |
| return convert(color, 'hsv'); |
| } |
| function toHSBA(color) { |
| return convert(color, 'hsba'); |
| } |
| function toHSB(color) { |
| return convert(color, 'hsb'); |
| } |
| function toHSLA(color) { |
| return convert(color, 'hsla'); |
| } |
| function toHSL(color) { |
| return convert(color, 'hsl'); |
| } |
| function toName(color) { |
| for (var key in _nameColors) { |
| if (toHex(_nameColors[key]) === toHex(color)) { |
| return key; |
| } |
| } |
| return null; |
| } |
| function trim(color) { |
| return String(color).replace(/\s+/g, ''); |
| } |
| function normalize(color) { |
| if (_nameColors[color]) { |
| color = _nameColors[color]; |
| } |
| color = trim(color); |
| color = color.replace(/hsv/i, 'hsb'); |
| if (/^#[\da-f]{3}$/i.test(color)) { |
| color = parseInt(color.slice(1), 16); |
| var r = (color & 3840) << 8; |
| var g = (color & 240) << 4; |
| var b = color & 15; |
| color = '#' + ((1 << 24) + (r << 4) + r + (g << 4) + g + (b << 4) + b).toString(16).slice(1); |
| } |
| return color; |
| } |
| function lift(color, level) { |
| if (!isCalculableColor(color)) { |
| return color; |
| } |
| var direct = level > 0 ? 1 : -1; |
| if (typeof level === 'undefined') { |
| level = 0; |
| } |
| level = Math.abs(level) > 1 ? 1 : Math.abs(level); |
| color = toRGB(color); |
| var data = getData(color); |
| for (var i = 0; i < 3; i++) { |
| if (direct === 1) { |
| data[i] = data[i] * (1 - level) | 0; |
| } else { |
| data[i] = (255 - data[i]) * level + data[i] | 0; |
| } |
| } |
| return 'rgb(' + data.join(',') + ')'; |
| } |
| function reverse(color) { |
| if (!isCalculableColor(color)) { |
| return color; |
| } |
| var data = getData(toRGBA(color)); |
| data = map(data, function (c) { |
| return 255 - c; |
| }); |
| return toColor(data, 'rgb'); |
| } |
| function mix(color1, color2, weight) { |
| if (!isCalculableColor(color1) || !isCalculableColor(color2)) { |
| return color1; |
| } |
| if (typeof weight === 'undefined') { |
| weight = 0.5; |
| } |
| weight = 1 - adjust(weight, [ |
| 0, |
| 1 |
| ]); |
| var w = weight * 2 - 1; |
| var data1 = getData(toRGBA(color1)); |
| var data2 = getData(toRGBA(color2)); |
| var d = data1[3] - data2[3]; |
| var weight1 = ((w * d === -1 ? w : (w + d) / (1 + w * d)) + 1) / 2; |
| var weight2 = 1 - weight1; |
| var data = []; |
| for (var i = 0; i < 3; i++) { |
| data[i] = data1[i] * weight1 + data2[i] * weight2; |
| } |
| var alpha = data1[3] * weight + data2[3] * (1 - weight); |
| alpha = Math.max(0, Math.min(1, alpha)); |
| if (data1[3] === 1 && data2[3] === 1) { |
| return toColor(data, 'rgb'); |
| } |
| data[3] = alpha; |
| return toColor(data, 'rgba'); |
| } |
| function random() { |
| return '#' + (Math.random().toString(16) + '0000').slice(2, 8); |
| } |
| function getData(color) { |
| color = normalize(color); |
| var r = color.match(colorRegExp); |
| if (r === null) { |
| throw new Error('The color format error'); |
| } |
| var d; |
| var a; |
| var data = []; |
| var rgb; |
| if (r[2]) { |
| d = r[2].replace('#', '').split(''); |
| rgb = [ |
| d[0] + d[1], |
| d[2] + d[3], |
| d[4] + d[5] |
| ]; |
| data = map(rgb, function (c) { |
| return adjust(parseInt(c, 16), [ |
| 0, |
| 255 |
| ]); |
| }); |
| } else if (r[4]) { |
| var rgba = r[4].split(','); |
| a = rgba[3]; |
| rgb = rgba.slice(0, 3); |
| data = map(rgb, function (c) { |
| c = Math.floor(c.indexOf('%') > 0 ? parseInt(c, 0) * 2.55 : c); |
| return adjust(c, [ |
| 0, |
| 255 |
| ]); |
| }); |
| if (typeof a !== 'undefined') { |
| data.push(adjust(parseFloat(a), [ |
| 0, |
| 1 |
| ])); |
| } |
| } else if (r[5] || r[6]) { |
| var hsxa = (r[5] || r[6]).split(','); |
| var h = parseInt(hsxa[0], 0) / 360; |
| var s = hsxa[1]; |
| var x = hsxa[2]; |
| a = hsxa[3]; |
| data = map([ |
| s, |
| x |
| ], function (c) { |
| return adjust(parseFloat(c) / 100, [ |
| 0, |
| 1 |
| ]); |
| }); |
| data.unshift(h); |
| if (typeof a !== 'undefined') { |
| data.push(adjust(parseFloat(a), [ |
| 0, |
| 1 |
| ])); |
| } |
| } |
| return data; |
| } |
| function alpha(color, a) { |
| if (!isCalculableColor(color)) { |
| return color; |
| } |
| if (a === null) { |
| a = 1; |
| } |
| var data = getData(toRGBA(color)); |
| data[3] = adjust(Number(a).toFixed(4), [ |
| 0, |
| 1 |
| ]); |
| return toColor(data, 'rgba'); |
| } |
| function map(array, fun) { |
| if (typeof fun !== 'function') { |
| throw new TypeError(); |
| } |
| var len = array ? array.length : 0; |
| for (var i = 0; i < len; i++) { |
| array[i] = fun(array[i]); |
| } |
| return array; |
| } |
| function adjust(value, region) { |
| if (value <= region[0]) { |
| value = region[0]; |
| } else if (value >= region[1]) { |
| value = region[1]; |
| } |
| return value; |
| } |
| function isCalculableColor(color) { |
| return color instanceof Array || typeof color === 'string'; |
| } |
| function _HSV_2_RGB(data) { |
| var H = data[0]; |
| var S = data[1]; |
| var V = data[2]; |
| var R; |
| var G; |
| var B; |
| if (S === 0) { |
| R = V * 255; |
| G = V * 255; |
| B = V * 255; |
| } else { |
| var h = H * 6; |
| if (h === 6) { |
| h = 0; |
| } |
| var i = h | 0; |
| var v1 = V * (1 - S); |
| var v2 = V * (1 - S * (h - i)); |
| var v3 = V * (1 - S * (1 - (h - i))); |
| var r = 0; |
| var g = 0; |
| var b = 0; |
| if (i === 0) { |
| r = V; |
| g = v3; |
| b = v1; |
| } else if (i === 1) { |
| r = v2; |
| g = V; |
| b = v1; |
| } else if (i === 2) { |
| r = v1; |
| g = V; |
| b = v3; |
| } else if (i === 3) { |
| r = v1; |
| g = v2; |
| b = V; |
| } else if (i === 4) { |
| r = v3; |
| g = v1; |
| b = V; |
| } else { |
| r = V; |
| g = v1; |
| b = v2; |
| } |
| R = r * 255; |
| G = g * 255; |
| B = b * 255; |
| } |
| return [ |
| R, |
| G, |
| B |
| ]; |
| } |
| function _HSL_2_RGB(data) { |
| var H = data[0]; |
| var S = data[1]; |
| var L = data[2]; |
| var R; |
| var G; |
| var B; |
| if (S === 0) { |
| R = L * 255; |
| G = L * 255; |
| B = L * 255; |
| } else { |
| var v2; |
| if (L < 0.5) { |
| v2 = L * (1 + S); |
| } else { |
| v2 = L + S - S * L; |
| } |
| var v1 = 2 * L - v2; |
| R = 255 * _HUE_2_RGB(v1, v2, H + 1 / 3); |
| G = 255 * _HUE_2_RGB(v1, v2, H); |
| B = 255 * _HUE_2_RGB(v1, v2, H - 1 / 3); |
| } |
| return [ |
| R, |
| G, |
| B |
| ]; |
| } |
| function _HUE_2_RGB(v1, v2, vH) { |
| if (vH < 0) { |
| vH += 1; |
| } |
| if (vH > 1) { |
| vH -= 1; |
| } |
| if (6 * vH < 1) { |
| return v1 + (v2 - v1) * 6 * vH; |
| } |
| if (2 * vH < 1) { |
| return v2; |
| } |
| if (3 * vH < 2) { |
| return v1 + (v2 - v1) * (2 / 3 - vH) * 6; |
| } |
| return v1; |
| } |
| function _RGB_2_HSB(data) { |
| var R = data[0] / 255; |
| var G = data[1] / 255; |
| var B = data[2] / 255; |
| var vMin = Math.min(R, G, B); |
| var vMax = Math.max(R, G, B); |
| var delta = vMax - vMin; |
| var V = vMax; |
| var H; |
| var S; |
| if (delta === 0) { |
| H = 0; |
| S = 0; |
| } else { |
| S = delta / vMax; |
| var deltaR = ((vMax - R) / 6 + delta / 2) / delta; |
| var deltaG = ((vMax - G) / 6 + delta / 2) / delta; |
| var deltaB = ((vMax - B) / 6 + delta / 2) / delta; |
| if (R === vMax) { |
| H = deltaB - deltaG; |
| } else if (G === vMax) { |
| H = 1 / 3 + deltaR - deltaB; |
| } else if (B === vMax) { |
| H = 2 / 3 + deltaG - deltaR; |
| } |
| if (H < 0) { |
| H += 1; |
| } |
| if (H > 1) { |
| H -= 1; |
| } |
| } |
| H = H * 360; |
| S = S * 100; |
| V = V * 100; |
| return [ |
| H, |
| S, |
| V |
| ]; |
| } |
| function _RGB_2_HSL(data) { |
| var R = data[0] / 255; |
| var G = data[1] / 255; |
| var B = data[2] / 255; |
| var vMin = Math.min(R, G, B); |
| var vMax = Math.max(R, G, B); |
| var delta = vMax - vMin; |
| var L = (vMax + vMin) / 2; |
| var H; |
| var S; |
| if (delta === 0) { |
| H = 0; |
| S = 0; |
| } else { |
| if (L < 0.5) { |
| S = delta / (vMax + vMin); |
| } else { |
| S = delta / (2 - vMax - vMin); |
| } |
| var deltaR = ((vMax - R) / 6 + delta / 2) / delta; |
| var deltaG = ((vMax - G) / 6 + delta / 2) / delta; |
| var deltaB = ((vMax - B) / 6 + delta / 2) / delta; |
| if (R === vMax) { |
| H = deltaB - deltaG; |
| } else if (G === vMax) { |
| H = 1 / 3 + deltaR - deltaB; |
| } else if (B === vMax) { |
| H = 2 / 3 + deltaG - deltaR; |
| } |
| if (H < 0) { |
| H += 1; |
| } |
| if (H > 1) { |
| H -= 1; |
| } |
| } |
| H = H * 360; |
| S = S * 100; |
| L = L * 100; |
| return [ |
| H, |
| S, |
| L |
| ]; |
| } |
| return { |
| customPalette: customPalette, |
| resetPalette: resetPalette, |
| getColor: getColor, |
| getHighlightColor: getHighlightColor, |
| customHighlight: customHighlight, |
| resetHighlight: resetHighlight, |
| getRadialGradient: getRadialGradient, |
| getLinearGradient: getLinearGradient, |
| getGradientColors: getGradientColors, |
| getStepColors: getStepColors, |
| reverse: reverse, |
| mix: mix, |
| lift: lift, |
| trim: trim, |
| random: random, |
| toRGB: toRGB, |
| toRGBA: toRGBA, |
| toHex: toHex, |
| toHSL: toHSL, |
| toHSLA: toHSLA, |
| toHSB: toHSB, |
| toHSBA: toHSBA, |
| toHSV: toHSV, |
| toHSVA: toHSVA, |
| toName: toName, |
| toColor: toColor, |
| toArray: toArray, |
| alpha: alpha, |
| getData: getData |
| }; |
| });define('echarts/component/timeline', [ |
| 'require', |
| './base', |
| 'zrender/shape/Rectangle', |
| '../util/shape/Icon', |
| '../util/shape/Chain', |
| '../config', |
| 'zrender/tool/util', |
| 'zrender/tool/area', |
| 'zrender/tool/event', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var IconShape = require('../util/shape/Icon'); |
| var ChainShape = require('../util/shape/Chain'); |
| var ecConfig = require('../config'); |
| ecConfig.timeline = { |
| zlevel: 0, |
| z: 4, |
| show: true, |
| type: 'time', |
| notMerge: false, |
| realtime: true, |
| x: 80, |
| x2: 80, |
| y2: 0, |
| height: 50, |
| backgroundColor: 'rgba(0,0,0,0)', |
| borderColor: '#ccc', |
| borderWidth: 0, |
| padding: 5, |
| controlPosition: 'left', |
| autoPlay: false, |
| loop: true, |
| playInterval: 2000, |
| lineStyle: { |
| width: 1, |
| color: '#666', |
| type: 'dashed' |
| }, |
| label: { |
| show: true, |
| interval: 'auto', |
| rotate: 0, |
| textStyle: { color: '#333' } |
| }, |
| checkpointStyle: { |
| symbol: 'auto', |
| symbolSize: 'auto', |
| color: 'auto', |
| borderColor: 'auto', |
| borderWidth: 'auto', |
| label: { |
| show: false, |
| textStyle: { color: 'auto' } |
| } |
| }, |
| controlStyle: { |
| itemSize: 15, |
| itemGap: 5, |
| normal: { color: '#333' }, |
| emphasis: { color: '#1e90ff' } |
| }, |
| symbol: 'emptyDiamond', |
| symbolSize: 4, |
| currentIndex: 0 |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| var zrArea = require('zrender/tool/area'); |
| var zrEvent = require('zrender/tool/event'); |
| function Timeline(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| var self = this; |
| self._onclick = function (param) { |
| return self.__onclick(param); |
| }; |
| self._ondrift = function (dx, dy) { |
| return self.__ondrift(this, dx, dy); |
| }; |
| self._ondragend = function () { |
| return self.__ondragend(); |
| }; |
| self._setCurrentOption = function () { |
| var timelineOption = self.timelineOption; |
| self.currentIndex %= timelineOption.data.length; |
| var curOption = self.options[self.currentIndex] || {}; |
| self.myChart._setOption(curOption, timelineOption.notMerge, true); |
| self.messageCenter.dispatch(ecConfig.EVENT.TIMELINE_CHANGED, null, { |
| currentIndex: self.currentIndex, |
| data: timelineOption.data[self.currentIndex].name != null ? timelineOption.data[self.currentIndex].name : timelineOption.data[self.currentIndex] |
| }, self.myChart); |
| }; |
| self._onFrame = function () { |
| self._setCurrentOption(); |
| self._syncHandleShape(); |
| if (self.timelineOption.autoPlay) { |
| self.playTicket = setTimeout(function () { |
| self.currentIndex += 1; |
| if (!self.timelineOption.loop && self.currentIndex >= self.timelineOption.data.length) { |
| self.currentIndex = self.timelineOption.data.length - 1; |
| self.stop(); |
| return; |
| } |
| self._onFrame(); |
| }, self.timelineOption.playInterval); |
| } |
| }; |
| this.setTheme(false); |
| this.options = this.option.options; |
| this.currentIndex = this.timelineOption.currentIndex % this.timelineOption.data.length; |
| if (!this.timelineOption.notMerge && this.currentIndex !== 0) { |
| this.options[this.currentIndex] = zrUtil.merge(this.options[this.currentIndex], this.options[0]); |
| } |
| if (this.timelineOption.show) { |
| this._buildShape(); |
| this._syncHandleShape(); |
| } |
| this._setCurrentOption(); |
| if (this.timelineOption.autoPlay) { |
| var self = this; |
| this.playTicket = setTimeout(function () { |
| self.play(); |
| }, this.ecTheme.animationDuration != null ? this.ecTheme.animationDuration : ecConfig.animationDuration); |
| } |
| } |
| Timeline.prototype = { |
| type: ecConfig.COMPONENT_TYPE_TIMELINE, |
| _buildShape: function () { |
| this._location = this._getLocation(); |
| this._buildBackground(); |
| this._buildControl(); |
| this._chainPoint = this._getChainPoint(); |
| if (this.timelineOption.label.show) { |
| var interval = this._getInterval(); |
| for (var i = 0, len = this._chainPoint.length; i < len; i += interval) { |
| this._chainPoint[i].showLabel = true; |
| } |
| } |
| this._buildChain(); |
| this._buildHandle(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| }, |
| _getLocation: function () { |
| var timelineOption = this.timelineOption; |
| var padding = this.reformCssArray(this.timelineOption.padding); |
| var zrWidth = this.zr.getWidth(); |
| var x = this.parsePercent(timelineOption.x, zrWidth); |
| var x2 = this.parsePercent(timelineOption.x2, zrWidth); |
| var width; |
| if (timelineOption.width == null) { |
| width = zrWidth - x - x2; |
| x2 = zrWidth - x2; |
| } else { |
| width = this.parsePercent(timelineOption.width, zrWidth); |
| x2 = x + width; |
| } |
| var zrHeight = this.zr.getHeight(); |
| var height = this.parsePercent(timelineOption.height, zrHeight); |
| var y; |
| var y2; |
| if (timelineOption.y != null) { |
| y = this.parsePercent(timelineOption.y, zrHeight); |
| y2 = y + height; |
| } else { |
| y2 = zrHeight - this.parsePercent(timelineOption.y2, zrHeight); |
| y = y2 - height; |
| } |
| return { |
| x: x + padding[3], |
| y: y + padding[0], |
| x2: x2 - padding[1], |
| y2: y2 - padding[2], |
| width: width - padding[1] - padding[3], |
| height: height - padding[0] - padding[2] |
| }; |
| }, |
| _getReformedLabel: function (idx) { |
| var timelineOption = this.timelineOption; |
| var data = timelineOption.data[idx].name != null ? timelineOption.data[idx].name : timelineOption.data[idx]; |
| var formatter = timelineOption.data[idx].formatter || timelineOption.label.formatter; |
| if (formatter) { |
| if (typeof formatter === 'function') { |
| data = formatter.call(this.myChart, data); |
| } else if (typeof formatter === 'string') { |
| data = formatter.replace('{value}', data); |
| } |
| } |
| return data; |
| }, |
| _getInterval: function () { |
| var chainPoint = this._chainPoint; |
| var timelineOption = this.timelineOption; |
| var interval = timelineOption.label.interval; |
| if (interval === 'auto') { |
| var fontSize = timelineOption.label.textStyle.fontSize; |
| var data = timelineOption.data; |
| var dataLength = timelineOption.data.length; |
| if (dataLength > 3) { |
| var isEnough = false; |
| var labelSpace; |
| var labelSize; |
| interval = 0; |
| while (!isEnough && interval < dataLength) { |
| interval++; |
| isEnough = true; |
| for (var i = interval; i < dataLength; i += interval) { |
| labelSpace = chainPoint[i].x - chainPoint[i - interval].x; |
| if (timelineOption.label.rotate !== 0) { |
| labelSize = fontSize; |
| } else if (data[i].textStyle) { |
| labelSize = zrArea.getTextWidth(chainPoint[i].name, chainPoint[i].textFont); |
| } else { |
| var label = chainPoint[i].name + ''; |
| var wLen = (label.match(/\w/g) || '').length; |
| var oLen = label.length - wLen; |
| labelSize = wLen * fontSize * 2 / 3 + oLen * fontSize; |
| } |
| if (labelSpace < labelSize) { |
| isEnough = false; |
| break; |
| } |
| } |
| } |
| } else { |
| interval = 1; |
| } |
| } else { |
| interval = interval - 0 + 1; |
| } |
| return interval; |
| }, |
| _getChainPoint: function () { |
| var timelineOption = this.timelineOption; |
| var symbol = timelineOption.symbol.toLowerCase(); |
| var symbolSize = timelineOption.symbolSize; |
| var rotate = timelineOption.label.rotate; |
| var textStyle = timelineOption.label.textStyle; |
| var textFont = this.getFont(textStyle); |
| var dataTextStyle; |
| var data = timelineOption.data; |
| var x = this._location.x; |
| var y = this._location.y + this._location.height / 4 * 3; |
| var width = this._location.x2 - this._location.x; |
| var len = data.length; |
| function _getName(i) { |
| return data[i].name != null ? data[i].name : data[i] + ''; |
| } |
| var xList = []; |
| if (len > 1) { |
| var boundaryGap = width / len; |
| boundaryGap = boundaryGap > 50 ? 50 : boundaryGap < 20 ? 5 : boundaryGap; |
| width -= boundaryGap * 2; |
| if (timelineOption.type === 'number') { |
| for (var i = 0; i < len; i++) { |
| xList.push(x + boundaryGap + width / (len - 1) * i); |
| } |
| } else { |
| xList[0] = new Date(_getName(0).replace(/-/g, '/')); |
| xList[len - 1] = new Date(_getName(len - 1).replace(/-/g, '/')) - xList[0]; |
| for (var i = 1; i < len; i++) { |
| xList[i] = x + boundaryGap + width * (new Date(_getName(i).replace(/-/g, '/')) - xList[0]) / xList[len - 1]; |
| } |
| xList[0] = x + boundaryGap; |
| } |
| } else { |
| xList.push(x + width / 2); |
| } |
| var list = []; |
| var curSymbol; |
| var n; |
| var isEmpty; |
| var textAlign; |
| var rotation; |
| for (var i = 0; i < len; i++) { |
| x = xList[i]; |
| curSymbol = data[i].symbol && data[i].symbol.toLowerCase() || symbol; |
| if (curSymbol.match('empty')) { |
| curSymbol = curSymbol.replace('empty', ''); |
| isEmpty = true; |
| } else { |
| isEmpty = false; |
| } |
| if (curSymbol.match('star')) { |
| n = curSymbol.replace('star', '') - 0 || 5; |
| curSymbol = 'star'; |
| } |
| dataTextStyle = data[i].textStyle ? zrUtil.merge(data[i].textStyle || {}, textStyle) : textStyle; |
| textAlign = dataTextStyle.align || 'center'; |
| if (rotate) { |
| textAlign = rotate > 0 ? 'right' : 'left'; |
| rotation = [ |
| rotate * Math.PI / 180, |
| x, |
| y - 5 |
| ]; |
| } else { |
| rotation = false; |
| } |
| list.push({ |
| x: x, |
| n: n, |
| isEmpty: isEmpty, |
| symbol: curSymbol, |
| symbolSize: data[i].symbolSize || symbolSize, |
| color: data[i].color, |
| borderColor: data[i].borderColor, |
| borderWidth: data[i].borderWidth, |
| name: this._getReformedLabel(i), |
| textColor: dataTextStyle.color, |
| textAlign: textAlign, |
| textBaseline: dataTextStyle.baseline || 'middle', |
| textX: x, |
| textY: y - (rotate ? 5 : 0), |
| textFont: data[i].textStyle ? this.getFont(dataTextStyle) : textFont, |
| rotation: rotation, |
| showLabel: false |
| }); |
| } |
| return list; |
| }, |
| _buildBackground: function () { |
| var timelineOption = this.timelineOption; |
| var padding = this.reformCssArray(this.timelineOption.padding); |
| var width = this._location.width; |
| var height = this._location.height; |
| if (timelineOption.borderWidth !== 0 || timelineOption.backgroundColor.replace(/\s/g, '') != 'rgba(0,0,0,0)') { |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._location.x - padding[3], |
| y: this._location.y - padding[0], |
| width: width + padding[1] + padding[3], |
| height: height + padding[0] + padding[2], |
| brushType: timelineOption.borderWidth === 0 ? 'fill' : 'both', |
| color: timelineOption.backgroundColor, |
| strokeColor: timelineOption.borderColor, |
| lineWidth: timelineOption.borderWidth |
| } |
| })); |
| } |
| }, |
| _buildControl: function () { |
| var self = this; |
| var timelineOption = this.timelineOption; |
| var lineStyle = timelineOption.lineStyle; |
| var controlStyle = timelineOption.controlStyle; |
| if (timelineOption.controlPosition === 'none') { |
| return; |
| } |
| var iconSize = controlStyle.itemSize; |
| var iconGap = controlStyle.itemGap; |
| var x; |
| if (timelineOption.controlPosition === 'left') { |
| x = this._location.x; |
| this._location.x += (iconSize + iconGap) * 3; |
| } else { |
| x = this._location.x2 - ((iconSize + iconGap) * 3 - iconGap); |
| this._location.x2 -= (iconSize + iconGap) * 3; |
| } |
| var y = this._location.y; |
| var iconStyle = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 1, |
| style: { |
| iconType: 'timelineControl', |
| symbol: 'last', |
| x: x, |
| y: y, |
| width: iconSize, |
| height: iconSize, |
| brushType: 'stroke', |
| color: controlStyle.normal.color, |
| strokeColor: controlStyle.normal.color, |
| lineWidth: lineStyle.width |
| }, |
| highlightStyle: { |
| color: controlStyle.emphasis.color, |
| strokeColor: controlStyle.emphasis.color, |
| lineWidth: lineStyle.width + 1 |
| }, |
| clickable: true |
| }; |
| this._ctrLastShape = new IconShape(iconStyle); |
| this._ctrLastShape.onclick = function () { |
| self.last(); |
| }; |
| this.shapeList.push(this._ctrLastShape); |
| x += iconSize + iconGap; |
| this._ctrPlayShape = new IconShape(zrUtil.clone(iconStyle)); |
| this._ctrPlayShape.style.brushType = 'fill'; |
| this._ctrPlayShape.style.symbol = 'play'; |
| this._ctrPlayShape.style.status = this.timelineOption.autoPlay ? 'playing' : 'stop'; |
| this._ctrPlayShape.style.x = x; |
| this._ctrPlayShape.onclick = function () { |
| if (self._ctrPlayShape.style.status === 'stop') { |
| self.play(); |
| } else { |
| self.stop(); |
| } |
| }; |
| this.shapeList.push(this._ctrPlayShape); |
| x += iconSize + iconGap; |
| this._ctrNextShape = new IconShape(zrUtil.clone(iconStyle)); |
| this._ctrNextShape.style.symbol = 'next'; |
| this._ctrNextShape.style.x = x; |
| this._ctrNextShape.onclick = function () { |
| self.next(); |
| }; |
| this.shapeList.push(this._ctrNextShape); |
| }, |
| _buildChain: function () { |
| var timelineOption = this.timelineOption; |
| var lineStyle = timelineOption.lineStyle; |
| this._timelineShae = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: this._location.x, |
| y: this.subPixelOptimize(this._location.y, lineStyle.width), |
| width: this._location.x2 - this._location.x, |
| height: this._location.height, |
| chainPoint: this._chainPoint, |
| brushType: 'both', |
| strokeColor: lineStyle.color, |
| lineWidth: lineStyle.width, |
| lineType: lineStyle.type |
| }, |
| hoverable: false, |
| clickable: true, |
| onclick: this._onclick |
| }; |
| this._timelineShae = new ChainShape(this._timelineShae); |
| this.shapeList.push(this._timelineShae); |
| }, |
| _buildHandle: function () { |
| var curPoint = this._chainPoint[this.currentIndex]; |
| var symbolSize = curPoint.symbolSize + 1; |
| symbolSize = symbolSize < 5 ? 5 : symbolSize; |
| this._handleShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 1, |
| hoverable: false, |
| draggable: true, |
| style: { |
| iconType: 'diamond', |
| n: curPoint.n, |
| x: curPoint.x - symbolSize, |
| y: this._location.y + this._location.height / 4 - symbolSize, |
| width: symbolSize * 2, |
| height: symbolSize * 2, |
| brushType: 'both', |
| textPosition: 'specific', |
| textX: curPoint.x, |
| textY: this._location.y - this._location.height / 4, |
| textAlign: 'center', |
| textBaseline: 'middle' |
| }, |
| highlightStyle: {}, |
| ondrift: this._ondrift, |
| ondragend: this._ondragend |
| }; |
| this._handleShape = new IconShape(this._handleShape); |
| this.shapeList.push(this._handleShape); |
| }, |
| _syncHandleShape: function () { |
| if (!this.timelineOption.show) { |
| return; |
| } |
| var timelineOption = this.timelineOption; |
| var cpStyle = timelineOption.checkpointStyle; |
| var curPoint = this._chainPoint[this.currentIndex]; |
| this._handleShape.style.text = cpStyle.label.show ? curPoint.name : ''; |
| this._handleShape.style.textFont = curPoint.textFont; |
| this._handleShape.style.n = curPoint.n; |
| if (cpStyle.symbol === 'auto') { |
| this._handleShape.style.iconType = curPoint.symbol != 'none' ? curPoint.symbol : 'diamond'; |
| } else { |
| this._handleShape.style.iconType = cpStyle.symbol; |
| if (cpStyle.symbol.match('star')) { |
| this._handleShape.style.n = cpStyle.symbol.replace('star', '') - 0 || 5; |
| this._handleShape.style.iconType = 'star'; |
| } |
| } |
| var symbolSize; |
| if (cpStyle.symbolSize === 'auto') { |
| symbolSize = curPoint.symbolSize + 2; |
| symbolSize = symbolSize < 5 ? 5 : symbolSize; |
| } else { |
| symbolSize = cpStyle.symbolSize - 0; |
| } |
| this._handleShape.style.color = cpStyle.color === 'auto' ? curPoint.color ? curPoint.color : timelineOption.controlStyle.emphasis.color : cpStyle.color; |
| this._handleShape.style.textColor = cpStyle.label.textStyle.color === 'auto' ? this._handleShape.style.color : cpStyle.label.textStyle.color; |
| this._handleShape.highlightStyle.strokeColor = this._handleShape.style.strokeColor = cpStyle.borderColor === 'auto' ? curPoint.borderColor ? curPoint.borderColor : '#fff' : cpStyle.borderColor; |
| this._handleShape.style.lineWidth = cpStyle.borderWidth === 'auto' ? curPoint.borderWidth ? curPoint.borderWidth : 0 : cpStyle.borderWidth - 0; |
| this._handleShape.highlightStyle.lineWidth = this._handleShape.style.lineWidth + 1; |
| this.zr.animate(this._handleShape.id, 'style').when(500, { |
| x: curPoint.x - symbolSize, |
| textX: curPoint.x, |
| y: this._location.y + this._location.height / 4 - symbolSize, |
| width: symbolSize * 2, |
| height: symbolSize * 2 |
| }).start('ExponentialOut'); |
| }, |
| _findChainIndex: function (x) { |
| var chainPoint = this._chainPoint; |
| var len = chainPoint.length; |
| if (x <= chainPoint[0].x) { |
| return 0; |
| } else if (x >= chainPoint[len - 1].x) { |
| return len - 1; |
| } |
| for (var i = 0; i < len - 1; i++) { |
| if (x >= chainPoint[i].x && x <= chainPoint[i + 1].x) { |
| return Math.abs(x - chainPoint[i].x) < Math.abs(x - chainPoint[i + 1].x) ? i : i + 1; |
| } |
| } |
| }, |
| __onclick: function (param) { |
| var x = zrEvent.getX(param.event); |
| var newIndex = this._findChainIndex(x); |
| if (newIndex === this.currentIndex) { |
| return true; |
| } |
| this.currentIndex = newIndex; |
| this.timelineOption.autoPlay && this.stop(); |
| clearTimeout(this.playTicket); |
| this._onFrame(); |
| }, |
| __ondrift: function (shape, dx) { |
| this.timelineOption.autoPlay && this.stop(); |
| var chainPoint = this._chainPoint; |
| var len = chainPoint.length; |
| var newIndex; |
| if (shape.style.x + dx <= chainPoint[0].x - chainPoint[0].symbolSize) { |
| shape.style.x = chainPoint[0].x - chainPoint[0].symbolSize; |
| newIndex = 0; |
| } else if (shape.style.x + dx >= chainPoint[len - 1].x - chainPoint[len - 1].symbolSize) { |
| shape.style.x = chainPoint[len - 1].x - chainPoint[len - 1].symbolSize; |
| newIndex = len - 1; |
| } else { |
| shape.style.x += dx; |
| newIndex = this._findChainIndex(shape.style.x); |
| } |
| var curPoint = chainPoint[newIndex]; |
| var symbolSize = curPoint.symbolSize + 2; |
| shape.style.iconType = curPoint.symbol; |
| shape.style.n = curPoint.n; |
| shape.style.textX = shape.style.x + symbolSize / 2; |
| shape.style.y = this._location.y + this._location.height / 4 - symbolSize; |
| shape.style.width = symbolSize * 2; |
| shape.style.height = symbolSize * 2; |
| shape.style.text = curPoint.name; |
| if (newIndex === this.currentIndex) { |
| return true; |
| } |
| this.currentIndex = newIndex; |
| if (this.timelineOption.realtime) { |
| clearTimeout(this.playTicket); |
| var self = this; |
| this.playTicket = setTimeout(function () { |
| self._setCurrentOption(); |
| }, 200); |
| } |
| return true; |
| }, |
| __ondragend: function () { |
| this.isDragend = true; |
| }, |
| ondragend: function (param, status) { |
| if (!this.isDragend || !param.target) { |
| return; |
| } |
| !this.timelineOption.realtime && this._setCurrentOption(); |
| status.dragOut = true; |
| status.dragIn = true; |
| status.needRefresh = false; |
| this.isDragend = false; |
| this._syncHandleShape(); |
| return; |
| }, |
| last: function () { |
| this.timelineOption.autoPlay && this.stop(); |
| this.currentIndex -= 1; |
| if (this.currentIndex < 0) { |
| this.currentIndex = this.timelineOption.data.length - 1; |
| } |
| this._onFrame(); |
| return this.currentIndex; |
| }, |
| next: function () { |
| this.timelineOption.autoPlay && this.stop(); |
| this.currentIndex += 1; |
| if (this.currentIndex >= this.timelineOption.data.length) { |
| this.currentIndex = 0; |
| } |
| this._onFrame(); |
| return this.currentIndex; |
| }, |
| play: function (targetIndex, autoPlay) { |
| if (this._ctrPlayShape && this._ctrPlayShape.style.status != 'playing') { |
| this._ctrPlayShape.style.status = 'playing'; |
| this.zr.modShape(this._ctrPlayShape.id); |
| this.zr.refreshNextFrame(); |
| } |
| this.timelineOption.autoPlay = autoPlay != null ? autoPlay : true; |
| if (!this.timelineOption.autoPlay) { |
| clearTimeout(this.playTicket); |
| } |
| this.currentIndex = targetIndex != null ? targetIndex : this.currentIndex + 1; |
| if (this.currentIndex >= this.timelineOption.data.length) { |
| this.currentIndex = 0; |
| } |
| this._onFrame(); |
| return this.currentIndex; |
| }, |
| stop: function () { |
| if (this._ctrPlayShape && this._ctrPlayShape.style.status != 'stop') { |
| this._ctrPlayShape.style.status = 'stop'; |
| this.zr.modShape(this._ctrPlayShape.id); |
| this.zr.refreshNextFrame(); |
| } |
| this.timelineOption.autoPlay = false; |
| clearTimeout(this.playTicket); |
| return this.currentIndex; |
| }, |
| resize: function () { |
| if (this.timelineOption.show) { |
| this.clear(); |
| this._buildShape(); |
| this._syncHandleShape(); |
| } |
| }, |
| setTheme: function (needRefresh) { |
| this.timelineOption = this.reformOption(zrUtil.clone(this.option.timeline)); |
| this.timelineOption.label.textStyle = this.getTextStyle(this.timelineOption.label.textStyle); |
| this.timelineOption.checkpointStyle.label.textStyle = this.getTextStyle(this.timelineOption.checkpointStyle.label.textStyle); |
| if (!this.myChart.canvasSupported) { |
| this.timelineOption.realtime = false; |
| } |
| if (this.timelineOption.show && needRefresh) { |
| this.clear(); |
| this._buildShape(); |
| this._syncHandleShape(); |
| } |
| }, |
| onbeforDispose: function () { |
| clearTimeout(this.playTicket); |
| } |
| }; |
| function timelineControl(ctx, style) { |
| var lineWidth = 2; |
| var x = style.x + lineWidth; |
| var y = style.y + lineWidth + 2; |
| var width = style.width - lineWidth; |
| var height = style.height - lineWidth; |
| var symbol = style.symbol; |
| if (symbol === 'last') { |
| ctx.moveTo(x + width - 2, y + height / 3); |
| ctx.lineTo(x + width - 2, y); |
| ctx.lineTo(x + 2, y + height / 2); |
| ctx.lineTo(x + width - 2, y + height); |
| ctx.lineTo(x + width - 2, y + height / 3 * 2); |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y); |
| } else if (symbol === 'next') { |
| ctx.moveTo(x + 2, y + height / 3); |
| ctx.lineTo(x + 2, y); |
| ctx.lineTo(x + width - 2, y + height / 2); |
| ctx.lineTo(x + 2, y + height); |
| ctx.lineTo(x + 2, y + height / 3 * 2); |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y); |
| } else if (symbol === 'play') { |
| if (style.status === 'stop') { |
| ctx.moveTo(x + 2, y); |
| ctx.lineTo(x + width - 2, y + height / 2); |
| ctx.lineTo(x + 2, y + height); |
| ctx.lineTo(x + 2, y); |
| } else { |
| var delta = style.brushType === 'both' ? 2 : 3; |
| ctx.rect(x + 2, y, delta, height); |
| ctx.rect(x + width - delta - 2, y, delta, height); |
| } |
| } else if (symbol.match('image')) { |
| var imageLocation = ''; |
| imageLocation = symbol.replace(new RegExp('^image:\\/\\/'), ''); |
| symbol = IconShape.prototype.iconLibrary.image; |
| symbol(ctx, { |
| x: x, |
| y: y, |
| width: width, |
| height: height, |
| image: imageLocation |
| }); |
| } |
| } |
| IconShape.prototype.iconLibrary['timelineControl'] = timelineControl; |
| zrUtil.inherits(Timeline, Base); |
| require('../component').define('timeline', Timeline); |
| return Timeline; |
| });define('zrender/shape/Image', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var ZImage = function (options) { |
| Base.call(this, options); |
| }; |
| ZImage.prototype = { |
| type: 'image', |
| brush: function (ctx, isHighlight, refreshNextFrame) { |
| var style = this.style || {}; |
| if (isHighlight) { |
| style = this.getHighlightStyle(style, this.highlightStyle || {}); |
| } |
| var image = style.image; |
| var self = this; |
| if (!this._imageCache) { |
| this._imageCache = {}; |
| } |
| if (typeof image === 'string') { |
| var src = image; |
| if (this._imageCache[src]) { |
| image = this._imageCache[src]; |
| } else { |
| image = new Image(); |
| image.onload = function () { |
| image.onload = null; |
| self.modSelf(); |
| refreshNextFrame(); |
| }; |
| image.src = src; |
| this._imageCache[src] = image; |
| } |
| } |
| if (image) { |
| if (image.nodeName.toUpperCase() == 'IMG') { |
| if (window.ActiveXObject) { |
| if (image.readyState != 'complete') { |
| return; |
| } |
| } else { |
| if (!image.complete) { |
| return; |
| } |
| } |
| } |
| var width = style.width || image.width; |
| var height = style.height || image.height; |
| var x = style.x; |
| var y = style.y; |
| if (!image.width || !image.height) { |
| return; |
| } |
| ctx.save(); |
| this.doClip(ctx); |
| this.setContext(ctx, style); |
| this.setTransform(ctx); |
| if (style.sWidth && style.sHeight) { |
| var sx = style.sx || 0; |
| var sy = style.sy || 0; |
| ctx.drawImage(image, sx, sy, style.sWidth, style.sHeight, x, y, width, height); |
| } else if (style.sx && style.sy) { |
| var sx = style.sx; |
| var sy = style.sy; |
| var sWidth = width - sx; |
| var sHeight = height - sy; |
| ctx.drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height); |
| } else { |
| ctx.drawImage(image, x, y, width, height); |
| } |
| if (!style.width) { |
| style.width = width; |
| } |
| if (!style.height) { |
| style.height = height; |
| } |
| if (!this.style.width) { |
| this.style.width = width; |
| } |
| if (!this.style.height) { |
| this.style.height = height; |
| } |
| this.drawText(ctx, style, this.style); |
| ctx.restore(); |
| } |
| }, |
| getRect: function (style) { |
| return { |
| x: style.x, |
| y: style.y, |
| width: style.width, |
| height: style.height |
| }; |
| }, |
| clearCache: function () { |
| this._imageCache = {}; |
| } |
| }; |
| require('../tool/util').inherits(ZImage, Base); |
| return ZImage; |
| });define('zrender/loadingEffect/Bar', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/color', |
| '../shape/Rectangle' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrColor = require('../tool/color'); |
| var RectangleShape = require('../shape/Rectangle'); |
| function Bar(options) { |
| Base.call(this, options); |
| } |
| util.inherits(Bar, Base); |
| Bar.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { color: '#888' }, |
| backgroundColor: 'rgba(250, 250, 250, 0.8)', |
| effectOption: { |
| x: 0, |
| y: this.canvasHeight / 2 - 30, |
| width: this.canvasWidth, |
| height: 5, |
| brushType: 'fill', |
| timeInterval: 100 |
| } |
| }); |
| var textShape = this.createTextShape(options.textStyle); |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var effectOption = options.effectOption; |
| var barShape = new RectangleShape({ highlightStyle: util.clone(effectOption) }); |
| barShape.highlightStyle.color = effectOption.color || zrColor.getLinearGradient(effectOption.x, effectOption.y, effectOption.x + effectOption.width, effectOption.y + effectOption.height, [ |
| [ |
| 0, |
| '#ff6400' |
| ], |
| [ |
| 0.5, |
| '#ffe100' |
| ], |
| [ |
| 1, |
| '#b1ff00' |
| ] |
| ]); |
| if (options.progress != null) { |
| addShapeHandle(background); |
| barShape.highlightStyle.width = this.adjust(options.progress, [ |
| 0, |
| 1 |
| ]) * options.effectOption.width; |
| addShapeHandle(barShape); |
| addShapeHandle(textShape); |
| refreshHandle(); |
| return; |
| } else { |
| barShape.highlightStyle.width = 0; |
| return setInterval(function () { |
| addShapeHandle(background); |
| if (barShape.highlightStyle.width < effectOption.width) { |
| barShape.highlightStyle.width += 8; |
| } else { |
| barShape.highlightStyle.width = 0; |
| } |
| addShapeHandle(barShape); |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| } |
| }; |
| return Bar; |
| });define('zrender/loadingEffect/Bubble', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/color', |
| '../shape/Circle' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrColor = require('../tool/color'); |
| var CircleShape = require('../shape/Circle'); |
| function Bubble(options) { |
| Base.call(this, options); |
| } |
| util.inherits(Bubble, Base); |
| Bubble.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { color: '#888' }, |
| backgroundColor: 'rgba(250, 250, 250, 0.8)', |
| effect: { |
| n: 50, |
| lineWidth: 2, |
| brushType: 'stroke', |
| color: 'random', |
| timeInterval: 100 |
| } |
| }); |
| var textShape = this.createTextShape(options.textStyle); |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var effectOption = options.effect; |
| var n = effectOption.n; |
| var brushType = effectOption.brushType; |
| var lineWidth = effectOption.lineWidth; |
| var shapeList = []; |
| var canvasWidth = this.canvasWidth; |
| var canvasHeight = this.canvasHeight; |
| for (var i = 0; i < n; i++) { |
| var color = effectOption.color == 'random' ? zrColor.alpha(zrColor.random(), 0.3) : effectOption.color; |
| shapeList[i] = new CircleShape({ |
| highlightStyle: { |
| x: Math.ceil(Math.random() * canvasWidth), |
| y: Math.ceil(Math.random() * canvasHeight), |
| r: Math.ceil(Math.random() * 40), |
| brushType: brushType, |
| color: color, |
| strokeColor: color, |
| lineWidth: lineWidth |
| }, |
| animationY: Math.ceil(Math.random() * 20) |
| }); |
| } |
| return setInterval(function () { |
| addShapeHandle(background); |
| for (var i = 0; i < n; i++) { |
| var style = shapeList[i].highlightStyle; |
| if (style.y - shapeList[i].animationY + style.r <= 0) { |
| shapeList[i].highlightStyle.y = canvasHeight + style.r; |
| shapeList[i].highlightStyle.x = Math.ceil(Math.random() * canvasWidth); |
| } |
| shapeList[i].highlightStyle.y -= shapeList[i].animationY; |
| addShapeHandle(shapeList[i]); |
| } |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| }; |
| return Bubble; |
| });define('zrender/loadingEffect/DynamicLine', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/color', |
| '../shape/Line' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrColor = require('../tool/color'); |
| var LineShape = require('../shape/Line'); |
| function DynamicLine(options) { |
| Base.call(this, options); |
| } |
| util.inherits(DynamicLine, Base); |
| DynamicLine.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { color: '#fff' }, |
| backgroundColor: 'rgba(0, 0, 0, 0.8)', |
| effectOption: { |
| n: 30, |
| lineWidth: 1, |
| color: 'random', |
| timeInterval: 100 |
| } |
| }); |
| var textShape = this.createTextShape(options.textStyle); |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var effectOption = options.effectOption; |
| var n = effectOption.n; |
| var lineWidth = effectOption.lineWidth; |
| var shapeList = []; |
| var canvasWidth = this.canvasWidth; |
| var canvasHeight = this.canvasHeight; |
| for (var i = 0; i < n; i++) { |
| var xStart = -Math.ceil(Math.random() * 1000); |
| var len = Math.ceil(Math.random() * 400); |
| var pos = Math.ceil(Math.random() * canvasHeight); |
| var color = effectOption.color == 'random' ? zrColor.random() : effectOption.color; |
| shapeList[i] = new LineShape({ |
| highlightStyle: { |
| xStart: xStart, |
| yStart: pos, |
| xEnd: xStart + len, |
| yEnd: pos, |
| strokeColor: color, |
| lineWidth: lineWidth |
| }, |
| animationX: Math.ceil(Math.random() * 100), |
| len: len |
| }); |
| } |
| return setInterval(function () { |
| addShapeHandle(background); |
| for (var i = 0; i < n; i++) { |
| var style = shapeList[i].highlightStyle; |
| if (style.xStart >= canvasWidth) { |
| shapeList[i].len = Math.ceil(Math.random() * 400); |
| style.xStart = -400; |
| style.xEnd = -400 + shapeList[i].len; |
| style.yStart = Math.ceil(Math.random() * canvasHeight); |
| style.yEnd = style.yStart; |
| } |
| style.xStart += shapeList[i].animationX; |
| style.xEnd += shapeList[i].animationX; |
| addShapeHandle(shapeList[i]); |
| } |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| }; |
| return DynamicLine; |
| });define('zrender/loadingEffect/Ring', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/color', |
| '../shape/Ring', |
| '../shape/Sector' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrColor = require('../tool/color'); |
| var RingShape = require('../shape/Ring'); |
| var SectorShape = require('../shape/Sector'); |
| function Ring(options) { |
| Base.call(this, options); |
| } |
| util.inherits(Ring, Base); |
| Ring.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { color: '#07a' }, |
| backgroundColor: 'rgba(250, 250, 250, 0.8)', |
| effect: { |
| x: this.canvasWidth / 2, |
| y: this.canvasHeight / 2, |
| r0: 60, |
| r: 100, |
| color: '#bbdcff', |
| brushType: 'fill', |
| textPosition: 'inside', |
| textFont: 'normal 30px verdana', |
| textColor: 'rgba(30, 144, 255, 0.6)', |
| timeInterval: 100 |
| } |
| }); |
| var effectOption = options.effect; |
| var textStyle = options.textStyle; |
| if (textStyle.x == null) { |
| textStyle.x = effectOption.x; |
| } |
| if (textStyle.y == null) { |
| textStyle.y = effectOption.y + (effectOption.r0 + effectOption.r) / 2 - 5; |
| } |
| var textShape = this.createTextShape(options.textStyle); |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var x = effectOption.x; |
| var y = effectOption.y; |
| var r0 = effectOption.r0 + 6; |
| var r = effectOption.r - 6; |
| var color = effectOption.color; |
| var darkColor = zrColor.lift(color, 0.1); |
| var shapeRing = new RingShape({ highlightStyle: util.clone(effectOption) }); |
| var shapeList = []; |
| var clolrList = zrColor.getGradientColors([ |
| '#ff6400', |
| '#ffe100', |
| '#97ff00' |
| ], 25); |
| var preAngle = 15; |
| var endAngle = 240; |
| for (var i = 0; i < 16; i++) { |
| shapeList.push(new SectorShape({ |
| highlightStyle: { |
| x: x, |
| y: y, |
| r0: r0, |
| r: r, |
| startAngle: endAngle - preAngle, |
| endAngle: endAngle, |
| brushType: 'fill', |
| color: darkColor |
| }, |
| _color: zrColor.getLinearGradient(x + r0 * Math.cos(endAngle, true), y - r0 * Math.sin(endAngle, true), x + r0 * Math.cos(endAngle - preAngle, true), y - r0 * Math.sin(endAngle - preAngle, true), [ |
| [ |
| 0, |
| clolrList[i * 2] |
| ], |
| [ |
| 1, |
| clolrList[i * 2 + 1] |
| ] |
| ]) |
| })); |
| endAngle -= preAngle; |
| } |
| endAngle = 360; |
| for (var i = 0; i < 4; i++) { |
| shapeList.push(new SectorShape({ |
| highlightStyle: { |
| x: x, |
| y: y, |
| r0: r0, |
| r: r, |
| startAngle: endAngle - preAngle, |
| endAngle: endAngle, |
| brushType: 'fill', |
| color: darkColor |
| }, |
| _color: zrColor.getLinearGradient(x + r0 * Math.cos(endAngle, true), y - r0 * Math.sin(endAngle, true), x + r0 * Math.cos(endAngle - preAngle, true), y - r0 * Math.sin(endAngle - preAngle, true), [ |
| [ |
| 0, |
| clolrList[i * 2 + 32] |
| ], |
| [ |
| 1, |
| clolrList[i * 2 + 33] |
| ] |
| ]) |
| })); |
| endAngle -= preAngle; |
| } |
| var n = 0; |
| if (options.progress != null) { |
| addShapeHandle(background); |
| n = this.adjust(options.progress, [ |
| 0, |
| 1 |
| ]).toFixed(2) * 100 / 5; |
| shapeRing.highlightStyle.text = n * 5 + '%'; |
| addShapeHandle(shapeRing); |
| for (var i = 0; i < 20; i++) { |
| shapeList[i].highlightStyle.color = i < n ? shapeList[i]._color : darkColor; |
| addShapeHandle(shapeList[i]); |
| } |
| addShapeHandle(textShape); |
| refreshHandle(); |
| return; |
| } |
| return setInterval(function () { |
| addShapeHandle(background); |
| n += n >= 20 ? -20 : 1; |
| addShapeHandle(shapeRing); |
| for (var i = 0; i < 20; i++) { |
| shapeList[i].highlightStyle.color = i < n ? shapeList[i]._color : darkColor; |
| addShapeHandle(shapeList[i]); |
| } |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| }; |
| return Ring; |
| });define('zrender/loadingEffect/Spin', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/color', |
| '../tool/area', |
| '../shape/Sector' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrColor = require('../tool/color'); |
| var zrArea = require('../tool/area'); |
| var SectorShape = require('../shape/Sector'); |
| function Spin(options) { |
| Base.call(this, options); |
| } |
| util.inherits(Spin, Base); |
| Spin.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { |
| color: '#fff', |
| textAlign: 'start' |
| }, |
| backgroundColor: 'rgba(0, 0, 0, 0.8)' |
| }); |
| var textShape = this.createTextShape(options.textStyle); |
| var textGap = 10; |
| var textWidth = zrArea.getTextWidth(textShape.highlightStyle.text, textShape.highlightStyle.textFont); |
| var textHeight = zrArea.getTextHeight(textShape.highlightStyle.text, textShape.highlightStyle.textFont); |
| var effectOption = util.merge(this.options.effect || {}, { |
| r0: 9, |
| r: 15, |
| n: 18, |
| color: '#fff', |
| timeInterval: 100 |
| }); |
| var location = this.getLocation(this.options.textStyle, textWidth + textGap + effectOption.r * 2, Math.max(effectOption.r * 2, textHeight)); |
| effectOption.x = location.x + effectOption.r; |
| effectOption.y = textShape.highlightStyle.y = location.y + location.height / 2; |
| textShape.highlightStyle.x = effectOption.x + effectOption.r + textGap; |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var n = effectOption.n; |
| var x = effectOption.x; |
| var y = effectOption.y; |
| var r0 = effectOption.r0; |
| var r = effectOption.r; |
| var color = effectOption.color; |
| var shapeList = []; |
| var preAngle = Math.round(180 / n); |
| for (var i = 0; i < n; i++) { |
| shapeList[i] = new SectorShape({ |
| highlightStyle: { |
| x: x, |
| y: y, |
| r0: r0, |
| r: r, |
| startAngle: preAngle * i * 2, |
| endAngle: preAngle * i * 2 + preAngle, |
| color: zrColor.alpha(color, (i + 1) / n), |
| brushType: 'fill' |
| } |
| }); |
| } |
| var pos = [ |
| 0, |
| x, |
| y |
| ]; |
| return setInterval(function () { |
| addShapeHandle(background); |
| pos[0] -= 0.3; |
| for (var i = 0; i < n; i++) { |
| shapeList[i].rotation = pos; |
| addShapeHandle(shapeList[i]); |
| } |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| }; |
| return Spin; |
| });define('zrender/loadingEffect/Whirling', [ |
| 'require', |
| './Base', |
| '../tool/util', |
| '../tool/area', |
| '../shape/Ring', |
| '../shape/Droplet', |
| '../shape/Circle' |
| ], function (require) { |
| var Base = require('./Base'); |
| var util = require('../tool/util'); |
| var zrArea = require('../tool/area'); |
| var RingShape = require('../shape/Ring'); |
| var DropletShape = require('../shape/Droplet'); |
| var CircleShape = require('../shape/Circle'); |
| function Whirling(options) { |
| Base.call(this, options); |
| } |
| util.inherits(Whirling, Base); |
| Whirling.prototype._start = function (addShapeHandle, refreshHandle) { |
| var options = util.merge(this.options, { |
| textStyle: { |
| color: '#888', |
| textAlign: 'start' |
| }, |
| backgroundColor: 'rgba(250, 250, 250, 0.8)' |
| }); |
| var textShape = this.createTextShape(options.textStyle); |
| var textGap = 10; |
| var textWidth = zrArea.getTextWidth(textShape.highlightStyle.text, textShape.highlightStyle.textFont); |
| var textHeight = zrArea.getTextHeight(textShape.highlightStyle.text, textShape.highlightStyle.textFont); |
| var effectOption = util.merge(this.options.effect || {}, { |
| r: 18, |
| colorIn: '#fff', |
| colorOut: '#555', |
| colorWhirl: '#6cf', |
| timeInterval: 50 |
| }); |
| var location = this.getLocation(this.options.textStyle, textWidth + textGap + effectOption.r * 2, Math.max(effectOption.r * 2, textHeight)); |
| effectOption.x = location.x + effectOption.r; |
| effectOption.y = textShape.highlightStyle.y = location.y + location.height / 2; |
| textShape.highlightStyle.x = effectOption.x + effectOption.r + textGap; |
| var background = this.createBackgroundShape(options.backgroundColor); |
| var droplet = new DropletShape({ |
| highlightStyle: { |
| a: Math.round(effectOption.r / 2), |
| b: Math.round(effectOption.r - effectOption.r / 6), |
| brushType: 'fill', |
| color: effectOption.colorWhirl |
| } |
| }); |
| var circleIn = new CircleShape({ |
| highlightStyle: { |
| r: Math.round(effectOption.r / 6), |
| brushType: 'fill', |
| color: effectOption.colorIn |
| } |
| }); |
| var circleOut = new RingShape({ |
| highlightStyle: { |
| r0: Math.round(effectOption.r - effectOption.r / 3), |
| r: effectOption.r, |
| brushType: 'fill', |
| color: effectOption.colorOut |
| } |
| }); |
| var pos = [ |
| 0, |
| effectOption.x, |
| effectOption.y |
| ]; |
| droplet.highlightStyle.x = circleIn.highlightStyle.x = circleOut.highlightStyle.x = pos[1]; |
| droplet.highlightStyle.y = circleIn.highlightStyle.y = circleOut.highlightStyle.y = pos[2]; |
| return setInterval(function () { |
| addShapeHandle(background); |
| addShapeHandle(circleOut); |
| pos[0] -= 0.3; |
| droplet.rotation = pos; |
| addShapeHandle(droplet); |
| addShapeHandle(circleIn); |
| addShapeHandle(textShape); |
| refreshHandle(); |
| }, effectOption.timeInterval); |
| }; |
| return Whirling; |
| });define('echarts/theme/macarons', [], function () { |
| var theme = { |
| color: [ |
| '#2ec7c9', |
| '#b6a2de', |
| '#5ab1ef', |
| '#ffb980', |
| '#d87a80', |
| '#8d98b3', |
| '#e5cf0d', |
| '#97b552', |
| '#95706d', |
| '#dc69aa', |
| '#07a2a4', |
| '#9a7fd1', |
| '#588dd5', |
| '#f5994e', |
| '#c05050', |
| '#59678c', |
| '#c9ab00', |
| '#7eb00a', |
| '#6f5553', |
| '#c14089' |
| ], |
| title: { |
| textStyle: { |
| fontWeight: 'normal', |
| color: '#008acd' |
| } |
| }, |
| dataRange: { |
| itemWidth: 15, |
| color: [ |
| '#5ab1ef', |
| '#e0ffff' |
| ] |
| }, |
| toolbox: { |
| color: [ |
| '#1e90ff', |
| '#1e90ff', |
| '#1e90ff', |
| '#1e90ff' |
| ], |
| effectiveColor: '#ff4500' |
| }, |
| tooltip: { |
| backgroundColor: 'rgba(50,50,50,0.5)', |
| axisPointer: { |
| type: 'line', |
| lineStyle: { color: '#008acd' }, |
| crossStyle: { color: '#008acd' }, |
| shadowStyle: { color: 'rgba(200,200,200,0.2)' } |
| } |
| }, |
| dataZoom: { |
| dataBackgroundColor: '#efefff', |
| fillerColor: 'rgba(182,162,222,0.2)', |
| handleColor: '#008acd' |
| }, |
| grid: { borderColor: '#eee' }, |
| categoryAxis: { |
| axisLine: { lineStyle: { color: '#008acd' } }, |
| splitLine: { lineStyle: { color: ['#eee'] } } |
| }, |
| valueAxis: { |
| axisLine: { lineStyle: { color: '#008acd' } }, |
| splitArea: { |
| show: true, |
| areaStyle: { |
| color: [ |
| 'rgba(250,250,250,0.1)', |
| 'rgba(200,200,200,0.1)' |
| ] |
| } |
| }, |
| splitLine: { lineStyle: { color: ['#eee'] } } |
| }, |
| polar: { |
| axisLine: { lineStyle: { color: '#ddd' } }, |
| splitArea: { |
| show: true, |
| areaStyle: { |
| color: [ |
| 'rgba(250,250,250,0.2)', |
| 'rgba(200,200,200,0.2)' |
| ] |
| } |
| }, |
| splitLine: { lineStyle: { color: '#ddd' } } |
| }, |
| timeline: { |
| lineStyle: { color: '#008acd' }, |
| controlStyle: { |
| normal: { color: '#008acd' }, |
| emphasis: { color: '#008acd' } |
| }, |
| symbol: 'emptyCircle', |
| symbolSize: 3 |
| }, |
| bar: { |
| itemStyle: { |
| normal: { barBorderRadius: 5 }, |
| emphasis: { barBorderRadius: 5 } |
| } |
| }, |
| line: { |
| smooth: true, |
| symbol: 'emptyCircle', |
| symbolSize: 3 |
| }, |
| k: { |
| itemStyle: { |
| normal: { |
| color: '#d87a80', |
| color0: '#2ec7c9', |
| lineStyle: { |
| color: '#d87a80', |
| color0: '#2ec7c9' |
| } |
| } |
| } |
| }, |
| scatter: { |
| symbol: 'circle', |
| symbolSize: 4 |
| }, |
| radar: { |
| symbol: 'emptyCircle', |
| symbolSize: 3 |
| }, |
| map: { |
| itemStyle: { |
| normal: { |
| areaStyle: { color: '#ddd' }, |
| label: { textStyle: { color: '#d87a80' } } |
| }, |
| emphasis: { areaStyle: { color: '#fe994e' } } |
| } |
| }, |
| force: { itemStyle: { normal: { linkStyle: { color: '#1e90ff' } } } }, |
| chord: { |
| itemStyle: { |
| normal: { |
| borderWidth: 1, |
| borderColor: 'rgba(128, 128, 128, 0.5)', |
| chordStyle: { lineStyle: { color: 'rgba(128, 128, 128, 0.5)' } } |
| }, |
| emphasis: { |
| borderWidth: 1, |
| borderColor: 'rgba(128, 128, 128, 0.5)', |
| chordStyle: { lineStyle: { color: 'rgba(128, 128, 128, 0.5)' } } |
| } |
| } |
| }, |
| gauge: { |
| axisLine: { |
| lineStyle: { |
| color: [ |
| [ |
| 0.2, |
| '#2ec7c9' |
| ], |
| [ |
| 0.8, |
| '#5ab1ef' |
| ], |
| [ |
| 1, |
| '#d87a80' |
| ] |
| ], |
| width: 10 |
| } |
| }, |
| axisTick: { |
| splitNumber: 10, |
| length: 15, |
| lineStyle: { color: 'auto' } |
| }, |
| splitLine: { |
| length: 22, |
| lineStyle: { color: 'auto' } |
| }, |
| pointer: { width: 5 } |
| }, |
| textStyle: { fontFamily: '微软雅黑, Arial, Verdana, sans-serif' } |
| }; |
| return theme; |
| });define('echarts/theme/infographic', [], function () { |
| var theme = { |
| color: [ |
| '#C1232B', |
| '#B5C334', |
| '#FCCE10', |
| '#E87C25', |
| '#27727B', |
| '#FE8463', |
| '#9BCA63', |
| '#FAD860', |
| '#F3A43B', |
| '#60C0DD', |
| '#D7504B', |
| '#C6E579', |
| '#F4E001', |
| '#F0805A', |
| '#26C0C0' |
| ], |
| title: { |
| textStyle: { |
| fontWeight: 'normal', |
| color: '#27727B' |
| } |
| }, |
| dataRange: { |
| x: 'right', |
| y: 'center', |
| itemWidth: 5, |
| itemHeight: 25, |
| color: [ |
| '#C1232B', |
| '#FCCE10' |
| ] |
| }, |
| toolbox: { |
| color: [ |
| '#C1232B', |
| '#B5C334', |
| '#FCCE10', |
| '#E87C25', |
| '#27727B', |
| '#FE8463', |
| '#9BCA63', |
| '#FAD860', |
| '#F3A43B', |
| '#60C0DD' |
| ], |
| effectiveColor: '#ff4500' |
| }, |
| tooltip: { |
| backgroundColor: 'rgba(50,50,50,0.5)', |
| axisPointer: { |
| type: 'line', |
| lineStyle: { |
| color: '#27727B', |
| type: 'dashed' |
| }, |
| crossStyle: { color: '#27727B' }, |
| shadowStyle: { color: 'rgba(200,200,200,0.3)' } |
| } |
| }, |
| dataZoom: { |
| dataBackgroundColor: 'rgba(181,195,52,0.3)', |
| fillerColor: 'rgba(181,195,52,0.2)', |
| handleColor: '#27727B' |
| }, |
| grid: { borderWidth: 0 }, |
| categoryAxis: { |
| axisLine: { lineStyle: { color: '#27727B' } }, |
| splitLine: { show: false } |
| }, |
| valueAxis: { |
| axisLine: { show: false }, |
| splitArea: { show: false }, |
| splitLine: { |
| lineStyle: { |
| color: ['#ccc'], |
| type: 'dashed' |
| } |
| } |
| }, |
| polar: { |
| axisLine: { lineStyle: { color: '#ddd' } }, |
| splitArea: { |
| show: true, |
| areaStyle: { |
| color: [ |
| 'rgba(250,250,250,0.2)', |
| 'rgba(200,200,200,0.2)' |
| ] |
| } |
| }, |
| splitLine: { lineStyle: { color: '#ddd' } } |
| }, |
| timeline: { |
| lineStyle: { color: '#27727B' }, |
| controlStyle: { |
| normal: { color: '#27727B' }, |
| emphasis: { color: '#27727B' } |
| }, |
| symbol: 'emptyCircle', |
| symbolSize: 3 |
| }, |
| line: { |
| itemStyle: { |
| normal: { |
| borderWidth: 2, |
| borderColor: '#fff', |
| lineStyle: { width: 3 } |
| }, |
| emphasis: { borderWidth: 0 } |
| }, |
| symbol: 'circle', |
| symbolSize: 3.5 |
| }, |
| k: { |
| itemStyle: { |
| normal: { |
| color: '#C1232B', |
| color0: '#B5C334', |
| lineStyle: { |
| width: 1, |
| color: '#C1232B', |
| color0: '#B5C334' |
| } |
| } |
| } |
| }, |
| scatter: { |
| itemStyle: { |
| normal: { |
| borderWidth: 1, |
| borderColor: 'rgba(200,200,200,0.5)' |
| }, |
| emphasis: { borderWidth: 0 } |
| }, |
| symbol: 'star4', |
| symbolSize: 4 |
| }, |
| radar: { |
| symbol: 'emptyCircle', |
| symbolSize: 3 |
| }, |
| map: { |
| itemStyle: { |
| normal: { |
| areaStyle: { color: '#ddd' }, |
| label: { textStyle: { color: '#C1232B' } } |
| }, |
| emphasis: { |
| areaStyle: { color: '#fe994e' }, |
| label: { textStyle: { color: 'rgb(100,0,0)' } } |
| } |
| } |
| }, |
| force: { itemStyle: { normal: { linkStyle: { color: '#27727B' } } } }, |
| chord: { |
| itemStyle: { |
| normal: { |
| borderWidth: 1, |
| borderColor: 'rgba(128, 128, 128, 0.5)', |
| chordStyle: { lineStyle: { color: 'rgba(128, 128, 128, 0.5)' } } |
| }, |
| emphasis: { |
| borderWidth: 1, |
| borderColor: 'rgba(128, 128, 128, 0.5)', |
| chordStyle: { lineStyle: { color: 'rgba(128, 128, 128, 0.5)' } } |
| } |
| } |
| }, |
| gauge: { |
| center: [ |
| '50%', |
| '80%' |
| ], |
| radius: '100%', |
| startAngle: 180, |
| endAngle: 0, |
| axisLine: { |
| show: true, |
| lineStyle: { |
| color: [ |
| [ |
| 0.2, |
| '#B5C334' |
| ], |
| [ |
| 0.8, |
| '#27727B' |
| ], |
| [ |
| 1, |
| '#C1232B' |
| ] |
| ], |
| width: '40%' |
| } |
| }, |
| axisTick: { |
| splitNumber: 2, |
| length: 5, |
| lineStyle: { color: '#fff' } |
| }, |
| axisLabel: { |
| textStyle: { |
| color: '#fff', |
| fontWeight: 'bolder' |
| } |
| }, |
| splitLine: { |
| length: '5%', |
| lineStyle: { color: '#fff' } |
| }, |
| pointer: { |
| width: '40%', |
| length: '80%', |
| color: '#fff' |
| }, |
| title: { |
| offsetCenter: [ |
| 0, |
| -20 |
| ], |
| textStyle: { |
| color: 'auto', |
| fontSize: 20 |
| } |
| }, |
| detail: { |
| offsetCenter: [ |
| 0, |
| 0 |
| ], |
| textStyle: { |
| color: 'auto', |
| fontSize: 40 |
| } |
| } |
| }, |
| textStyle: { fontFamily: '微软雅黑, Arial, Verdana, sans-serif' } |
| }; |
| return theme; |
| });define('zrender/dep/excanvas', ['require'], function (require) { |
| if (!document.createElement('canvas').getContext) { |
| (function () { |
| var m = Math; |
| var mr = m.round; |
| var ms = m.sin; |
| var mc = m.cos; |
| var abs = m.abs; |
| var sqrt = m.sqrt; |
| var Z = 10; |
| var Z2 = Z / 2; |
| var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1]; |
| function getContext() { |
| return this.context_ || (this.context_ = new CanvasRenderingContext2D_(this)); |
| } |
| var slice = Array.prototype.slice; |
| function bind(f, obj, var_args) { |
| var a = slice.call(arguments, 2); |
| return function () { |
| return f.apply(obj, a.concat(slice.call(arguments))); |
| }; |
| } |
| function encodeHtmlAttribute(s) { |
| return String(s).replace(/&/g, '&').replace(/"/g, '"'); |
| } |
| function addNamespace(doc, prefix, urn) { |
| if (!doc.namespaces[prefix]) { |
| doc.namespaces.add(prefix, urn, '#default#VML'); |
| } |
| } |
| function addNamespacesAndStylesheet(doc) { |
| addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml'); |
| addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office'); |
| if (!doc.styleSheets['ex_canvas_']) { |
| var ss = doc.createStyleSheet(); |
| ss.owningElement.id = 'ex_canvas_'; |
| ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + 'text-align:left;width:300px;height:150px}'; |
| } |
| } |
| addNamespacesAndStylesheet(document); |
| var G_vmlCanvasManager_ = { |
| init: function (opt_doc) { |
| var doc = opt_doc || document; |
| doc.createElement('canvas'); |
| doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); |
| }, |
| init_: function (doc) { |
| var els = doc.getElementsByTagName('canvas'); |
| for (var i = 0; i < els.length; i++) { |
| this.initElement(els[i]); |
| } |
| }, |
| initElement: function (el) { |
| if (!el.getContext) { |
| el.getContext = getContext; |
| addNamespacesAndStylesheet(el.ownerDocument); |
| el.innerHTML = ''; |
| el.attachEvent('onpropertychange', onPropertyChange); |
| el.attachEvent('onresize', onResize); |
| var attrs = el.attributes; |
| if (attrs.width && attrs.width.specified) { |
| el.style.width = attrs.width.nodeValue + 'px'; |
| } else { |
| el.width = el.clientWidth; |
| } |
| if (attrs.height && attrs.height.specified) { |
| el.style.height = attrs.height.nodeValue + 'px'; |
| } else { |
| el.height = el.clientHeight; |
| } |
| } |
| return el; |
| } |
| }; |
| function onPropertyChange(e) { |
| var el = e.srcElement; |
| switch (e.propertyName) { |
| case 'width': |
| el.getContext().clearRect(); |
| el.style.width = el.attributes.width.nodeValue + 'px'; |
| el.firstChild.style.width = el.clientWidth + 'px'; |
| break; |
| case 'height': |
| el.getContext().clearRect(); |
| el.style.height = el.attributes.height.nodeValue + 'px'; |
| el.firstChild.style.height = el.clientHeight + 'px'; |
| break; |
| } |
| } |
| function onResize(e) { |
| var el = e.srcElement; |
| if (el.firstChild) { |
| el.firstChild.style.width = el.clientWidth + 'px'; |
| el.firstChild.style.height = el.clientHeight + 'px'; |
| } |
| } |
| G_vmlCanvasManager_.init(); |
| var decToHex = []; |
| for (var i = 0; i < 16; i++) { |
| for (var j = 0; j < 16; j++) { |
| decToHex[i * 16 + j] = i.toString(16) + j.toString(16); |
| } |
| } |
| function createMatrixIdentity() { |
| return [ |
| [ |
| 1, |
| 0, |
| 0 |
| ], |
| [ |
| 0, |
| 1, |
| 0 |
| ], |
| [ |
| 0, |
| 0, |
| 1 |
| ] |
| ]; |
| } |
| function matrixMultiply(m1, m2) { |
| var result = createMatrixIdentity(); |
| for (var x = 0; x < 3; x++) { |
| for (var y = 0; y < 3; y++) { |
| var sum = 0; |
| for (var z = 0; z < 3; z++) { |
| sum += m1[x][z] * m2[z][y]; |
| } |
| result[x][y] = sum; |
| } |
| } |
| return result; |
| } |
| function copyState(o1, o2) { |
| o2.fillStyle = o1.fillStyle; |
| o2.lineCap = o1.lineCap; |
| o2.lineJoin = o1.lineJoin; |
| o2.lineWidth = o1.lineWidth; |
| o2.miterLimit = o1.miterLimit; |
| o2.shadowBlur = o1.shadowBlur; |
| o2.shadowColor = o1.shadowColor; |
| o2.shadowOffsetX = o1.shadowOffsetX; |
| o2.shadowOffsetY = o1.shadowOffsetY; |
| o2.strokeStyle = o1.strokeStyle; |
| o2.globalAlpha = o1.globalAlpha; |
| o2.font = o1.font; |
| o2.textAlign = o1.textAlign; |
| o2.textBaseline = o1.textBaseline; |
| o2.scaleX_ = o1.scaleX_; |
| o2.scaleY_ = o1.scaleY_; |
| o2.lineScale_ = o1.lineScale_; |
| } |
| var colorData = { |
| aliceblue: '#F0F8FF', |
| antiquewhite: '#FAEBD7', |
| aquamarine: '#7FFFD4', |
| azure: '#F0FFFF', |
| beige: '#F5F5DC', |
| bisque: '#FFE4C4', |
| black: '#000000', |
| blanchedalmond: '#FFEBCD', |
| blueviolet: '#8A2BE2', |
| brown: '#A52A2A', |
| burlywood: '#DEB887', |
| cadetblue: '#5F9EA0', |
| chartreuse: '#7FFF00', |
| chocolate: '#D2691E', |
| coral: '#FF7F50', |
| cornflowerblue: '#6495ED', |
| cornsilk: '#FFF8DC', |
| crimson: '#DC143C', |
| cyan: '#00FFFF', |
| darkblue: '#00008B', |
| darkcyan: '#008B8B', |
| darkgoldenrod: '#B8860B', |
| darkgray: '#A9A9A9', |
| darkgreen: '#006400', |
| darkgrey: '#A9A9A9', |
| darkkhaki: '#BDB76B', |
| darkmagenta: '#8B008B', |
| darkolivegreen: '#556B2F', |
| darkorange: '#FF8C00', |
| darkorchid: '#9932CC', |
| darkred: '#8B0000', |
| darksalmon: '#E9967A', |
| darkseagreen: '#8FBC8F', |
| darkslateblue: '#483D8B', |
| darkslategray: '#2F4F4F', |
| darkslategrey: '#2F4F4F', |
| darkturquoise: '#00CED1', |
| darkviolet: '#9400D3', |
| deeppink: '#FF1493', |
| deepskyblue: '#00BFFF', |
| dimgray: '#696969', |
| dimgrey: '#696969', |
| dodgerblue: '#1E90FF', |
| firebrick: '#B22222', |
| floralwhite: '#FFFAF0', |
| forestgreen: '#228B22', |
| gainsboro: '#DCDCDC', |
| ghostwhite: '#F8F8FF', |
| gold: '#FFD700', |
| goldenrod: '#DAA520', |
| grey: '#808080', |
| greenyellow: '#ADFF2F', |
| honeydew: '#F0FFF0', |
| hotpink: '#FF69B4', |
| indianred: '#CD5C5C', |
| indigo: '#4B0082', |
| ivory: '#FFFFF0', |
| khaki: '#F0E68C', |
| lavender: '#E6E6FA', |
| lavenderblush: '#FFF0F5', |
| lawngreen: '#7CFC00', |
| lemonchiffon: '#FFFACD', |
| lightblue: '#ADD8E6', |
| lightcoral: '#F08080', |
| lightcyan: '#E0FFFF', |
| lightgoldenrodyellow: '#FAFAD2', |
| lightgreen: '#90EE90', |
| lightgrey: '#D3D3D3', |
| lightpink: '#FFB6C1', |
| lightsalmon: '#FFA07A', |
| lightseagreen: '#20B2AA', |
| lightskyblue: '#87CEFA', |
| lightslategray: '#778899', |
| lightslategrey: '#778899', |
| lightsteelblue: '#B0C4DE', |
| lightyellow: '#FFFFE0', |
| limegreen: '#32CD32', |
| linen: '#FAF0E6', |
| magenta: '#FF00FF', |
| mediumaquamarine: '#66CDAA', |
| mediumblue: '#0000CD', |
| mediumorchid: '#BA55D3', |
| mediumpurple: '#9370DB', |
| mediumseagreen: '#3CB371', |
| mediumslateblue: '#7B68EE', |
| mediumspringgreen: '#00FA9A', |
| mediumturquoise: '#48D1CC', |
| mediumvioletred: '#C71585', |
| midnightblue: '#191970', |
| mintcream: '#F5FFFA', |
| mistyrose: '#FFE4E1', |
| moccasin: '#FFE4B5', |
| navajowhite: '#FFDEAD', |
| oldlace: '#FDF5E6', |
| olivedrab: '#6B8E23', |
| orange: '#FFA500', |
| orangered: '#FF4500', |
| orchid: '#DA70D6', |
| palegoldenrod: '#EEE8AA', |
| palegreen: '#98FB98', |
| paleturquoise: '#AFEEEE', |
| palevioletred: '#DB7093', |
| papayawhip: '#FFEFD5', |
| peachpuff: '#FFDAB9', |
| peru: '#CD853F', |
| pink: '#FFC0CB', |
| plum: '#DDA0DD', |
| powderblue: '#B0E0E6', |
| rosybrown: '#BC8F8F', |
| royalblue: '#4169E1', |
| saddlebrown: '#8B4513', |
| salmon: '#FA8072', |
| sandybrown: '#F4A460', |
| seagreen: '#2E8B57', |
| seashell: '#FFF5EE', |
| sienna: '#A0522D', |
| skyblue: '#87CEEB', |
| slateblue: '#6A5ACD', |
| slategray: '#708090', |
| slategrey: '#708090', |
| snow: '#FFFAFA', |
| springgreen: '#00FF7F', |
| steelblue: '#4682B4', |
| tan: '#D2B48C', |
| thistle: '#D8BFD8', |
| tomato: '#FF6347', |
| turquoise: '#40E0D0', |
| violet: '#EE82EE', |
| wheat: '#F5DEB3', |
| whitesmoke: '#F5F5F5', |
| yellowgreen: '#9ACD32' |
| }; |
| function getRgbHslContent(styleString) { |
| var start = styleString.indexOf('(', 3); |
| var end = styleString.indexOf(')', start + 1); |
| var parts = styleString.substring(start + 1, end).split(','); |
| if (parts.length != 4 || styleString.charAt(3) != 'a') { |
| parts[3] = 1; |
| } |
| return parts; |
| } |
| function percent(s) { |
| return parseFloat(s) / 100; |
| } |
| function clamp(v, min, max) { |
| return Math.min(max, Math.max(min, v)); |
| } |
| function hslToRgb(parts) { |
| var r, g, b, h, s, l; |
| h = parseFloat(parts[0]) / 360 % 360; |
| if (h < 0) |
| h++; |
| s = clamp(percent(parts[1]), 0, 1); |
| l = clamp(percent(parts[2]), 0, 1); |
| if (s == 0) { |
| r = g = b = l; |
| } else { |
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; |
| var p = 2 * l - q; |
| r = hueToRgb(p, q, h + 1 / 3); |
| g = hueToRgb(p, q, h); |
| b = hueToRgb(p, q, h - 1 / 3); |
| } |
| return '#' + decToHex[Math.floor(r * 255)] + decToHex[Math.floor(g * 255)] + decToHex[Math.floor(b * 255)]; |
| } |
| function hueToRgb(m1, m2, h) { |
| if (h < 0) |
| h++; |
| if (h > 1) |
| h--; |
| if (6 * h < 1) |
| return m1 + (m2 - m1) * 6 * h; |
| else if (2 * h < 1) |
| return m2; |
| else if (3 * h < 2) |
| return m1 + (m2 - m1) * (2 / 3 - h) * 6; |
| else |
| return m1; |
| } |
| var processStyleCache = {}; |
| function processStyle(styleString) { |
| if (styleString in processStyleCache) { |
| return processStyleCache[styleString]; |
| } |
| var str, alpha = 1; |
| styleString = String(styleString); |
| if (styleString.charAt(0) == '#') { |
| str = styleString; |
| } else if (/^rgb/.test(styleString)) { |
| var parts = getRgbHslContent(styleString); |
| var str = '#', n; |
| for (var i = 0; i < 3; i++) { |
| if (parts[i].indexOf('%') != -1) { |
| n = Math.floor(percent(parts[i]) * 255); |
| } else { |
| n = +parts[i]; |
| } |
| str += decToHex[clamp(n, 0, 255)]; |
| } |
| alpha = +parts[3]; |
| } else if (/^hsl/.test(styleString)) { |
| var parts = getRgbHslContent(styleString); |
| str = hslToRgb(parts); |
| alpha = parts[3]; |
| } else { |
| str = colorData[styleString] || styleString; |
| } |
| return processStyleCache[styleString] = { |
| color: str, |
| alpha: alpha |
| }; |
| } |
| var DEFAULT_STYLE = { |
| style: 'normal', |
| variant: 'normal', |
| weight: 'normal', |
| size: 12, |
| family: '微软雅黑' |
| }; |
| var fontStyleCache = {}; |
| function processFontStyle(styleString) { |
| if (fontStyleCache[styleString]) { |
| return fontStyleCache[styleString]; |
| } |
| var el = document.createElement('div'); |
| var style = el.style; |
| var fontFamily; |
| try { |
| style.font = styleString; |
| fontFamily = style.fontFamily.split(',')[0]; |
| } catch (ex) { |
| } |
| return fontStyleCache[styleString] = { |
| style: style.fontStyle || DEFAULT_STYLE.style, |
| variant: style.fontVariant || DEFAULT_STYLE.variant, |
| weight: style.fontWeight || DEFAULT_STYLE.weight, |
| size: style.fontSize || DEFAULT_STYLE.size, |
| family: fontFamily || DEFAULT_STYLE.family |
| }; |
| } |
| function getComputedStyle(style, element) { |
| var computedStyle = {}; |
| for (var p in style) { |
| computedStyle[p] = style[p]; |
| } |
| var canvasFontSize = parseFloat(element.currentStyle.fontSize), fontSize = parseFloat(style.size); |
| if (typeof style.size == 'number') { |
| computedStyle.size = style.size; |
| } else if (style.size.indexOf('px') != -1) { |
| computedStyle.size = fontSize; |
| } else if (style.size.indexOf('em') != -1) { |
| computedStyle.size = canvasFontSize * fontSize; |
| } else if (style.size.indexOf('%') != -1) { |
| computedStyle.size = canvasFontSize / 100 * fontSize; |
| } else if (style.size.indexOf('pt') != -1) { |
| computedStyle.size = fontSize / 0.75; |
| } else { |
| computedStyle.size = canvasFontSize; |
| } |
| return computedStyle; |
| } |
| function buildStyle(style) { |
| return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + style.size + 'px \'' + style.family + '\''; |
| } |
| var lineCapMap = { |
| 'butt': 'flat', |
| 'round': 'round' |
| }; |
| function processLineCap(lineCap) { |
| return lineCapMap[lineCap] || 'square'; |
| } |
| function CanvasRenderingContext2D_(canvasElement) { |
| this.m_ = createMatrixIdentity(); |
| this.mStack_ = []; |
| this.aStack_ = []; |
| this.currentPath_ = []; |
| this.strokeStyle = '#000'; |
| this.fillStyle = '#000'; |
| this.lineWidth = 1; |
| this.lineJoin = 'miter'; |
| this.lineCap = 'butt'; |
| this.miterLimit = Z * 1; |
| this.globalAlpha = 1; |
| this.font = '12px 微软雅黑'; |
| this.textAlign = 'left'; |
| this.textBaseline = 'alphabetic'; |
| this.canvas = canvasElement; |
| var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' + canvasElement.clientHeight + 'px;overflow:hidden;position:absolute'; |
| var el = canvasElement.ownerDocument.createElement('div'); |
| el.style.cssText = cssText; |
| canvasElement.appendChild(el); |
| var overlayEl = el.cloneNode(false); |
| overlayEl.style.backgroundColor = '#fff'; |
| overlayEl.style.filter = 'alpha(opacity=0)'; |
| canvasElement.appendChild(overlayEl); |
| this.element_ = el; |
| this.scaleX_ = 1; |
| this.scaleY_ = 1; |
| this.lineScale_ = 1; |
| } |
| var contextPrototype = CanvasRenderingContext2D_.prototype; |
| contextPrototype.clearRect = function () { |
| if (this.textMeasureEl_) { |
| this.textMeasureEl_.removeNode(true); |
| this.textMeasureEl_ = null; |
| } |
| this.element_.innerHTML = ''; |
| }; |
| contextPrototype.beginPath = function () { |
| this.currentPath_ = []; |
| }; |
| contextPrototype.moveTo = function (aX, aY) { |
| var p = getCoords(this, aX, aY); |
| this.currentPath_.push({ |
| type: 'moveTo', |
| x: p.x, |
| y: p.y |
| }); |
| this.currentX_ = p.x; |
| this.currentY_ = p.y; |
| }; |
| contextPrototype.lineTo = function (aX, aY) { |
| var p = getCoords(this, aX, aY); |
| this.currentPath_.push({ |
| type: 'lineTo', |
| x: p.x, |
| y: p.y |
| }); |
| this.currentX_ = p.x; |
| this.currentY_ = p.y; |
| }; |
| contextPrototype.bezierCurveTo = function (aCP1x, aCP1y, aCP2x, aCP2y, aX, aY) { |
| var p = getCoords(this, aX, aY); |
| var cp1 = getCoords(this, aCP1x, aCP1y); |
| var cp2 = getCoords(this, aCP2x, aCP2y); |
| bezierCurveTo(this, cp1, cp2, p); |
| }; |
| function bezierCurveTo(self, cp1, cp2, p) { |
| self.currentPath_.push({ |
| type: 'bezierCurveTo', |
| cp1x: cp1.x, |
| cp1y: cp1.y, |
| cp2x: cp2.x, |
| cp2y: cp2.y, |
| x: p.x, |
| y: p.y |
| }); |
| self.currentX_ = p.x; |
| self.currentY_ = p.y; |
| } |
| contextPrototype.quadraticCurveTo = function (aCPx, aCPy, aX, aY) { |
| var cp = getCoords(this, aCPx, aCPy); |
| var p = getCoords(this, aX, aY); |
| var cp1 = { |
| x: this.currentX_ + 2 / 3 * (cp.x - this.currentX_), |
| y: this.currentY_ + 2 / 3 * (cp.y - this.currentY_) |
| }; |
| var cp2 = { |
| x: cp1.x + (p.x - this.currentX_) / 3, |
| y: cp1.y + (p.y - this.currentY_) / 3 |
| }; |
| bezierCurveTo(this, cp1, cp2, p); |
| }; |
| contextPrototype.arc = function (aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { |
| aRadius *= Z; |
| var arcType = aClockwise ? 'at' : 'wa'; |
| var xStart = aX + mc(aStartAngle) * aRadius - Z2; |
| var yStart = aY + ms(aStartAngle) * aRadius - Z2; |
| var xEnd = aX + mc(aEndAngle) * aRadius - Z2; |
| var yEnd = aY + ms(aEndAngle) * aRadius - Z2; |
| if (xStart == xEnd && !aClockwise) { |
| xStart += 0.125; |
| } |
| var p = getCoords(this, aX, aY); |
| var pStart = getCoords(this, xStart, yStart); |
| var pEnd = getCoords(this, xEnd, yEnd); |
| this.currentPath_.push({ |
| type: arcType, |
| x: p.x, |
| y: p.y, |
| radius: aRadius, |
| xStart: pStart.x, |
| yStart: pStart.y, |
| xEnd: pEnd.x, |
| yEnd: pEnd.y |
| }); |
| }; |
| contextPrototype.rect = function (aX, aY, aWidth, aHeight) { |
| this.moveTo(aX, aY); |
| this.lineTo(aX + aWidth, aY); |
| this.lineTo(aX + aWidth, aY + aHeight); |
| this.lineTo(aX, aY + aHeight); |
| this.closePath(); |
| }; |
| contextPrototype.strokeRect = function (aX, aY, aWidth, aHeight) { |
| var oldPath = this.currentPath_; |
| this.beginPath(); |
| this.moveTo(aX, aY); |
| this.lineTo(aX + aWidth, aY); |
| this.lineTo(aX + aWidth, aY + aHeight); |
| this.lineTo(aX, aY + aHeight); |
| this.closePath(); |
| this.stroke(); |
| this.currentPath_ = oldPath; |
| }; |
| contextPrototype.fillRect = function (aX, aY, aWidth, aHeight) { |
| var oldPath = this.currentPath_; |
| this.beginPath(); |
| this.moveTo(aX, aY); |
| this.lineTo(aX + aWidth, aY); |
| this.lineTo(aX + aWidth, aY + aHeight); |
| this.lineTo(aX, aY + aHeight); |
| this.closePath(); |
| this.fill(); |
| this.currentPath_ = oldPath; |
| }; |
| contextPrototype.createLinearGradient = function (aX0, aY0, aX1, aY1) { |
| var gradient = new CanvasGradient_('gradient'); |
| gradient.x0_ = aX0; |
| gradient.y0_ = aY0; |
| gradient.x1_ = aX1; |
| gradient.y1_ = aY1; |
| return gradient; |
| }; |
| contextPrototype.createRadialGradient = function (aX0, aY0, aR0, aX1, aY1, aR1) { |
| var gradient = new CanvasGradient_('gradientradial'); |
| gradient.x0_ = aX0; |
| gradient.y0_ = aY0; |
| gradient.r0_ = aR0; |
| gradient.x1_ = aX1; |
| gradient.y1_ = aY1; |
| gradient.r1_ = aR1; |
| return gradient; |
| }; |
| contextPrototype.drawImage = function (image, var_args) { |
| var dx, dy, dw, dh, sx, sy, sw, sh; |
| var oldRuntimeWidth = image.runtimeStyle.width; |
| var oldRuntimeHeight = image.runtimeStyle.height; |
| image.runtimeStyle.width = 'auto'; |
| image.runtimeStyle.height = 'auto'; |
| var w = image.width; |
| var h = image.height; |
| image.runtimeStyle.width = oldRuntimeWidth; |
| image.runtimeStyle.height = oldRuntimeHeight; |
| if (arguments.length == 3) { |
| dx = arguments[1]; |
| dy = arguments[2]; |
| sx = sy = 0; |
| sw = dw = w; |
| sh = dh = h; |
| } else if (arguments.length == 5) { |
| dx = arguments[1]; |
| dy = arguments[2]; |
| dw = arguments[3]; |
| dh = arguments[4]; |
| sx = sy = 0; |
| sw = w; |
| sh = h; |
| } else if (arguments.length == 9) { |
| sx = arguments[1]; |
| sy = arguments[2]; |
| sw = arguments[3]; |
| sh = arguments[4]; |
| dx = arguments[5]; |
| dy = arguments[6]; |
| dw = arguments[7]; |
| dh = arguments[8]; |
| } else { |
| throw Error('Invalid number of arguments'); |
| } |
| var d = getCoords(this, dx, dy); |
| var w2 = sw / 2; |
| var h2 = sh / 2; |
| var vmlStr = []; |
| var W = 10; |
| var H = 10; |
| var scaleX = scaleY = 1; |
| vmlStr.push(' <g_vml_:group', ' coordsize="', Z * W, ',', Z * H, '"', ' coordorigin="0,0"', ' style="width:', W, 'px;height:', H, 'px;position:absolute;'); |
| if (this.m_[0][0] != 1 || this.m_[0][1] || this.m_[1][1] != 1 || this.m_[1][0]) { |
| var filter = []; |
| var scaleX = this.scaleX_; |
| var scaleY = this.scaleY_; |
| filter.push('M11=', this.m_[0][0] / scaleX, ',', 'M12=', this.m_[1][0] / scaleY, ',', 'M21=', this.m_[0][1] / scaleX, ',', 'M22=', this.m_[1][1] / scaleY, ',', 'Dx=', mr(d.x / Z), ',', 'Dy=', mr(d.y / Z), ''); |
| var max = d; |
| var c2 = getCoords(this, dx + dw, dy); |
| var c3 = getCoords(this, dx, dy + dh); |
| var c4 = getCoords(this, dx + dw, dy + dh); |
| max.x = m.max(max.x, c2.x, c3.x, c4.x); |
| max.y = m.max(max.y, c2.y, c3.y, c4.y); |
| vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', filter.join(''), ', SizingMethod=\'clip\');'); |
| } else { |
| vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); |
| } |
| vmlStr.push(' ">'); |
| if (sx || sy) { |
| vmlStr.push('<div style="overflow: hidden; width:', Math.ceil((dw + sx * dw / sw) * scaleX), 'px;', ' height:', Math.ceil((dh + sy * dh / sh) * scaleY), 'px;', ' filter:progid:DxImageTransform.Microsoft.Matrix(Dx=', -sx * dw / sw * scaleX, ',Dy=', -sy * dh / sh * scaleY, ');">'); |
| } |
| vmlStr.push('<div style="width:', Math.round(scaleX * w * dw / sw), 'px;', ' height:', Math.round(scaleY * h * dh / sh), 'px;', ' filter:'); |
| if (this.globalAlpha < 1) { |
| vmlStr.push(' progid:DXImageTransform.Microsoft.Alpha(opacity=' + this.globalAlpha * 100 + ')'); |
| } |
| vmlStr.push(' progid:DXImageTransform.Microsoft.AlphaImageLoader(src=', image.src, ',sizingMethod=scale)">'); |
| if (sx || sy) |
| vmlStr.push('</div>'); |
| vmlStr.push('</div></div>'); |
| this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); |
| }; |
| contextPrototype.stroke = function (aFill) { |
| var lineStr = []; |
| var lineOpen = false; |
| var W = 10; |
| var H = 10; |
| lineStr.push('<g_vml_:shape', ' filled="', !!aFill, '"', ' style="position:absolute;width:', W, 'px;height:', H, 'px;"', ' coordorigin="0,0"', ' coordsize="', Z * W, ',', Z * H, '"', ' stroked="', !aFill, '"', ' path="'); |
| var newSeq = false; |
| var min = { |
| x: null, |
| y: null |
| }; |
| var max = { |
| x: null, |
| y: null |
| }; |
| for (var i = 0; i < this.currentPath_.length; i++) { |
| var p = this.currentPath_[i]; |
| var c; |
| switch (p.type) { |
| case 'moveTo': |
| c = p; |
| lineStr.push(' m ', mr(p.x), ',', mr(p.y)); |
| break; |
| case 'lineTo': |
| lineStr.push(' l ', mr(p.x), ',', mr(p.y)); |
| break; |
| case 'close': |
| lineStr.push(' x '); |
| p = null; |
| break; |
| case 'bezierCurveTo': |
| lineStr.push(' c ', mr(p.cp1x), ',', mr(p.cp1y), ',', mr(p.cp2x), ',', mr(p.cp2y), ',', mr(p.x), ',', mr(p.y)); |
| break; |
| case 'at': |
| case 'wa': |
| lineStr.push(' ', p.type, ' ', mr(p.x - this.scaleX_ * p.radius), ',', mr(p.y - this.scaleY_ * p.radius), ' ', mr(p.x + this.scaleX_ * p.radius), ',', mr(p.y + this.scaleY_ * p.radius), ' ', mr(p.xStart), ',', mr(p.yStart), ' ', mr(p.xEnd), ',', mr(p.yEnd)); |
| break; |
| } |
| if (p) { |
| if (min.x == null || p.x < min.x) { |
| min.x = p.x; |
| } |
| if (max.x == null || p.x > max.x) { |
| max.x = p.x; |
| } |
| if (min.y == null || p.y < min.y) { |
| min.y = p.y; |
| } |
| if (max.y == null || p.y > max.y) { |
| max.y = p.y; |
| } |
| } |
| } |
| lineStr.push(' ">'); |
| if (!aFill) { |
| appendStroke(this, lineStr); |
| } else { |
| appendFill(this, lineStr, min, max); |
| } |
| lineStr.push('</g_vml_:shape>'); |
| this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); |
| }; |
| function appendStroke(ctx, lineStr) { |
| var a = processStyle(ctx.strokeStyle); |
| var color = a.color; |
| var opacity = a.alpha * ctx.globalAlpha; |
| var lineWidth = ctx.lineScale_ * ctx.lineWidth; |
| if (lineWidth < 1) { |
| opacity *= lineWidth; |
| } |
| lineStr.push('<g_vml_:stroke', ' opacity="', opacity, '"', ' joinstyle="', ctx.lineJoin, '"', ' miterlimit="', ctx.miterLimit, '"', ' endcap="', processLineCap(ctx.lineCap), '"', ' weight="', lineWidth, 'px"', ' color="', color, '" />'); |
| } |
| function appendFill(ctx, lineStr, min, max) { |
| var fillStyle = ctx.fillStyle; |
| var arcScaleX = ctx.scaleX_; |
| var arcScaleY = ctx.scaleY_; |
| var width = max.x - min.x; |
| var height = max.y - min.y; |
| if (fillStyle instanceof CanvasGradient_) { |
| var angle = 0; |
| var focus = { |
| x: 0, |
| y: 0 |
| }; |
| var shift = 0; |
| var expansion = 1; |
| if (fillStyle.type_ == 'gradient') { |
| var x0 = fillStyle.x0_ / arcScaleX; |
| var y0 = fillStyle.y0_ / arcScaleY; |
| var x1 = fillStyle.x1_ / arcScaleX; |
| var y1 = fillStyle.y1_ / arcScaleY; |
| var p0 = getCoords(ctx, x0, y0); |
| var p1 = getCoords(ctx, x1, y1); |
| var dx = p1.x - p0.x; |
| var dy = p1.y - p0.y; |
| angle = Math.atan2(dx, dy) * 180 / Math.PI; |
| if (angle < 0) { |
| angle += 360; |
| } |
| if (angle < 0.000001) { |
| angle = 0; |
| } |
| } else { |
| var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_); |
| focus = { |
| x: (p0.x - min.x) / width, |
| y: (p0.y - min.y) / height |
| }; |
| width /= arcScaleX * Z; |
| height /= arcScaleY * Z; |
| var dimension = m.max(width, height); |
| shift = 2 * fillStyle.r0_ / dimension; |
| expansion = 2 * fillStyle.r1_ / dimension - shift; |
| } |
| var stops = fillStyle.colors_; |
| stops.sort(function (cs1, cs2) { |
| return cs1.offset - cs2.offset; |
| }); |
| var length = stops.length; |
| var color1 = stops[0].color; |
| var color2 = stops[length - 1].color; |
| var opacity1 = stops[0].alpha * ctx.globalAlpha; |
| var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; |
| var colors = []; |
| for (var i = 0; i < length; i++) { |
| var stop = stops[i]; |
| colors.push(stop.offset * expansion + shift + ' ' + stop.color); |
| } |
| lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', ' method="none" focus="100%"', ' color="', color1, '"', ' color2="', color2, '"', ' colors="', colors.join(','), '"', ' opacity="', opacity2, '"', ' g_o_:opacity2="', opacity1, '"', ' angle="', angle, '"', ' focusposition="', focus.x, ',', focus.y, '" />'); |
| } else if (fillStyle instanceof CanvasPattern_) { |
| if (width && height) { |
| var deltaLeft = -min.x; |
| var deltaTop = -min.y; |
| lineStr.push('<g_vml_:fill', ' position="', deltaLeft / width * arcScaleX * arcScaleX, ',', deltaTop / height * arcScaleY * arcScaleY, '"', ' type="tile"', ' src="', fillStyle.src_, '" />'); |
| } |
| } else { |
| var a = processStyle(ctx.fillStyle); |
| var color = a.color; |
| var opacity = a.alpha * ctx.globalAlpha; |
| lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, '" />'); |
| } |
| } |
| contextPrototype.fill = function () { |
| this.stroke(true); |
| }; |
| contextPrototype.closePath = function () { |
| this.currentPath_.push({ type: 'close' }); |
| }; |
| function getCoords(ctx, aX, aY) { |
| var m = ctx.m_; |
| return { |
| x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, |
| y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 |
| }; |
| } |
| ; |
| contextPrototype.save = function () { |
| var o = {}; |
| copyState(this, o); |
| this.aStack_.push(o); |
| this.mStack_.push(this.m_); |
| this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); |
| }; |
| contextPrototype.restore = function () { |
| if (this.aStack_.length) { |
| copyState(this.aStack_.pop(), this); |
| this.m_ = this.mStack_.pop(); |
| } |
| }; |
| function matrixIsFinite(m) { |
| return isFinite(m[0][0]) && isFinite(m[0][1]) && isFinite(m[1][0]) && isFinite(m[1][1]) && isFinite(m[2][0]) && isFinite(m[2][1]); |
| } |
| function setM(ctx, m, updateLineScale) { |
| if (!matrixIsFinite(m)) { |
| return; |
| } |
| ctx.m_ = m; |
| ctx.scaleX_ = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]); |
| ctx.scaleY_ = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]); |
| if (updateLineScale) { |
| var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; |
| ctx.lineScale_ = sqrt(abs(det)); |
| } |
| } |
| contextPrototype.translate = function (aX, aY) { |
| var m1 = [ |
| [ |
| 1, |
| 0, |
| 0 |
| ], |
| [ |
| 0, |
| 1, |
| 0 |
| ], |
| [ |
| aX, |
| aY, |
| 1 |
| ] |
| ]; |
| setM(this, matrixMultiply(m1, this.m_), false); |
| }; |
| contextPrototype.rotate = function (aRot) { |
| var c = mc(aRot); |
| var s = ms(aRot); |
| var m1 = [ |
| [ |
| c, |
| s, |
| 0 |
| ], |
| [ |
| -s, |
| c, |
| 0 |
| ], |
| [ |
| 0, |
| 0, |
| 1 |
| ] |
| ]; |
| setM(this, matrixMultiply(m1, this.m_), false); |
| }; |
| contextPrototype.scale = function (aX, aY) { |
| var m1 = [ |
| [ |
| aX, |
| 0, |
| 0 |
| ], |
| [ |
| 0, |
| aY, |
| 0 |
| ], |
| [ |
| 0, |
| 0, |
| 1 |
| ] |
| ]; |
| setM(this, matrixMultiply(m1, this.m_), true); |
| }; |
| contextPrototype.transform = function (m11, m12, m21, m22, dx, dy) { |
| var m1 = [ |
| [ |
| m11, |
| m12, |
| 0 |
| ], |
| [ |
| m21, |
| m22, |
| 0 |
| ], |
| [ |
| dx, |
| dy, |
| 1 |
| ] |
| ]; |
| setM(this, matrixMultiply(m1, this.m_), true); |
| }; |
| contextPrototype.setTransform = function (m11, m12, m21, m22, dx, dy) { |
| var m = [ |
| [ |
| m11, |
| m12, |
| 0 |
| ], |
| [ |
| m21, |
| m22, |
| 0 |
| ], |
| [ |
| dx, |
| dy, |
| 1 |
| ] |
| ]; |
| setM(this, m, true); |
| }; |
| contextPrototype.drawText_ = function (text, x, y, maxWidth, stroke) { |
| var m = this.m_, delta = 1000, left = 0, right = delta, offset = { |
| x: 0, |
| y: 0 |
| }, lineStr = []; |
| var fontStyle = getComputedStyle(processFontStyle(this.font), this.element_); |
| var fontStyleString = buildStyle(fontStyle); |
| var elementStyle = this.element_.currentStyle; |
| var textAlign = this.textAlign.toLowerCase(); |
| switch (textAlign) { |
| case 'left': |
| case 'center': |
| case 'right': |
| break; |
| case 'end': |
| textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; |
| break; |
| case 'start': |
| textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; |
| break; |
| default: |
| textAlign = 'left'; |
| } |
| switch (this.textBaseline) { |
| case 'hanging': |
| case 'top': |
| offset.y = fontStyle.size / 1.75; |
| break; |
| case 'middle': |
| break; |
| default: |
| case null: |
| case 'alphabetic': |
| case 'ideographic': |
| case 'bottom': |
| offset.y = -fontStyle.size / 2.25; |
| break; |
| } |
| switch (textAlign) { |
| case 'right': |
| left = delta; |
| right = 0.05; |
| break; |
| case 'center': |
| left = right = delta / 2; |
| break; |
| } |
| var d = getCoords(this, x + offset.x, y + offset.y); |
| lineStr.push('<g_vml_:line from="', -left, ' 0" to="', right, ' 0.05" ', ' coordsize="100 100" coordorigin="0 0"', ' filled="', !stroke, '" stroked="', !!stroke, '" style="position:absolute;width:1px;height:1px;">'); |
| if (stroke) { |
| appendStroke(this, lineStr); |
| } else { |
| appendFill(this, lineStr, { |
| x: -left, |
| y: 0 |
| }, { |
| x: right, |
| y: fontStyle.size |
| }); |
| } |
| var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; |
| var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); |
| lineStr.push('<g_vml_:skew on="t" matrix="', skewM, '" ', ' offset="', skewOffset, '" origin="', left, ' 0" />', '<g_vml_:path textpathok="true" />', '<g_vml_:textpath on="true" string="', encodeHtmlAttribute(text), '" style="v-text-align:', textAlign, ';font:', encodeHtmlAttribute(fontStyleString), '" /></g_vml_:line>'); |
| this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); |
| }; |
| contextPrototype.fillText = function (text, x, y, maxWidth) { |
| this.drawText_(text, x, y, maxWidth, false); |
| }; |
| contextPrototype.strokeText = function (text, x, y, maxWidth) { |
| this.drawText_(text, x, y, maxWidth, true); |
| }; |
| contextPrototype.measureText = function (text) { |
| if (!this.textMeasureEl_) { |
| var s = '<span style="position:absolute;' + 'top:-20000px;left:0;padding:0;margin:0;border:none;' + 'white-space:pre;"></span>'; |
| this.element_.insertAdjacentHTML('beforeEnd', s); |
| this.textMeasureEl_ = this.element_.lastChild; |
| } |
| var doc = this.element_.ownerDocument; |
| this.textMeasureEl_.innerHTML = ''; |
| try { |
| this.textMeasureEl_.style.font = this.font; |
| } catch (ex) { |
| } |
| this.textMeasureEl_.appendChild(doc.createTextNode(text)); |
| return { width: this.textMeasureEl_.offsetWidth }; |
| }; |
| contextPrototype.clip = function () { |
| }; |
| contextPrototype.arcTo = function () { |
| }; |
| contextPrototype.createPattern = function (image, repetition) { |
| return new CanvasPattern_(image, repetition); |
| }; |
| function CanvasGradient_(aType) { |
| this.type_ = aType; |
| this.x0_ = 0; |
| this.y0_ = 0; |
| this.r0_ = 0; |
| this.x1_ = 0; |
| this.y1_ = 0; |
| this.r1_ = 0; |
| this.colors_ = []; |
| } |
| CanvasGradient_.prototype.addColorStop = function (aOffset, aColor) { |
| aColor = processStyle(aColor); |
| this.colors_.push({ |
| offset: aOffset, |
| color: aColor.color, |
| alpha: aColor.alpha |
| }); |
| }; |
| function CanvasPattern_(image, repetition) { |
| assertImageIsValid(image); |
| switch (repetition) { |
| case 'repeat': |
| case null: |
| case '': |
| this.repetition_ = 'repeat'; |
| break; |
| case 'repeat-x': |
| case 'repeat-y': |
| case 'no-repeat': |
| this.repetition_ = repetition; |
| break; |
| default: |
| throwException('SYNTAX_ERR'); |
| } |
| this.src_ = image.src; |
| this.width_ = image.width; |
| this.height_ = image.height; |
| } |
| function throwException(s) { |
| throw new DOMException_(s); |
| } |
| function assertImageIsValid(img) { |
| if (!img || img.nodeType != 1 || img.tagName != 'IMG') { |
| throwException('TYPE_MISMATCH_ERR'); |
| } |
| if (img.readyState != 'complete') { |
| throwException('INVALID_STATE_ERR'); |
| } |
| } |
| function DOMException_(s) { |
| this.code = this[s]; |
| this.message = s + ': DOM Exception ' + this.code; |
| } |
| var p = DOMException_.prototype = new Error(); |
| p.INDEX_SIZE_ERR = 1; |
| p.DOMSTRING_SIZE_ERR = 2; |
| p.HIERARCHY_REQUEST_ERR = 3; |
| p.WRONG_DOCUMENT_ERR = 4; |
| p.INVALID_CHARACTER_ERR = 5; |
| p.NO_DATA_ALLOWED_ERR = 6; |
| p.NO_MODIFICATION_ALLOWED_ERR = 7; |
| p.NOT_FOUND_ERR = 8; |
| p.NOT_SUPPORTED_ERR = 9; |
| p.INUSE_ATTRIBUTE_ERR = 10; |
| p.INVALID_STATE_ERR = 11; |
| p.SYNTAX_ERR = 12; |
| p.INVALID_MODIFICATION_ERR = 13; |
| p.NAMESPACE_ERR = 14; |
| p.INVALID_ACCESS_ERR = 15; |
| p.VALIDATION_ERR = 16; |
| p.TYPE_MISMATCH_ERR = 17; |
| G_vmlCanvasManager = G_vmlCanvasManager_; |
| CanvasRenderingContext2D = CanvasRenderingContext2D_; |
| CanvasGradient = CanvasGradient_; |
| CanvasPattern = CanvasPattern_; |
| DOMException = DOMException_; |
| }()); |
| } else { |
| G_vmlCanvasManager = false; |
| } |
| return G_vmlCanvasManager; |
| });define('zrender/mixin/Eventful', ['require'], function (require) { |
| var Eventful = function () { |
| this._handlers = {}; |
| }; |
| Eventful.prototype.one = function (event, handler, context) { |
| var _h = this._handlers; |
| if (!handler || !event) { |
| return this; |
| } |
| if (!_h[event]) { |
| _h[event] = []; |
| } |
| _h[event].push({ |
| h: handler, |
| one: true, |
| ctx: context || this |
| }); |
| return this; |
| }; |
| Eventful.prototype.bind = function (event, handler, context) { |
| var _h = this._handlers; |
| if (!handler || !event) { |
| return this; |
| } |
| if (!_h[event]) { |
| _h[event] = []; |
| } |
| _h[event].push({ |
| h: handler, |
| one: false, |
| ctx: context || this |
| }); |
| return this; |
| }; |
| Eventful.prototype.unbind = function (event, handler) { |
| var _h = this._handlers; |
| if (!event) { |
| this._handlers = {}; |
| return this; |
| } |
| if (handler) { |
| if (_h[event]) { |
| var newList = []; |
| for (var i = 0, l = _h[event].length; i < l; i++) { |
| if (_h[event][i]['h'] != handler) { |
| newList.push(_h[event][i]); |
| } |
| } |
| _h[event] = newList; |
| } |
| if (_h[event] && _h[event].length === 0) { |
| delete _h[event]; |
| } |
| } else { |
| delete _h[event]; |
| } |
| return this; |
| }; |
| Eventful.prototype.dispatch = function (type) { |
| if (this._handlers[type]) { |
| var args = arguments; |
| var argLen = args.length; |
| if (argLen > 3) { |
| args = Array.prototype.slice.call(args, 1); |
| } |
| var _h = this._handlers[type]; |
| var len = _h.length; |
| for (var i = 0; i < len;) { |
| switch (argLen) { |
| case 1: |
| _h[i]['h'].call(_h[i]['ctx']); |
| break; |
| case 2: |
| _h[i]['h'].call(_h[i]['ctx'], args[1]); |
| break; |
| case 3: |
| _h[i]['h'].call(_h[i]['ctx'], args[1], args[2]); |
| break; |
| default: |
| _h[i]['h'].apply(_h[i]['ctx'], args); |
| break; |
| } |
| if (_h[i]['one']) { |
| _h.splice(i, 1); |
| len--; |
| } else { |
| i++; |
| } |
| } |
| } |
| return this; |
| }; |
| Eventful.prototype.dispatchWithContext = function (type) { |
| if (this._handlers[type]) { |
| var args = arguments; |
| var argLen = args.length; |
| if (argLen > 4) { |
| args = Array.prototype.slice.call(args, 1, args.length - 1); |
| } |
| var ctx = args[args.length - 1]; |
| var _h = this._handlers[type]; |
| var len = _h.length; |
| for (var i = 0; i < len;) { |
| switch (argLen) { |
| case 1: |
| _h[i]['h'].call(ctx); |
| break; |
| case 2: |
| _h[i]['h'].call(ctx, args[1]); |
| break; |
| case 3: |
| _h[i]['h'].call(ctx, args[1], args[2]); |
| break; |
| default: |
| _h[i]['h'].apply(ctx, args); |
| break; |
| } |
| if (_h[i]['one']) { |
| _h.splice(i, 1); |
| len--; |
| } else { |
| i++; |
| } |
| } |
| } |
| return this; |
| }; |
| return Eventful; |
| });define('zrender/tool/log', [ |
| 'require', |
| '../config' |
| ], function (require) { |
| var config = require('../config'); |
| return function () { |
| if (config.debugMode === 0) { |
| return; |
| } else if (config.debugMode == 1) { |
| for (var k in arguments) { |
| throw new Error(arguments[k]); |
| } |
| } else if (config.debugMode > 1) { |
| for (var k in arguments) { |
| console.log(arguments[k]); |
| } |
| } |
| }; |
| });define('zrender/tool/guid', [], function () { |
| var idStart = 2311; |
| return function () { |
| return 'zrender__' + idStart++; |
| }; |
| });define('zrender/Handler', [ |
| 'require', |
| './config', |
| './tool/env', |
| './tool/event', |
| './tool/util', |
| './tool/vector', |
| './tool/matrix', |
| './mixin/Eventful' |
| ], function (require) { |
| 'use strict'; |
| var config = require('./config'); |
| var env = require('./tool/env'); |
| var eventTool = require('./tool/event'); |
| var util = require('./tool/util'); |
| var vec2 = require('./tool/vector'); |
| var mat2d = require('./tool/matrix'); |
| var EVENT = config.EVENT; |
| var Eventful = require('./mixin/Eventful'); |
| var domHandlerNames = [ |
| 'resize', |
| 'click', |
| 'dblclick', |
| 'mousewheel', |
| 'mousemove', |
| 'mouseout', |
| 'mouseup', |
| 'mousedown', |
| 'touchstart', |
| 'touchend', |
| 'touchmove' |
| ]; |
| var isZRenderElement = function (event) { |
| if (window.G_vmlCanvasManager) { |
| return true; |
| } |
| event = event || window.event; |
| var target = event.toElement || event.relatedTarget || event.srcElement || event.target; |
| return target && target.className.match(config.elementClassName); |
| }; |
| var domHandlers = { |
| resize: function (event) { |
| event = event || window.event; |
| this._lastHover = null; |
| this._isMouseDown = 0; |
| this.dispatch(EVENT.RESIZE, event); |
| }, |
| click: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event); |
| var _lastHover = this._lastHover; |
| if (_lastHover && _lastHover.clickable || !_lastHover) { |
| if (this._clickThreshold < 5) { |
| this._dispatchAgency(_lastHover, EVENT.CLICK, event); |
| } |
| } |
| this._mousemoveHandler(event); |
| }, |
| dblclick: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = event || window.event; |
| event = this._zrenderEventFixed(event); |
| var _lastHover = this._lastHover; |
| if (_lastHover && _lastHover.clickable || !_lastHover) { |
| if (this._clickThreshold < 5) { |
| this._dispatchAgency(_lastHover, EVENT.DBLCLICK, event); |
| } |
| } |
| this._mousemoveHandler(event); |
| }, |
| mousewheel: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event); |
| var delta = event.wheelDelta || -event.detail; |
| var scale = delta > 0 ? 1.1 : 1 / 1.1; |
| var needsRefresh = false; |
| var mouseX = this._mouseX; |
| var mouseY = this._mouseY; |
| this.painter.eachBuildinLayer(function (layer) { |
| var pos = layer.position; |
| if (layer.zoomable) { |
| layer.__zoom = layer.__zoom || 1; |
| var newZoom = layer.__zoom; |
| newZoom *= scale; |
| newZoom = Math.max(Math.min(layer.maxZoom, newZoom), layer.minZoom); |
| scale = newZoom / layer.__zoom; |
| layer.__zoom = newZoom; |
| pos[0] -= (mouseX - pos[0]) * (scale - 1); |
| pos[1] -= (mouseY - pos[1]) * (scale - 1); |
| layer.scale[0] *= scale; |
| layer.scale[1] *= scale; |
| layer.dirty = true; |
| needsRefresh = true; |
| eventTool.stop(event); |
| } |
| }); |
| if (needsRefresh) { |
| this.painter.refresh(); |
| } |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEWHEEL, event); |
| this._mousemoveHandler(event); |
| }, |
| mousemove: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| if (this.painter.isLoading()) { |
| return; |
| } |
| event = this._zrenderEventFixed(event); |
| this._lastX = this._mouseX; |
| this._lastY = this._mouseY; |
| this._mouseX = eventTool.getX(event); |
| this._mouseY = eventTool.getY(event); |
| var dx = this._mouseX - this._lastX; |
| var dy = this._mouseY - this._lastY; |
| this._processDragStart(event); |
| this._hasfound = 0; |
| this._event = event; |
| this._iterateAndFindHover(); |
| if (!this._hasfound) { |
| if (!this._draggingTarget || this._lastHover && this._lastHover != this._draggingTarget) { |
| this._processOutShape(event); |
| this._processDragLeave(event); |
| } |
| this._lastHover = null; |
| this.storage.delHover(); |
| this.painter.clearHover(); |
| } |
| var cursor = 'default'; |
| if (this._draggingTarget) { |
| this.storage.drift(this._draggingTarget.id, dx, dy); |
| this._draggingTarget.modSelf(); |
| this.storage.addHover(this._draggingTarget); |
| this._clickThreshold++; |
| } else if (this._isMouseDown) { |
| var needsRefresh = false; |
| this.painter.eachBuildinLayer(function (layer) { |
| if (layer.panable) { |
| cursor = 'move'; |
| layer.position[0] += dx; |
| layer.position[1] += dy; |
| needsRefresh = true; |
| layer.dirty = true; |
| } |
| }); |
| if (needsRefresh) { |
| this.painter.refresh(); |
| } |
| } |
| if (this._draggingTarget || this._hasfound && this._lastHover.draggable) { |
| cursor = 'move'; |
| } else if (this._hasfound && this._lastHover.clickable) { |
| cursor = 'pointer'; |
| } |
| this.root.style.cursor = cursor; |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEMOVE, event); |
| if (this._draggingTarget || this._hasfound || this.storage.hasHoverShape()) { |
| this.painter.refreshHover(); |
| } |
| }, |
| mouseout: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event); |
| var element = event.toElement || event.relatedTarget; |
| if (element != this.root) { |
| while (element && element.nodeType != 9) { |
| if (element == this.root) { |
| this._mousemoveHandler(event); |
| return; |
| } |
| element = element.parentNode; |
| } |
| } |
| event.zrenderX = this._lastX; |
| event.zrenderY = this._lastY; |
| this.root.style.cursor = 'default'; |
| this._isMouseDown = 0; |
| this._processOutShape(event); |
| this._processDrop(event); |
| this._processDragEnd(event); |
| if (!this.painter.isLoading()) { |
| this.painter.refreshHover(); |
| } |
| this.dispatch(EVENT.GLOBALOUT, event); |
| }, |
| mousedown: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| this._clickThreshold = 0; |
| if (this._lastDownButton == 2) { |
| this._lastDownButton = event.button; |
| this._mouseDownTarget = null; |
| return; |
| } |
| this._lastMouseDownMoment = new Date(); |
| event = this._zrenderEventFixed(event); |
| this._isMouseDown = 1; |
| this._mouseDownTarget = this._lastHover; |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEDOWN, event); |
| this._lastDownButton = event.button; |
| }, |
| mouseup: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event); |
| this.root.style.cursor = 'default'; |
| this._isMouseDown = 0; |
| this._mouseDownTarget = null; |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEUP, event); |
| this._processDrop(event); |
| this._processDragEnd(event); |
| }, |
| touchstart: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event, true); |
| this._lastTouchMoment = new Date(); |
| this._mobileFindFixed(event); |
| this._mousedownHandler(event); |
| }, |
| touchmove: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event, true); |
| this._mousemoveHandler(event); |
| if (this._isDragging) { |
| eventTool.stop(event); |
| } |
| }, |
| touchend: function (event, manually) { |
| if (!isZRenderElement(event) && !manually) { |
| return; |
| } |
| event = this._zrenderEventFixed(event, true); |
| this._mouseupHandler(event); |
| var now = new Date(); |
| if (now - this._lastTouchMoment < EVENT.touchClickDelay) { |
| this._mobileFindFixed(event); |
| this._clickHandler(event); |
| if (now - this._lastClickMoment < EVENT.touchClickDelay / 2) { |
| this._dblclickHandler(event); |
| if (this._lastHover && this._lastHover.clickable) { |
| eventTool.stop(event); |
| } |
| } |
| this._lastClickMoment = now; |
| } |
| this.painter.clearHover(); |
| } |
| }; |
| function bind2Arg(handler, context) { |
| return function (arg1, arg2) { |
| return handler.call(context, arg1, arg2); |
| }; |
| } |
| function bind3Arg(handler, context) { |
| return function (arg1, arg2, arg3) { |
| return handler.call(context, arg1, arg2, arg3); |
| }; |
| } |
| function initDomHandler(instance) { |
| var len = domHandlerNames.length; |
| while (len--) { |
| var name = domHandlerNames[len]; |
| instance['_' + name + 'Handler'] = bind2Arg(domHandlers[name], instance); |
| } |
| } |
| var Handler = function (root, storage, painter) { |
| Eventful.call(this); |
| this.root = root; |
| this.storage = storage; |
| this.painter = painter; |
| this._lastX = this._lastY = this._mouseX = this._mouseY = 0; |
| this._findHover = bind3Arg(findHover, this); |
| this._domHover = painter.getDomHover(); |
| initDomHandler(this); |
| if (window.addEventListener) { |
| window.addEventListener('resize', this._resizeHandler); |
| if (env.os.tablet || env.os.phone) { |
| root.addEventListener('touchstart', this._touchstartHandler); |
| root.addEventListener('touchmove', this._touchmoveHandler); |
| root.addEventListener('touchend', this._touchendHandler); |
| } else { |
| root.addEventListener('click', this._clickHandler); |
| root.addEventListener('dblclick', this._dblclickHandler); |
| root.addEventListener('mousewheel', this._mousewheelHandler); |
| root.addEventListener('mousemove', this._mousemoveHandler); |
| root.addEventListener('mousedown', this._mousedownHandler); |
| root.addEventListener('mouseup', this._mouseupHandler); |
| } |
| root.addEventListener('DOMMouseScroll', this._mousewheelHandler); |
| root.addEventListener('mouseout', this._mouseoutHandler); |
| } else { |
| window.attachEvent('onresize', this._resizeHandler); |
| root.attachEvent('onclick', this._clickHandler); |
| root.ondblclick = this._dblclickHandler; |
| root.attachEvent('onmousewheel', this._mousewheelHandler); |
| root.attachEvent('onmousemove', this._mousemoveHandler); |
| root.attachEvent('onmouseout', this._mouseoutHandler); |
| root.attachEvent('onmousedown', this._mousedownHandler); |
| root.attachEvent('onmouseup', this._mouseupHandler); |
| } |
| }; |
| Handler.prototype.on = function (eventName, handler, context) { |
| this.bind(eventName, handler, context); |
| return this; |
| }; |
| Handler.prototype.un = function (eventName, handler) { |
| this.unbind(eventName, handler); |
| return this; |
| }; |
| Handler.prototype.trigger = function (eventName, eventArgs) { |
| switch (eventName) { |
| case EVENT.RESIZE: |
| case EVENT.CLICK: |
| case EVENT.DBLCLICK: |
| case EVENT.MOUSEWHEEL: |
| case EVENT.MOUSEMOVE: |
| case EVENT.MOUSEDOWN: |
| case EVENT.MOUSEUP: |
| case EVENT.MOUSEOUT: |
| this['_' + eventName + 'Handler'](eventArgs, true); |
| break; |
| } |
| }; |
| Handler.prototype.dispose = function () { |
| var root = this.root; |
| if (window.removeEventListener) { |
| window.removeEventListener('resize', this._resizeHandler); |
| if (env.os.tablet || env.os.phone) { |
| root.removeEventListener('touchstart', this._touchstartHandler); |
| root.removeEventListener('touchmove', this._touchmoveHandler); |
| root.removeEventListener('touchend', this._touchendHandler); |
| } else { |
| root.removeEventListener('click', this._clickHandler); |
| root.removeEventListener('dblclick', this._dblclickHandler); |
| root.removeEventListener('mousewheel', this._mousewheelHandler); |
| root.removeEventListener('mousemove', this._mousemoveHandler); |
| root.removeEventListener('mousedown', this._mousedownHandler); |
| root.removeEventListener('mouseup', this._mouseupHandler); |
| } |
| root.removeEventListener('DOMMouseScroll', this._mousewheelHandler); |
| root.removeEventListener('mouseout', this._mouseoutHandler); |
| } else { |
| window.detachEvent('onresize', this._resizeHandler); |
| root.detachEvent('onclick', this._clickHandler); |
| root.detachEvent('dblclick', this._dblclickHandler); |
| root.detachEvent('onmousewheel', this._mousewheelHandler); |
| root.detachEvent('onmousemove', this._mousemoveHandler); |
| root.detachEvent('onmouseout', this._mouseoutHandler); |
| root.detachEvent('onmousedown', this._mousedownHandler); |
| root.detachEvent('onmouseup', this._mouseupHandler); |
| } |
| this.root = this._domHover = this.storage = this.painter = null; |
| this.un(); |
| }; |
| Handler.prototype._processDragStart = function (event) { |
| var _lastHover = this._lastHover; |
| if (this._isMouseDown && _lastHover && _lastHover.draggable && !this._draggingTarget && this._mouseDownTarget == _lastHover) { |
| if (_lastHover.dragEnableTime && new Date() - this._lastMouseDownMoment < _lastHover.dragEnableTime) { |
| return; |
| } |
| var _draggingTarget = _lastHover; |
| this._draggingTarget = _draggingTarget; |
| this._isDragging = 1; |
| _draggingTarget.invisible = true; |
| this.storage.mod(_draggingTarget.id); |
| this._dispatchAgency(_draggingTarget, EVENT.DRAGSTART, event); |
| this.painter.refresh(); |
| } |
| }; |
| Handler.prototype._processDragEnter = function (event) { |
| if (this._draggingTarget) { |
| this._dispatchAgency(this._lastHover, EVENT.DRAGENTER, event, this._draggingTarget); |
| } |
| }; |
| Handler.prototype._processDragOver = function (event) { |
| if (this._draggingTarget) { |
| this._dispatchAgency(this._lastHover, EVENT.DRAGOVER, event, this._draggingTarget); |
| } |
| }; |
| Handler.prototype._processDragLeave = function (event) { |
| if (this._draggingTarget) { |
| this._dispatchAgency(this._lastHover, EVENT.DRAGLEAVE, event, this._draggingTarget); |
| } |
| }; |
| Handler.prototype._processDrop = function (event) { |
| if (this._draggingTarget) { |
| this._draggingTarget.invisible = false; |
| this.storage.mod(this._draggingTarget.id); |
| this.painter.refresh(); |
| this._dispatchAgency(this._lastHover, EVENT.DROP, event, this._draggingTarget); |
| } |
| }; |
| Handler.prototype._processDragEnd = function (event) { |
| if (this._draggingTarget) { |
| this._dispatchAgency(this._draggingTarget, EVENT.DRAGEND, event); |
| this._lastHover = null; |
| } |
| this._isDragging = 0; |
| this._draggingTarget = null; |
| }; |
| Handler.prototype._processOverShape = function (event) { |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEOVER, event); |
| }; |
| Handler.prototype._processOutShape = function (event) { |
| this._dispatchAgency(this._lastHover, EVENT.MOUSEOUT, event); |
| }; |
| Handler.prototype._dispatchAgency = function (targetShape, eventName, event, draggedShape) { |
| var eventHandler = 'on' + eventName; |
| var eventPacket = { |
| type: eventName, |
| event: event, |
| target: targetShape, |
| cancelBubble: false |
| }; |
| var el = targetShape; |
| if (draggedShape) { |
| eventPacket.dragged = draggedShape; |
| } |
| while (el) { |
| el[eventHandler] && (eventPacket.cancelBubble = el[eventHandler](eventPacket)); |
| el.dispatch(eventName, eventPacket); |
| el = el.parent; |
| if (eventPacket.cancelBubble) { |
| break; |
| } |
| } |
| if (targetShape) { |
| if (!eventPacket.cancelBubble) { |
| this.dispatch(eventName, eventPacket); |
| } |
| } else if (!draggedShape) { |
| var eveObj = { |
| type: eventName, |
| event: event |
| }; |
| this.dispatch(eventName, eveObj); |
| this.painter.eachOtherLayer(function (layer) { |
| if (typeof layer[eventHandler] == 'function') { |
| layer[eventHandler](eveObj); |
| } |
| if (layer.dispatch) { |
| layer.dispatch(eventName, eveObj); |
| } |
| }); |
| } |
| }; |
| Handler.prototype._iterateAndFindHover = function () { |
| var invTransform = mat2d.create(); |
| return function () { |
| var list = this.storage.getShapeList(); |
| var currentZLevel; |
| var currentLayer; |
| var tmp = [ |
| 0, |
| 0 |
| ]; |
| for (var i = list.length - 1; i >= 0; i--) { |
| var shape = list[i]; |
| if (currentZLevel !== shape.zlevel) { |
| currentLayer = this.painter.getLayer(shape.zlevel, currentLayer); |
| tmp[0] = this._mouseX; |
| tmp[1] = this._mouseY; |
| if (currentLayer.needTransform) { |
| mat2d.invert(invTransform, currentLayer.transform); |
| vec2.applyTransform(tmp, tmp, invTransform); |
| } |
| } |
| if (this._findHover(shape, tmp[0], tmp[1])) { |
| break; |
| } |
| } |
| }; |
| }(); |
| var MOBILE_TOUCH_OFFSETS = [ |
| { x: 10 }, |
| { x: -20 }, |
| { |
| x: 10, |
| y: 10 |
| }, |
| { y: -20 } |
| ]; |
| Handler.prototype._mobileFindFixed = function (event) { |
| this._lastHover = null; |
| this._mouseX = event.zrenderX; |
| this._mouseY = event.zrenderY; |
| this._event = event; |
| this._iterateAndFindHover(); |
| for (var i = 0; !this._lastHover && i < MOBILE_TOUCH_OFFSETS.length; i++) { |
| var offset = MOBILE_TOUCH_OFFSETS[i]; |
| offset.x && (this._mouseX += offset.x); |
| offset.y && (this._mouseY += offset.y); |
| this._iterateAndFindHover(); |
| } |
| if (this._lastHover) { |
| event.zrenderX = this._mouseX; |
| event.zrenderY = this._mouseY; |
| } |
| }; |
| function findHover(shape, x, y) { |
| if (this._draggingTarget && this._draggingTarget.id == shape.id || shape.isSilent()) { |
| return false; |
| } |
| var event = this._event; |
| if (shape.isCover(x, y)) { |
| if (shape.hoverable) { |
| this.storage.addHover(shape); |
| } |
| var p = shape.parent; |
| while (p) { |
| if (p.clipShape && !p.clipShape.isCover(this._mouseX, this._mouseY)) { |
| return false; |
| } |
| p = p.parent; |
| } |
| if (this._lastHover != shape) { |
| this._processOutShape(event); |
| this._processDragLeave(event); |
| this._lastHover = shape; |
| this._processDragEnter(event); |
| } |
| this._processOverShape(event); |
| this._processDragOver(event); |
| this._hasfound = 1; |
| return true; |
| } |
| return false; |
| } |
| Handler.prototype._zrenderEventFixed = function (event, isTouch) { |
| if (event.zrenderFixed) { |
| return event; |
| } |
| if (!isTouch) { |
| event = event || window.event; |
| var target = event.toElement || event.relatedTarget || event.srcElement || event.target; |
| if (target && target != this._domHover) { |
| event.zrenderX = (typeof event.offsetX != 'undefined' ? event.offsetX : event.layerX) + target.offsetLeft; |
| event.zrenderY = (typeof event.offsetY != 'undefined' ? event.offsetY : event.layerY) + target.offsetTop; |
| } |
| } else { |
| var touch = event.type != 'touchend' ? event.targetTouches[0] : event.changedTouches[0]; |
| if (touch) { |
| var rBounding = this.painter._domRoot.getBoundingClientRect(); |
| event.zrenderX = touch.clientX - rBounding.left; |
| event.zrenderY = touch.clientY - rBounding.top; |
| } |
| } |
| event.zrenderFixed = 1; |
| return event; |
| }; |
| util.merge(Handler.prototype, Eventful.prototype, true); |
| return Handler; |
| });define('zrender/Painter', [ |
| 'require', |
| './config', |
| './tool/util', |
| './tool/log', |
| './loadingEffect/Base', |
| './Layer', |
| './shape/Image' |
| ], function (require) { |
| 'use strict'; |
| var config = require('./config'); |
| var util = require('./tool/util'); |
| var log = require('./tool/log'); |
| var BaseLoadingEffect = require('./loadingEffect/Base'); |
| var Layer = require('./Layer'); |
| function returnFalse() { |
| return false; |
| } |
| function doNothing() { |
| } |
| function isLayerValid(layer) { |
| if (!layer) { |
| return false; |
| } |
| if (layer.isBuildin) { |
| return true; |
| } |
| if (typeof layer.resize !== 'function' || typeof layer.refresh !== 'function') { |
| return false; |
| } |
| return true; |
| } |
| var Painter = function (root, storage) { |
| this.root = root; |
| root.style['-webkit-tap-highlight-color'] = 'transparent'; |
| root.style['-webkit-user-select'] = 'none'; |
| root.style['user-select'] = 'none'; |
| root.style['-webkit-touch-callout'] = 'none'; |
| this.storage = storage; |
| root.innerHTML = ''; |
| this._width = this._getWidth(); |
| this._height = this._getHeight(); |
| var domRoot = document.createElement('div'); |
| this._domRoot = domRoot; |
| domRoot.style.position = 'relative'; |
| domRoot.style.overflow = 'hidden'; |
| domRoot.style.width = this._width + 'px'; |
| domRoot.style.height = this._height + 'px'; |
| root.appendChild(domRoot); |
| this._layers = {}; |
| this._zlevelList = []; |
| this._layerConfig = {}; |
| this._loadingEffect = new BaseLoadingEffect({}); |
| this.shapeToImage = this._createShapeToImageProcessor(); |
| this._bgDom = document.createElement('div'); |
| this._bgDom.style.cssText = [ |
| 'position:absolute;left:0px;top:0px;width:', |
| this._width, |
| 'px;height:', |
| this._height + 'px;', |
| '-webkit-user-select:none;user-select;none;', |
| '-webkit-touch-callout:none;' |
| ].join(''); |
| this._bgDom.setAttribute('data-zr-dom-id', 'bg'); |
| this._bgDom.className = config.elementClassName; |
| domRoot.appendChild(this._bgDom); |
| this._bgDom.onselectstart = returnFalse; |
| var hoverLayer = new Layer('_zrender_hover_', this); |
| this._layers['hover'] = hoverLayer; |
| domRoot.appendChild(hoverLayer.dom); |
| hoverLayer.initContext(); |
| hoverLayer.dom.onselectstart = returnFalse; |
| hoverLayer.dom.style['-webkit-user-select'] = 'none'; |
| hoverLayer.dom.style['user-select'] = 'none'; |
| hoverLayer.dom.style['-webkit-touch-callout'] = 'none'; |
| this.refreshNextFrame = null; |
| }; |
| Painter.prototype.render = function (callback) { |
| if (this.isLoading()) { |
| this.hideLoading(); |
| } |
| this.refresh(callback, true); |
| return this; |
| }; |
| Painter.prototype.refresh = function (callback, paintAll) { |
| var list = this.storage.getShapeList(true); |
| this._paintList(list, paintAll); |
| for (var i = 0; i < this._zlevelList.length; i++) { |
| var z = this._zlevelList[i]; |
| var layer = this._layers[z]; |
| if (!layer.isBuildin && layer.refresh) { |
| layer.refresh(); |
| } |
| } |
| if (typeof callback == 'function') { |
| callback(); |
| } |
| return this; |
| }; |
| Painter.prototype._preProcessLayer = function (layer) { |
| layer.unusedCount++; |
| layer.updateTransform(); |
| }; |
| Painter.prototype._postProcessLayer = function (layer) { |
| layer.dirty = false; |
| if (layer.unusedCount == 1) { |
| layer.clear(); |
| } |
| }; |
| Painter.prototype._paintList = function (list, paintAll) { |
| if (typeof paintAll == 'undefined') { |
| paintAll = false; |
| } |
| this._updateLayerStatus(list); |
| var currentLayer; |
| var currentZLevel; |
| var ctx; |
| this.eachBuildinLayer(this._preProcessLayer); |
| for (var i = 0, l = list.length; i < l; i++) { |
| var shape = list[i]; |
| if (currentZLevel !== shape.zlevel) { |
| if (currentLayer) { |
| if (currentLayer.needTransform) { |
| ctx.restore(); |
| } |
| ctx.flush && ctx.flush(); |
| } |
| currentZLevel = shape.zlevel; |
| currentLayer = this.getLayer(currentZLevel); |
| if (!currentLayer.isBuildin) { |
| log('ZLevel ' + currentZLevel + ' has been used by unkown layer ' + currentLayer.id); |
| } |
| ctx = currentLayer.ctx; |
| currentLayer.unusedCount = 0; |
| if (currentLayer.dirty || paintAll) { |
| currentLayer.clear(); |
| } |
| if (currentLayer.needTransform) { |
| ctx.save(); |
| currentLayer.setTransform(ctx); |
| } |
| } |
| if ((currentLayer.dirty || paintAll) && !shape.invisible) { |
| if (!shape.onbrush || shape.onbrush && !shape.onbrush(ctx, false)) { |
| if (config.catchBrushException) { |
| try { |
| shape.brush(ctx, false, this.refreshNextFrame); |
| } catch (error) { |
| log(error, 'brush error of ' + shape.type, shape); |
| } |
| } else { |
| shape.brush(ctx, false, this.refreshNextFrame); |
| } |
| } |
| } |
| shape.__dirty = false; |
| } |
| if (currentLayer) { |
| if (currentLayer.needTransform) { |
| ctx.restore(); |
| } |
| ctx.flush && ctx.flush(); |
| } |
| this.eachBuildinLayer(this._postProcessLayer); |
| }; |
| Painter.prototype.getLayer = function (zlevel) { |
| var layer = this._layers[zlevel]; |
| if (!layer) { |
| layer = new Layer(zlevel, this); |
| layer.isBuildin = true; |
| if (this._layerConfig[zlevel]) { |
| util.merge(layer, this._layerConfig[zlevel], true); |
| } |
| layer.updateTransform(); |
| this.insertLayer(zlevel, layer); |
| layer.initContext(); |
| } |
| return layer; |
| }; |
| Painter.prototype.insertLayer = function (zlevel, layer) { |
| if (this._layers[zlevel]) { |
| log('ZLevel ' + zlevel + ' has been used already'); |
| return; |
| } |
| if (!isLayerValid(layer)) { |
| log('Layer of zlevel ' + zlevel + ' is not valid'); |
| return; |
| } |
| var len = this._zlevelList.length; |
| var prevLayer = null; |
| var i = -1; |
| if (len > 0 && zlevel > this._zlevelList[0]) { |
| for (i = 0; i < len - 1; i++) { |
| if (this._zlevelList[i] < zlevel && this._zlevelList[i + 1] > zlevel) { |
| break; |
| } |
| } |
| prevLayer = this._layers[this._zlevelList[i]]; |
| } |
| this._zlevelList.splice(i + 1, 0, zlevel); |
| var prevDom = prevLayer ? prevLayer.dom : this._bgDom; |
| if (prevDom.nextSibling) { |
| prevDom.parentNode.insertBefore(layer.dom, prevDom.nextSibling); |
| } else { |
| prevDom.parentNode.appendChild(layer.dom); |
| } |
| this._layers[zlevel] = layer; |
| }; |
| Painter.prototype.eachLayer = function (cb, context) { |
| for (var i = 0; i < this._zlevelList.length; i++) { |
| var z = this._zlevelList[i]; |
| cb.call(context, this._layers[z], z); |
| } |
| }; |
| Painter.prototype.eachBuildinLayer = function (cb, context) { |
| for (var i = 0; i < this._zlevelList.length; i++) { |
| var z = this._zlevelList[i]; |
| var layer = this._layers[z]; |
| if (layer.isBuildin) { |
| cb.call(context, layer, z); |
| } |
| } |
| }; |
| Painter.prototype.eachOtherLayer = function (cb, context) { |
| for (var i = 0; i < this._zlevelList.length; i++) { |
| var z = this._zlevelList[i]; |
| var layer = this._layers[z]; |
| if (!layer.isBuildin) { |
| cb.call(context, layer, z); |
| } |
| } |
| }; |
| Painter.prototype.getLayers = function () { |
| return this._layers; |
| }; |
| Painter.prototype._updateLayerStatus = function (list) { |
| var layers = this._layers; |
| var elCounts = {}; |
| this.eachBuildinLayer(function (layer, z) { |
| elCounts[z] = layer.elCount; |
| layer.elCount = 0; |
| }); |
| for (var i = 0, l = list.length; i < l; i++) { |
| var shape = list[i]; |
| var zlevel = shape.zlevel; |
| var layer = layers[zlevel]; |
| if (layer) { |
| layer.elCount++; |
| if (layer.dirty) { |
| continue; |
| } |
| layer.dirty = shape.__dirty; |
| } |
| } |
| this.eachBuildinLayer(function (layer, z) { |
| if (elCounts[z] !== layer.elCount) { |
| layer.dirty = true; |
| } |
| }); |
| }; |
| Painter.prototype.refreshShapes = function (shapeList, callback) { |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| var shape = shapeList[i]; |
| shape.modSelf(); |
| } |
| this.refresh(callback); |
| return this; |
| }; |
| Painter.prototype.setLoadingEffect = function (loadingEffect) { |
| this._loadingEffect = loadingEffect; |
| return this; |
| }; |
| Painter.prototype.clear = function () { |
| this.eachBuildinLayer(this._clearLayer); |
| return this; |
| }; |
| Painter.prototype._clearLayer = function (layer) { |
| layer.clear(); |
| }; |
| Painter.prototype.modLayer = function (zlevel, config) { |
| if (config) { |
| if (!this._layerConfig[zlevel]) { |
| this._layerConfig[zlevel] = config; |
| } else { |
| util.merge(this._layerConfig[zlevel], config, true); |
| } |
| var layer = this._layers[zlevel]; |
| if (layer) { |
| util.merge(layer, this._layerConfig[zlevel], true); |
| } |
| } |
| }; |
| Painter.prototype.delLayer = function (zlevel) { |
| var layer = this._layers[zlevel]; |
| if (!layer) { |
| return; |
| } |
| this.modLayer(zlevel, { |
| position: layer.position, |
| rotation: layer.rotation, |
| scale: layer.scale |
| }); |
| layer.dom.parentNode.removeChild(layer.dom); |
| delete this._layers[zlevel]; |
| this._zlevelList.splice(util.indexOf(this._zlevelList, zlevel), 1); |
| }; |
| Painter.prototype.refreshHover = function () { |
| this.clearHover(); |
| var list = this.storage.getHoverShapes(true); |
| for (var i = 0, l = list.length; i < l; i++) { |
| this._brushHover(list[i]); |
| } |
| var ctx = this._layers.hover.ctx; |
| ctx.flush && ctx.flush(); |
| this.storage.delHover(); |
| return this; |
| }; |
| Painter.prototype.clearHover = function () { |
| var hover = this._layers.hover; |
| hover && hover.clear(); |
| return this; |
| }; |
| Painter.prototype.showLoading = function (loadingEffect) { |
| this._loadingEffect && this._loadingEffect.stop(); |
| loadingEffect && this.setLoadingEffect(loadingEffect); |
| this._loadingEffect.start(this); |
| this.loading = true; |
| return this; |
| }; |
| Painter.prototype.hideLoading = function () { |
| this._loadingEffect.stop(); |
| this.clearHover(); |
| this.loading = false; |
| return this; |
| }; |
| Painter.prototype.isLoading = function () { |
| return this.loading; |
| }; |
| Painter.prototype.resize = function () { |
| var domRoot = this._domRoot; |
| domRoot.style.display = 'none'; |
| var width = this._getWidth(); |
| var height = this._getHeight(); |
| domRoot.style.display = ''; |
| if (this._width != width || height != this._height) { |
| this._width = width; |
| this._height = height; |
| domRoot.style.width = width + 'px'; |
| domRoot.style.height = height + 'px'; |
| for (var id in this._layers) { |
| this._layers[id].resize(width, height); |
| } |
| this.refresh(null, true); |
| } |
| return this; |
| }; |
| Painter.prototype.clearLayer = function (zLevel) { |
| var layer = this._layers[zLevel]; |
| if (layer) { |
| layer.clear(); |
| } |
| }; |
| Painter.prototype.dispose = function () { |
| if (this.isLoading()) { |
| this.hideLoading(); |
| } |
| this.root.innerHTML = ''; |
| this.root = this.storage = this._domRoot = this._layers = null; |
| }; |
| Painter.prototype.getDomHover = function () { |
| return this._layers.hover.dom; |
| }; |
| Painter.prototype.toDataURL = function (type, backgroundColor, args) { |
| if (window['G_vmlCanvasManager']) { |
| return null; |
| } |
| var imageLayer = new Layer('image', this); |
| this._bgDom.appendChild(imageLayer.dom); |
| imageLayer.initContext(); |
| var ctx = imageLayer.ctx; |
| imageLayer.clearColor = backgroundColor || '#fff'; |
| imageLayer.clear(); |
| var self = this; |
| this.storage.iterShape(function (shape) { |
| if (!shape.invisible) { |
| if (!shape.onbrush || shape.onbrush && !shape.onbrush(ctx, false)) { |
| if (config.catchBrushException) { |
| try { |
| shape.brush(ctx, false, self.refreshNextFrame); |
| } catch (error) { |
| log(error, 'brush error of ' + shape.type, shape); |
| } |
| } else { |
| shape.brush(ctx, false, self.refreshNextFrame); |
| } |
| } |
| } |
| }, { |
| normal: 'up', |
| update: true |
| }); |
| var image = imageLayer.dom.toDataURL(type, args); |
| ctx = null; |
| this._bgDom.removeChild(imageLayer.dom); |
| return image; |
| }; |
| Painter.prototype.getWidth = function () { |
| return this._width; |
| }; |
| Painter.prototype.getHeight = function () { |
| return this._height; |
| }; |
| Painter.prototype._getWidth = function () { |
| var root = this.root; |
| var stl = root.currentStyle || document.defaultView.getComputedStyle(root); |
| return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0; |
| }; |
| Painter.prototype._getHeight = function () { |
| var root = this.root; |
| var stl = root.currentStyle || document.defaultView.getComputedStyle(root); |
| return ((root.clientHeight || parseInt(stl.height, 10)) - parseInt(stl.paddingTop, 10) - parseInt(stl.paddingBottom, 10)).toFixed(0) - 0; |
| }; |
| Painter.prototype._brushHover = function (shape) { |
| var ctx = this._layers.hover.ctx; |
| if (!shape.onbrush || shape.onbrush && !shape.onbrush(ctx, true)) { |
| var layer = this.getLayer(shape.zlevel); |
| if (layer.needTransform) { |
| ctx.save(); |
| layer.setTransform(ctx); |
| } |
| if (config.catchBrushException) { |
| try { |
| shape.brush(ctx, true, this.refreshNextFrame); |
| } catch (error) { |
| log(error, 'hoverBrush error of ' + shape.type, shape); |
| } |
| } else { |
| shape.brush(ctx, true, this.refreshNextFrame); |
| } |
| if (layer.needTransform) { |
| ctx.restore(); |
| } |
| } |
| }; |
| Painter.prototype._shapeToImage = function (id, shape, width, height, devicePixelRatio) { |
| var canvas = document.createElement('canvas'); |
| var ctx = canvas.getContext('2d'); |
| canvas.style.width = width + 'px'; |
| canvas.style.height = height + 'px'; |
| canvas.setAttribute('width', width * devicePixelRatio); |
| canvas.setAttribute('height', height * devicePixelRatio); |
| ctx.clearRect(0, 0, width * devicePixelRatio, height * devicePixelRatio); |
| var shapeTransform = { |
| position: shape.position, |
| rotation: shape.rotation, |
| scale: shape.scale |
| }; |
| shape.position = [ |
| 0, |
| 0, |
| 0 |
| ]; |
| shape.rotation = 0; |
| shape.scale = [ |
| 1, |
| 1 |
| ]; |
| if (shape) { |
| shape.brush(ctx, false); |
| } |
| var ImageShape = require('./shape/Image'); |
| var imgShape = new ImageShape({ |
| id: id, |
| style: { |
| x: 0, |
| y: 0, |
| image: canvas |
| } |
| }); |
| if (shapeTransform.position != null) { |
| imgShape.position = shape.position = shapeTransform.position; |
| } |
| if (shapeTransform.rotation != null) { |
| imgShape.rotation = shape.rotation = shapeTransform.rotation; |
| } |
| if (shapeTransform.scale != null) { |
| imgShape.scale = shape.scale = shapeTransform.scale; |
| } |
| return imgShape; |
| }; |
| Painter.prototype._createShapeToImageProcessor = function () { |
| if (window['G_vmlCanvasManager']) { |
| return doNothing; |
| } |
| var me = this; |
| return function (id, e, width, height) { |
| return me._shapeToImage(id, e, width, height, config.devicePixelRatio); |
| }; |
| }; |
| return Painter; |
| });define('zrender/Storage', [ |
| 'require', |
| './tool/util', |
| './Group' |
| ], function (require) { |
| 'use strict'; |
| var util = require('./tool/util'); |
| var Group = require('./Group'); |
| var defaultIterateOption = { |
| hover: false, |
| normal: 'down', |
| update: false |
| }; |
| function shapeCompareFunc(a, b) { |
| if (a.zlevel == b.zlevel) { |
| if (a.z == b.z) { |
| return a.__renderidx - b.__renderidx; |
| } |
| return a.z - b.z; |
| } |
| return a.zlevel - b.zlevel; |
| } |
| var Storage = function () { |
| this._elements = {}; |
| this._hoverElements = []; |
| this._roots = []; |
| this._shapeList = []; |
| this._shapeListOffset = 0; |
| }; |
| Storage.prototype.iterShape = function (fun, option) { |
| if (!option) { |
| option = defaultIterateOption; |
| } |
| if (option.hover) { |
| for (var i = 0, l = this._hoverElements.length; i < l; i++) { |
| var el = this._hoverElements[i]; |
| el.updateTransform(); |
| if (fun(el)) { |
| return this; |
| } |
| } |
| } |
| if (option.update) { |
| this.updateShapeList(); |
| } |
| switch (option.normal) { |
| case 'down': |
| var l = this._shapeList.length; |
| while (l--) { |
| if (fun(this._shapeList[l])) { |
| return this; |
| } |
| } |
| break; |
| default: |
| for (var i = 0, l = this._shapeList.length; i < l; i++) { |
| if (fun(this._shapeList[i])) { |
| return this; |
| } |
| } |
| break; |
| } |
| return this; |
| }; |
| Storage.prototype.getHoverShapes = function (update) { |
| var hoverElements = []; |
| for (var i = 0, l = this._hoverElements.length; i < l; i++) { |
| hoverElements.push(this._hoverElements[i]); |
| var target = this._hoverElements[i].hoverConnect; |
| if (target) { |
| var shape; |
| target = target instanceof Array ? target : [target]; |
| for (var j = 0, k = target.length; j < k; j++) { |
| shape = target[j].id ? target[j] : this.get(target[j]); |
| if (shape) { |
| hoverElements.push(shape); |
| } |
| } |
| } |
| } |
| hoverElements.sort(shapeCompareFunc); |
| if (update) { |
| for (var i = 0, l = hoverElements.length; i < l; i++) { |
| hoverElements[i].updateTransform(); |
| } |
| } |
| return hoverElements; |
| }; |
| Storage.prototype.getShapeList = function (update) { |
| if (update) { |
| this.updateShapeList(); |
| } |
| return this._shapeList; |
| }; |
| Storage.prototype.updateShapeList = function () { |
| this._shapeListOffset = 0; |
| for (var i = 0, len = this._roots.length; i < len; i++) { |
| var root = this._roots[i]; |
| this._updateAndAddShape(root); |
| } |
| this._shapeList.length = this._shapeListOffset; |
| for (var i = 0, len = this._shapeList.length; i < len; i++) { |
| this._shapeList[i].__renderidx = i; |
| } |
| this._shapeList.sort(shapeCompareFunc); |
| }; |
| Storage.prototype._updateAndAddShape = function (el, clipShapes) { |
| if (el.ignore) { |
| return; |
| } |
| el.updateTransform(); |
| if (el.clipShape) { |
| el.clipShape.parent = el; |
| el.clipShape.updateTransform(); |
| if (clipShapes) { |
| clipShapes = clipShapes.slice(); |
| clipShapes.push(el.clipShape); |
| } else { |
| clipShapes = [el.clipShape]; |
| } |
| } |
| if (el.type == 'group') { |
| for (var i = 0; i < el._children.length; i++) { |
| var child = el._children[i]; |
| child.__dirty = el.__dirty || child.__dirty; |
| this._updateAndAddShape(child, clipShapes); |
| } |
| el.__dirty = false; |
| } else { |
| el.__clipShapes = clipShapes; |
| this._shapeList[this._shapeListOffset++] = el; |
| } |
| }; |
| Storage.prototype.mod = function (el, params) { |
| if (typeof el === 'string') { |
| el = this._elements[el]; |
| } |
| if (el) { |
| el.modSelf(); |
| if (params) { |
| if (params.parent || params._storage || params.__clipShapes) { |
| var target = {}; |
| for (var name in params) { |
| if (name === 'parent' || name === '_storage' || name === '__clipShapes') { |
| continue; |
| } |
| if (params.hasOwnProperty(name)) { |
| target[name] = params[name]; |
| } |
| } |
| util.merge(el, target, true); |
| } else { |
| util.merge(el, params, true); |
| } |
| } |
| } |
| return this; |
| }; |
| Storage.prototype.drift = function (shapeId, dx, dy) { |
| var shape = this._elements[shapeId]; |
| if (shape) { |
| shape.needTransform = true; |
| if (shape.draggable === 'horizontal') { |
| dy = 0; |
| } else if (shape.draggable === 'vertical') { |
| dx = 0; |
| } |
| if (!shape.ondrift || shape.ondrift && !shape.ondrift(dx, dy)) { |
| shape.drift(dx, dy); |
| } |
| } |
| return this; |
| }; |
| Storage.prototype.addHover = function (shape) { |
| shape.updateNeedTransform(); |
| this._hoverElements.push(shape); |
| return this; |
| }; |
| Storage.prototype.delHover = function () { |
| this._hoverElements = []; |
| return this; |
| }; |
| Storage.prototype.hasHoverShape = function () { |
| return this._hoverElements.length > 0; |
| }; |
| Storage.prototype.addRoot = function (el) { |
| if (this._elements[el.id]) { |
| return; |
| } |
| if (el instanceof Group) { |
| el.addChildrenToStorage(this); |
| } |
| this.addToMap(el); |
| this._roots.push(el); |
| }; |
| Storage.prototype.delRoot = function (elId) { |
| if (typeof elId == 'undefined') { |
| for (var i = 0; i < this._roots.length; i++) { |
| var root = this._roots[i]; |
| if (root instanceof Group) { |
| root.delChildrenFromStorage(this); |
| } |
| } |
| this._elements = {}; |
| this._hoverElements = []; |
| this._roots = []; |
| this._shapeList = []; |
| this._shapeListOffset = 0; |
| return; |
| } |
| if (elId instanceof Array) { |
| for (var i = 0, l = elId.length; i < l; i++) { |
| this.delRoot(elId[i]); |
| } |
| return; |
| } |
| var el; |
| if (typeof elId == 'string') { |
| el = this._elements[elId]; |
| } else { |
| el = elId; |
| } |
| var idx = util.indexOf(this._roots, el); |
| if (idx >= 0) { |
| this.delFromMap(el.id); |
| this._roots.splice(idx, 1); |
| if (el instanceof Group) { |
| el.delChildrenFromStorage(this); |
| } |
| } |
| }; |
| Storage.prototype.addToMap = function (el) { |
| if (el instanceof Group) { |
| el._storage = this; |
| } |
| el.modSelf(); |
| this._elements[el.id] = el; |
| return this; |
| }; |
| Storage.prototype.get = function (elId) { |
| return this._elements[elId]; |
| }; |
| Storage.prototype.delFromMap = function (elId) { |
| var el = this._elements[elId]; |
| if (el) { |
| delete this._elements[elId]; |
| if (el instanceof Group) { |
| el._storage = null; |
| } |
| } |
| return this; |
| }; |
| Storage.prototype.dispose = function () { |
| this._elements = this._renderList = this._roots = this._hoverElements = null; |
| }; |
| return Storage; |
| });define('zrender/animation/Animation', [ |
| 'require', |
| './Clip', |
| '../tool/color', |
| '../tool/util', |
| '../tool/event' |
| ], function (require) { |
| 'use strict'; |
| var Clip = require('./Clip'); |
| var color = require('../tool/color'); |
| var util = require('../tool/util'); |
| var Dispatcher = require('../tool/event').Dispatcher; |
| var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (func) { |
| setTimeout(func, 16); |
| }; |
| var arraySlice = Array.prototype.slice; |
| var Animation = function (options) { |
| options = options || {}; |
| this.stage = options.stage || {}; |
| this.onframe = options.onframe || function () { |
| }; |
| this._clips = []; |
| this._running = false; |
| this._time = 0; |
| Dispatcher.call(this); |
| }; |
| Animation.prototype = { |
| add: function (clip) { |
| this._clips.push(clip); |
| }, |
| remove: function (clip) { |
| if (clip.__inStep) { |
| clip.__needsRemove = true; |
| } else { |
| var idx = util.indexOf(this._clips, clip); |
| if (idx >= 0) { |
| this._clips.splice(idx, 1); |
| } |
| } |
| }, |
| _update: function () { |
| var time = new Date().getTime(); |
| var delta = time - this._time; |
| var clips = this._clips; |
| var len = clips.length; |
| var deferredEvents = []; |
| var deferredClips = []; |
| for (var i = 0; i < len; i++) { |
| var clip = clips[i]; |
| clip.__inStep = true; |
| var e = clip.step(time); |
| clip.__inStep = false; |
| if (e) { |
| deferredEvents.push(e); |
| deferredClips.push(clip); |
| } |
| } |
| for (var i = 0; i < len;) { |
| if (clips[i].__needsRemove) { |
| clips[i] = clips[len - 1]; |
| clips.pop(); |
| len--; |
| } else { |
| i++; |
| } |
| } |
| len = deferredEvents.length; |
| for (var i = 0; i < len; i++) { |
| deferredClips[i].fire(deferredEvents[i]); |
| } |
| this._time = time; |
| this.onframe(delta); |
| this.dispatch('frame', delta); |
| if (this.stage.update) { |
| this.stage.update(); |
| } |
| }, |
| start: function () { |
| var self = this; |
| this._running = true; |
| function step() { |
| if (self._running) { |
| requestAnimationFrame(step); |
| self._update(); |
| } |
| } |
| this._time = new Date().getTime(); |
| requestAnimationFrame(step); |
| }, |
| stop: function () { |
| this._running = false; |
| }, |
| clear: function () { |
| this._clips = []; |
| }, |
| animate: function (target, options) { |
| options = options || {}; |
| var deferred = new Animator(target, options.loop, options.getter, options.setter); |
| deferred.animation = this; |
| return deferred; |
| }, |
| constructor: Animation |
| }; |
| util.merge(Animation.prototype, Dispatcher.prototype, true); |
| function _defaultGetter(target, key) { |
| return target[key]; |
| } |
| function _defaultSetter(target, key, value) { |
| target[key] = value; |
| } |
| function _interpolateNumber(p0, p1, percent) { |
| return (p1 - p0) * percent + p0; |
| } |
| function _interpolateArray(p0, p1, percent, out, arrDim) { |
| var len = p0.length; |
| if (arrDim == 1) { |
| for (var i = 0; i < len; i++) { |
| out[i] = _interpolateNumber(p0[i], p1[i], percent); |
| } |
| } else { |
| var len2 = p0[0].length; |
| for (var i = 0; i < len; i++) { |
| for (var j = 0; j < len2; j++) { |
| out[i][j] = _interpolateNumber(p0[i][j], p1[i][j], percent); |
| } |
| } |
| } |
| } |
| function _isArrayLike(data) { |
| switch (typeof data) { |
| case 'undefined': |
| case 'string': |
| return false; |
| } |
| return typeof data.length !== 'undefined'; |
| } |
| function _catmullRomInterpolateArray(p0, p1, p2, p3, t, t2, t3, out, arrDim) { |
| var len = p0.length; |
| if (arrDim == 1) { |
| for (var i = 0; i < len; i++) { |
| out[i] = _catmullRomInterpolate(p0[i], p1[i], p2[i], p3[i], t, t2, t3); |
| } |
| } else { |
| var len2 = p0[0].length; |
| for (var i = 0; i < len; i++) { |
| for (var j = 0; j < len2; j++) { |
| out[i][j] = _catmullRomInterpolate(p0[i][j], p1[i][j], p2[i][j], p3[i][j], t, t2, t3); |
| } |
| } |
| } |
| } |
| function _catmullRomInterpolate(p0, p1, p2, p3, t, t2, t3) { |
| var v0 = (p2 - p0) * 0.5; |
| var v1 = (p3 - p1) * 0.5; |
| return (2 * (p1 - p2) + v0 + v1) * t3 + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + v0 * t + p1; |
| } |
| function _cloneValue(value) { |
| if (_isArrayLike(value)) { |
| var len = value.length; |
| if (_isArrayLike(value[0])) { |
| var ret = []; |
| for (var i = 0; i < len; i++) { |
| ret.push(arraySlice.call(value[i])); |
| } |
| return ret; |
| } else { |
| return arraySlice.call(value); |
| } |
| } else { |
| return value; |
| } |
| } |
| function rgba2String(rgba) { |
| rgba[0] = Math.floor(rgba[0]); |
| rgba[1] = Math.floor(rgba[1]); |
| rgba[2] = Math.floor(rgba[2]); |
| return 'rgba(' + rgba.join(',') + ')'; |
| } |
| var Animator = function (target, loop, getter, setter) { |
| this._tracks = {}; |
| this._target = target; |
| this._loop = loop || false; |
| this._getter = getter || _defaultGetter; |
| this._setter = setter || _defaultSetter; |
| this._clipCount = 0; |
| this._delay = 0; |
| this._doneList = []; |
| this._onframeList = []; |
| this._clipList = []; |
| }; |
| Animator.prototype = { |
| when: function (time, props) { |
| for (var propName in props) { |
| if (!this._tracks[propName]) { |
| this._tracks[propName] = []; |
| if (time !== 0) { |
| this._tracks[propName].push({ |
| time: 0, |
| value: _cloneValue(this._getter(this._target, propName)) |
| }); |
| } |
| } |
| this._tracks[propName].push({ |
| time: parseInt(time, 10), |
| value: props[propName] |
| }); |
| } |
| return this; |
| }, |
| during: function (callback) { |
| this._onframeList.push(callback); |
| return this; |
| }, |
| start: function (easing) { |
| var self = this; |
| var setter = this._setter; |
| var getter = this._getter; |
| var useSpline = easing === 'spline'; |
| var ondestroy = function () { |
| self._clipCount--; |
| if (self._clipCount === 0) { |
| self._tracks = {}; |
| var len = self._doneList.length; |
| for (var i = 0; i < len; i++) { |
| self._doneList[i].call(self); |
| } |
| } |
| }; |
| var createTrackClip = function (keyframes, propName) { |
| var trackLen = keyframes.length; |
| if (!trackLen) { |
| return; |
| } |
| var firstVal = keyframes[0].value; |
| var isValueArray = _isArrayLike(firstVal); |
| var isValueColor = false; |
| var arrDim = isValueArray && _isArrayLike(firstVal[0]) ? 2 : 1; |
| keyframes.sort(function (a, b) { |
| return a.time - b.time; |
| }); |
| var trackMaxTime; |
| if (trackLen) { |
| trackMaxTime = keyframes[trackLen - 1].time; |
| } else { |
| return; |
| } |
| var kfPercents = []; |
| var kfValues = []; |
| for (var i = 0; i < trackLen; i++) { |
| kfPercents.push(keyframes[i].time / trackMaxTime); |
| var value = keyframes[i].value; |
| if (typeof value == 'string') { |
| value = color.toArray(value); |
| if (value.length === 0) { |
| value[0] = value[1] = value[2] = 0; |
| value[3] = 1; |
| } |
| isValueColor = true; |
| } |
| kfValues.push(value); |
| } |
| var cacheKey = 0; |
| var cachePercent = 0; |
| var start; |
| var i; |
| var w; |
| var p0; |
| var p1; |
| var p2; |
| var p3; |
| if (isValueColor) { |
| var rgba = [ |
| 0, |
| 0, |
| 0, |
| 0 |
| ]; |
| } |
| var onframe = function (target, percent) { |
| if (percent < cachePercent) { |
| start = Math.min(cacheKey + 1, trackLen - 1); |
| for (i = start; i >= 0; i--) { |
| if (kfPercents[i] <= percent) { |
| break; |
| } |
| } |
| i = Math.min(i, trackLen - 2); |
| } else { |
| for (i = cacheKey; i < trackLen; i++) { |
| if (kfPercents[i] > percent) { |
| break; |
| } |
| } |
| i = Math.min(i - 1, trackLen - 2); |
| } |
| cacheKey = i; |
| cachePercent = percent; |
| var range = kfPercents[i + 1] - kfPercents[i]; |
| if (range === 0) { |
| return; |
| } else { |
| w = (percent - kfPercents[i]) / range; |
| } |
| if (useSpline) { |
| p1 = kfValues[i]; |
| p0 = kfValues[i === 0 ? i : i - 1]; |
| p2 = kfValues[i > trackLen - 2 ? trackLen - 1 : i + 1]; |
| p3 = kfValues[i > trackLen - 3 ? trackLen - 1 : i + 2]; |
| if (isValueArray) { |
| _catmullRomInterpolateArray(p0, p1, p2, p3, w, w * w, w * w * w, getter(target, propName), arrDim); |
| } else { |
| var value; |
| if (isValueColor) { |
| value = _catmullRomInterpolateArray(p0, p1, p2, p3, w, w * w, w * w * w, rgba, 1); |
| value = rgba2String(rgba); |
| } else { |
| value = _catmullRomInterpolate(p0, p1, p2, p3, w, w * w, w * w * w); |
| } |
| setter(target, propName, value); |
| } |
| } else { |
| if (isValueArray) { |
| _interpolateArray(kfValues[i], kfValues[i + 1], w, getter(target, propName), arrDim); |
| } else { |
| var value; |
| if (isValueColor) { |
| _interpolateArray(kfValues[i], kfValues[i + 1], w, rgba, 1); |
| value = rgba2String(rgba); |
| } else { |
| value = _interpolateNumber(kfValues[i], kfValues[i + 1], w); |
| } |
| setter(target, propName, value); |
| } |
| } |
| for (i = 0; i < self._onframeList.length; i++) { |
| self._onframeList[i](target, percent); |
| } |
| }; |
| var clip = new Clip({ |
| target: self._target, |
| life: trackMaxTime, |
| loop: self._loop, |
| delay: self._delay, |
| onframe: onframe, |
| ondestroy: ondestroy |
| }); |
| if (easing && easing !== 'spline') { |
| clip.easing = easing; |
| } |
| self._clipList.push(clip); |
| self._clipCount++; |
| self.animation.add(clip); |
| }; |
| for (var propName in this._tracks) { |
| createTrackClip(this._tracks[propName], propName); |
| } |
| return this; |
| }, |
| stop: function () { |
| for (var i = 0; i < this._clipList.length; i++) { |
| var clip = this._clipList[i]; |
| this.animation.remove(clip); |
| } |
| this._clipList = []; |
| }, |
| delay: function (time) { |
| this._delay = time; |
| return this; |
| }, |
| done: function (cb) { |
| if (cb) { |
| this._doneList.push(cb); |
| } |
| return this; |
| } |
| }; |
| return Animation; |
| });define('zrender/tool/vector', [], function () { |
| var ArrayCtor = typeof Float32Array === 'undefined' ? Array : Float32Array; |
| var vector = { |
| create: function (x, y) { |
| var out = new ArrayCtor(2); |
| out[0] = x || 0; |
| out[1] = y || 0; |
| return out; |
| }, |
| copy: function (out, v) { |
| out[0] = v[0]; |
| out[1] = v[1]; |
| return out; |
| }, |
| clone: function (v) { |
| var out = new ArrayCtor(2); |
| out[0] = v[0]; |
| out[1] = v[1]; |
| return out; |
| }, |
| set: function (out, a, b) { |
| out[0] = a; |
| out[1] = b; |
| return out; |
| }, |
| add: function (out, v1, v2) { |
| out[0] = v1[0] + v2[0]; |
| out[1] = v1[1] + v2[1]; |
| return out; |
| }, |
| scaleAndAdd: function (out, v1, v2, a) { |
| out[0] = v1[0] + v2[0] * a; |
| out[1] = v1[1] + v2[1] * a; |
| return out; |
| }, |
| sub: function (out, v1, v2) { |
| out[0] = v1[0] - v2[0]; |
| out[1] = v1[1] - v2[1]; |
| return out; |
| }, |
| len: function (v) { |
| return Math.sqrt(this.lenSquare(v)); |
| }, |
| lenSquare: function (v) { |
| return v[0] * v[0] + v[1] * v[1]; |
| }, |
| mul: function (out, v1, v2) { |
| out[0] = v1[0] * v2[0]; |
| out[1] = v1[1] * v2[1]; |
| return out; |
| }, |
| div: function (out, v1, v2) { |
| out[0] = v1[0] / v2[0]; |
| out[1] = v1[1] / v2[1]; |
| return out; |
| }, |
| dot: function (v1, v2) { |
| return v1[0] * v2[0] + v1[1] * v2[1]; |
| }, |
| scale: function (out, v, s) { |
| out[0] = v[0] * s; |
| out[1] = v[1] * s; |
| return out; |
| }, |
| normalize: function (out, v) { |
| var d = vector.len(v); |
| if (d === 0) { |
| out[0] = 0; |
| out[1] = 0; |
| } else { |
| out[0] = v[0] / d; |
| out[1] = v[1] / d; |
| } |
| return out; |
| }, |
| distance: function (v1, v2) { |
| return Math.sqrt((v1[0] - v2[0]) * (v1[0] - v2[0]) + (v1[1] - v2[1]) * (v1[1] - v2[1])); |
| }, |
| distanceSquare: function (v1, v2) { |
| return (v1[0] - v2[0]) * (v1[0] - v2[0]) + (v1[1] - v2[1]) * (v1[1] - v2[1]); |
| }, |
| negate: function (out, v) { |
| out[0] = -v[0]; |
| out[1] = -v[1]; |
| return out; |
| }, |
| lerp: function (out, v1, v2, t) { |
| out[0] = v1[0] + t * (v2[0] - v1[0]); |
| out[1] = v1[1] + t * (v2[1] - v1[1]); |
| return out; |
| }, |
| applyTransform: function (out, v, m) { |
| var x = v[0]; |
| var y = v[1]; |
| out[0] = m[0] * x + m[2] * y + m[4]; |
| out[1] = m[1] * x + m[3] * y + m[5]; |
| return out; |
| }, |
| min: function (out, v1, v2) { |
| out[0] = Math.min(v1[0], v2[0]); |
| out[1] = Math.min(v1[1], v2[1]); |
| return out; |
| }, |
| max: function (out, v1, v2) { |
| out[0] = Math.max(v1[0], v2[0]); |
| out[1] = Math.max(v1[1], v2[1]); |
| return out; |
| } |
| }; |
| vector.length = vector.len; |
| vector.lengthSquare = vector.lenSquare; |
| vector.dist = vector.distance; |
| vector.distSquare = vector.distanceSquare; |
| return vector; |
| });define('zrender/tool/matrix', [], function () { |
| var ArrayCtor = typeof Float32Array === 'undefined' ? Array : Float32Array; |
| var matrix = { |
| create: function () { |
| var out = new ArrayCtor(6); |
| matrix.identity(out); |
| return out; |
| }, |
| identity: function (out) { |
| out[0] = 1; |
| out[1] = 0; |
| out[2] = 0; |
| out[3] = 1; |
| out[4] = 0; |
| out[5] = 0; |
| return out; |
| }, |
| copy: function (out, m) { |
| out[0] = m[0]; |
| out[1] = m[1]; |
| out[2] = m[2]; |
| out[3] = m[3]; |
| out[4] = m[4]; |
| out[5] = m[5]; |
| return out; |
| }, |
| mul: function (out, m1, m2) { |
| out[0] = m1[0] * m2[0] + m1[2] * m2[1]; |
| out[1] = m1[1] * m2[0] + m1[3] * m2[1]; |
| out[2] = m1[0] * m2[2] + m1[2] * m2[3]; |
| out[3] = m1[1] * m2[2] + m1[3] * m2[3]; |
| out[4] = m1[0] * m2[4] + m1[2] * m2[5] + m1[4]; |
| out[5] = m1[1] * m2[4] + m1[3] * m2[5] + m1[5]; |
| return out; |
| }, |
| translate: function (out, a, v) { |
| out[0] = a[0]; |
| out[1] = a[1]; |
| out[2] = a[2]; |
| out[3] = a[3]; |
| out[4] = a[4] + v[0]; |
| out[5] = a[5] + v[1]; |
| return out; |
| }, |
| rotate: function (out, a, rad) { |
| var aa = a[0]; |
| var ac = a[2]; |
| var atx = a[4]; |
| var ab = a[1]; |
| var ad = a[3]; |
| var aty = a[5]; |
| var st = Math.sin(rad); |
| var ct = Math.cos(rad); |
| out[0] = aa * ct + ab * st; |
| out[1] = -aa * st + ab * ct; |
| out[2] = ac * ct + ad * st; |
| out[3] = -ac * st + ct * ad; |
| out[4] = ct * atx + st * aty; |
| out[5] = ct * aty - st * atx; |
| return out; |
| }, |
| scale: function (out, a, v) { |
| var vx = v[0]; |
| var vy = v[1]; |
| out[0] = a[0] * vx; |
| out[1] = a[1] * vy; |
| out[2] = a[2] * vx; |
| out[3] = a[3] * vy; |
| out[4] = a[4] * vx; |
| out[5] = a[5] * vy; |
| return out; |
| }, |
| invert: function (out, a) { |
| var aa = a[0]; |
| var ac = a[2]; |
| var atx = a[4]; |
| var ab = a[1]; |
| var ad = a[3]; |
| var aty = a[5]; |
| var det = aa * ad - ab * ac; |
| if (!det) { |
| return null; |
| } |
| det = 1 / det; |
| out[0] = ad * det; |
| out[1] = -ab * det; |
| out[2] = -ac * det; |
| out[3] = aa * det; |
| out[4] = (ac * aty - ad * atx) * det; |
| out[5] = (ab * atx - aa * aty) * det; |
| return out; |
| } |
| }; |
| return matrix; |
| });define('zrender/loadingEffect/Base', [ |
| 'require', |
| '../tool/util', |
| '../shape/Text', |
| '../shape/Rectangle' |
| ], function (require) { |
| var util = require('../tool/util'); |
| var TextShape = require('../shape/Text'); |
| var RectangleShape = require('../shape/Rectangle'); |
| var DEFAULT_TEXT = 'Loading...'; |
| var DEFAULT_TEXT_FONT = 'normal 16px Arial'; |
| function Base(options) { |
| this.setOptions(options); |
| } |
| Base.prototype.createTextShape = function (textStyle) { |
| return new TextShape({ |
| highlightStyle: util.merge({ |
| x: this.canvasWidth / 2, |
| y: this.canvasHeight / 2, |
| text: DEFAULT_TEXT, |
| textAlign: 'center', |
| textBaseline: 'middle', |
| textFont: DEFAULT_TEXT_FONT, |
| color: '#333', |
| brushType: 'fill' |
| }, textStyle, true) |
| }); |
| }; |
| Base.prototype.createBackgroundShape = function (color) { |
| return new RectangleShape({ |
| highlightStyle: { |
| x: 0, |
| y: 0, |
| width: this.canvasWidth, |
| height: this.canvasHeight, |
| brushType: 'fill', |
| color: color |
| } |
| }); |
| }; |
| Base.prototype.start = function (painter) { |
| this.canvasWidth = painter._width; |
| this.canvasHeight = painter._height; |
| function addShapeHandle(param) { |
| painter.storage.addHover(param); |
| } |
| function refreshHandle() { |
| painter.refreshHover(); |
| } |
| this.loadingTimer = this._start(addShapeHandle, refreshHandle); |
| }; |
| Base.prototype._start = function () { |
| return setInterval(function () { |
| }, 10000); |
| }; |
| Base.prototype.stop = function () { |
| clearInterval(this.loadingTimer); |
| }; |
| Base.prototype.setOptions = function (options) { |
| this.options = options || {}; |
| }; |
| Base.prototype.adjust = function (value, region) { |
| if (value <= region[0]) { |
| value = region[0]; |
| } else if (value >= region[1]) { |
| value = region[1]; |
| } |
| return value; |
| }; |
| Base.prototype.getLocation = function (loc, totalWidth, totalHeight) { |
| var x = loc.x != null ? loc.x : 'center'; |
| switch (x) { |
| case 'center': |
| x = Math.floor((this.canvasWidth - totalWidth) / 2); |
| break; |
| case 'left': |
| x = 0; |
| break; |
| case 'right': |
| x = this.canvasWidth - totalWidth; |
| break; |
| } |
| var y = loc.y != null ? loc.y : 'center'; |
| switch (y) { |
| case 'center': |
| y = Math.floor((this.canvasHeight - totalHeight) / 2); |
| break; |
| case 'top': |
| y = 0; |
| break; |
| case 'bottom': |
| y = this.canvasHeight - totalHeight; |
| break; |
| } |
| return { |
| x: x, |
| y: y, |
| width: totalWidth, |
| height: totalHeight |
| }; |
| }; |
| return Base; |
| });define('zrender/Layer', [ |
| 'require', |
| './mixin/Transformable', |
| './tool/util', |
| './config' |
| ], function (require) { |
| var Transformable = require('./mixin/Transformable'); |
| var util = require('./tool/util'); |
| var vmlCanvasManager = window['G_vmlCanvasManager']; |
| var config = require('./config'); |
| function returnFalse() { |
| return false; |
| } |
| function createDom(id, type, painter) { |
| var newDom = document.createElement(type); |
| var width = painter.getWidth(); |
| var height = painter.getHeight(); |
| newDom.style.position = 'absolute'; |
| newDom.style.left = 0; |
| newDom.style.top = 0; |
| newDom.style.width = width + 'px'; |
| newDom.style.height = height + 'px'; |
| newDom.width = width * config.devicePixelRatio; |
| newDom.height = height * config.devicePixelRatio; |
| newDom.setAttribute('data-zr-dom-id', id); |
| return newDom; |
| } |
| var Layer = function (id, painter) { |
| this.id = id; |
| this.dom = createDom(id, 'canvas', painter); |
| this.dom.onselectstart = returnFalse; |
| this.dom.style['-webkit-user-select'] = 'none'; |
| this.dom.style['user-select'] = 'none'; |
| this.dom.style['-webkit-touch-callout'] = 'none'; |
| this.dom.style['-webkit-tap-highlight-color'] = 'rgba(0,0,0,0)'; |
| this.dom.className = config.elementClassName; |
| vmlCanvasManager && vmlCanvasManager.initElement(this.dom); |
| this.domBack = null; |
| this.ctxBack = null; |
| this.painter = painter; |
| this.unusedCount = 0; |
| this.config = null; |
| this.dirty = true; |
| this.elCount = 0; |
| this.clearColor = 0; |
| this.motionBlur = false; |
| this.lastFrameAlpha = 0.7; |
| this.zoomable = false; |
| this.panable = false; |
| this.maxZoom = Infinity; |
| this.minZoom = 0; |
| Transformable.call(this); |
| }; |
| Layer.prototype.initContext = function () { |
| this.ctx = this.dom.getContext('2d'); |
| var dpr = config.devicePixelRatio; |
| if (dpr != 1) { |
| this.ctx.scale(dpr, dpr); |
| } |
| }; |
| Layer.prototype.createBackBuffer = function () { |
| if (vmlCanvasManager) { |
| return; |
| } |
| this.domBack = createDom('back-' + this.id, 'canvas', this.painter); |
| this.ctxBack = this.domBack.getContext('2d'); |
| var dpr = config.devicePixelRatio; |
| if (dpr != 1) { |
| this.ctxBack.scale(dpr, dpr); |
| } |
| }; |
| Layer.prototype.resize = function (width, height) { |
| var dpr = config.devicePixelRatio; |
| this.dom.style.width = width + 'px'; |
| this.dom.style.height = height + 'px'; |
| this.dom.setAttribute('width', width * dpr); |
| this.dom.setAttribute('height', height * dpr); |
| if (dpr != 1) { |
| this.ctx.scale(dpr, dpr); |
| } |
| if (this.domBack) { |
| this.domBack.setAttribute('width', width * dpr); |
| this.domBack.setAttribute('height', height * dpr); |
| if (dpr != 1) { |
| this.ctxBack.scale(dpr, dpr); |
| } |
| } |
| }; |
| Layer.prototype.clear = function () { |
| var dom = this.dom; |
| var ctx = this.ctx; |
| var width = dom.width; |
| var height = dom.height; |
| var haveClearColor = this.clearColor && !vmlCanvasManager; |
| var haveMotionBLur = this.motionBlur && !vmlCanvasManager; |
| var lastFrameAlpha = this.lastFrameAlpha; |
| var dpr = config.devicePixelRatio; |
| if (haveMotionBLur) { |
| if (!this.domBack) { |
| this.createBackBuffer(); |
| } |
| this.ctxBack.globalCompositeOperation = 'copy'; |
| this.ctxBack.drawImage(dom, 0, 0, width / dpr, height / dpr); |
| } |
| ctx.clearRect(0, 0, width / dpr, height / dpr); |
| if (haveClearColor) { |
| ctx.save(); |
| ctx.fillStyle = this.clearColor; |
| ctx.fillRect(0, 0, width / dpr, height / dpr); |
| ctx.restore(); |
| } |
| if (haveMotionBLur) { |
| var domBack = this.domBack; |
| ctx.save(); |
| ctx.globalAlpha = lastFrameAlpha; |
| ctx.drawImage(domBack, 0, 0, width / dpr, height / dpr); |
| ctx.restore(); |
| } |
| }; |
| util.merge(Layer.prototype, Transformable.prototype); |
| return Layer; |
| });define('zrender/shape/Text', [ |
| 'require', |
| '../tool/area', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var area = require('../tool/area'); |
| var Base = require('./Base'); |
| var Text = function (options) { |
| Base.call(this, options); |
| }; |
| Text.prototype = { |
| type: 'text', |
| brush: function (ctx, isHighlight) { |
| var style = this.style; |
| if (isHighlight) { |
| style = this.getHighlightStyle(style, this.highlightStyle || {}); |
| } |
| if (typeof style.text == 'undefined' || style.text === false) { |
| return; |
| } |
| ctx.save(); |
| this.doClip(ctx); |
| this.setContext(ctx, style); |
| this.setTransform(ctx); |
| if (style.textFont) { |
| ctx.font = style.textFont; |
| } |
| ctx.textAlign = style.textAlign || 'start'; |
| ctx.textBaseline = style.textBaseline || 'middle'; |
| var text = (style.text + '').split('\n'); |
| var lineHeight = area.getTextHeight('国', style.textFont); |
| var rect = this.getRect(style); |
| var x = style.x; |
| var y; |
| if (style.textBaseline == 'top') { |
| y = rect.y; |
| } else if (style.textBaseline == 'bottom') { |
| y = rect.y + lineHeight; |
| } else { |
| y = rect.y + lineHeight / 2; |
| } |
| for (var i = 0, l = text.length; i < l; i++) { |
| if (style.maxWidth) { |
| switch (style.brushType) { |
| case 'fill': |
| ctx.fillText(text[i], x, y, style.maxWidth); |
| break; |
| case 'stroke': |
| ctx.strokeText(text[i], x, y, style.maxWidth); |
| break; |
| case 'both': |
| ctx.fillText(text[i], x, y, style.maxWidth); |
| ctx.strokeText(text[i], x, y, style.maxWidth); |
| break; |
| default: |
| ctx.fillText(text[i], x, y, style.maxWidth); |
| } |
| } else { |
| switch (style.brushType) { |
| case 'fill': |
| ctx.fillText(text[i], x, y); |
| break; |
| case 'stroke': |
| ctx.strokeText(text[i], x, y); |
| break; |
| case 'both': |
| ctx.fillText(text[i], x, y); |
| ctx.strokeText(text[i], x, y); |
| break; |
| default: |
| ctx.fillText(text[i], x, y); |
| } |
| } |
| y += lineHeight; |
| } |
| ctx.restore(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var width = area.getTextWidth(style.text, style.textFont); |
| var height = area.getTextHeight(style.text, style.textFont); |
| var textX = style.x; |
| if (style.textAlign == 'end' || style.textAlign == 'right') { |
| textX -= width; |
| } else if (style.textAlign == 'center') { |
| textX -= width / 2; |
| } |
| var textY; |
| if (style.textBaseline == 'top') { |
| textY = style.y; |
| } else if (style.textBaseline == 'bottom') { |
| textY = style.y - height; |
| } else { |
| textY = style.y - height / 2; |
| } |
| style.__rect = { |
| x: textX, |
| y: textY, |
| width: width, |
| height: height |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Text, Base); |
| return Text; |
| });define('zrender/shape/Rectangle', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var Rectangle = function (options) { |
| Base.call(this, options); |
| }; |
| Rectangle.prototype = { |
| type: 'rectangle', |
| _buildRadiusPath: function (ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| var r = style.radius; |
| var r1; |
| var r2; |
| var r3; |
| var r4; |
| if (typeof r === 'number') { |
| r1 = r2 = r3 = r4 = r; |
| } else if (r instanceof Array) { |
| if (r.length === 1) { |
| r1 = r2 = r3 = r4 = r[0]; |
| } else if (r.length === 2) { |
| r1 = r3 = r[0]; |
| r2 = r4 = r[1]; |
| } else if (r.length === 3) { |
| r1 = r[0]; |
| r2 = r4 = r[1]; |
| r3 = r[2]; |
| } else { |
| r1 = r[0]; |
| r2 = r[1]; |
| r3 = r[2]; |
| r4 = r[3]; |
| } |
| } else { |
| r1 = r2 = r3 = r4 = 0; |
| } |
| var total; |
| if (r1 + r2 > width) { |
| total = r1 + r2; |
| r1 *= width / total; |
| r2 *= width / total; |
| } |
| if (r3 + r4 > width) { |
| total = r3 + r4; |
| r3 *= width / total; |
| r4 *= width / total; |
| } |
| if (r2 + r3 > height) { |
| total = r2 + r3; |
| r2 *= height / total; |
| r3 *= height / total; |
| } |
| if (r1 + r4 > height) { |
| total = r1 + r4; |
| r1 *= height / total; |
| r4 *= height / total; |
| } |
| ctx.moveTo(x + r1, y); |
| ctx.lineTo(x + width - r2, y); |
| r2 !== 0 && ctx.quadraticCurveTo(x + width, y, x + width, y + r2); |
| ctx.lineTo(x + width, y + height - r3); |
| r3 !== 0 && ctx.quadraticCurveTo(x + width, y + height, x + width - r3, y + height); |
| ctx.lineTo(x + r4, y + height); |
| r4 !== 0 && ctx.quadraticCurveTo(x, y + height, x, y + height - r4); |
| ctx.lineTo(x, y + r1); |
| r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y); |
| }, |
| buildPath: function (ctx, style) { |
| if (!style.radius) { |
| ctx.moveTo(style.x, style.y); |
| ctx.lineTo(style.x + style.width, style.y); |
| ctx.lineTo(style.x + style.width, style.y + style.height); |
| ctx.lineTo(style.x, style.y + style.height); |
| ctx.lineTo(style.x, style.y); |
| } else { |
| this._buildRadiusPath(ctx, style); |
| } |
| ctx.closePath(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var lineWidth; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } else { |
| lineWidth = 0; |
| } |
| style.__rect = { |
| x: Math.round(style.x - lineWidth / 2), |
| y: Math.round(style.y - lineWidth / 2), |
| width: style.width + lineWidth, |
| height: style.height + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Rectangle, Base); |
| return Rectangle; |
| });define('zrender/tool/area', [ |
| 'require', |
| './util', |
| './curve' |
| ], function (require) { |
| 'use strict'; |
| var util = require('./util'); |
| var curve = require('./curve'); |
| var _ctx; |
| var _textWidthCache = {}; |
| var _textHeightCache = {}; |
| var _textWidthCacheCounter = 0; |
| var _textHeightCacheCounter = 0; |
| var TEXT_CACHE_MAX = 5000; |
| var PI2 = Math.PI * 2; |
| function normalizeRadian(angle) { |
| angle %= PI2; |
| if (angle < 0) { |
| angle += PI2; |
| } |
| return angle; |
| } |
| function isInside(shape, area, x, y) { |
| if (!area || !shape) { |
| return false; |
| } |
| var zoneType = shape.type; |
| _ctx = _ctx || util.getContext(); |
| var _mathReturn = _mathMethod(shape, area, x, y); |
| if (typeof _mathReturn != 'undefined') { |
| return _mathReturn; |
| } |
| if (shape.buildPath && _ctx.isPointInPath) { |
| return _buildPathMethod(shape, _ctx, area, x, y); |
| } |
| switch (zoneType) { |
| case 'ellipse': |
| return true; |
| case 'trochoid': |
| var _r = area.location == 'out' ? area.r1 + area.r2 + area.d : area.r1 - area.r2 + area.d; |
| return isInsideCircle(area, x, y, _r); |
| case 'rose': |
| return isInsideCircle(area, x, y, area.maxr); |
| default: |
| return false; |
| } |
| } |
| function _mathMethod(shape, area, x, y) { |
| var zoneType = shape.type; |
| switch (zoneType) { |
| case 'bezier-curve': |
| if (typeof area.cpX2 === 'undefined') { |
| return isInsideQuadraticStroke(area.xStart, area.yStart, area.cpX1, area.cpY1, area.xEnd, area.yEnd, area.lineWidth, x, y); |
| } |
| return isInsideCubicStroke(area.xStart, area.yStart, area.cpX1, area.cpY1, area.cpX2, area.cpY2, area.xEnd, area.yEnd, area.lineWidth, x, y); |
| case 'line': |
| return isInsideLine(area.xStart, area.yStart, area.xEnd, area.yEnd, area.lineWidth, x, y); |
| case 'polyline': |
| return isInsidePolyline(area.pointList, area.lineWidth, x, y); |
| case 'ring': |
| return isInsideRing(area.x, area.y, area.r0, area.r, x, y); |
| case 'circle': |
| return isInsideCircle(area.x, area.y, area.r, x, y); |
| case 'sector': |
| var startAngle = area.startAngle * Math.PI / 180; |
| var endAngle = area.endAngle * Math.PI / 180; |
| if (!area.clockWise) { |
| startAngle = -startAngle; |
| endAngle = -endAngle; |
| } |
| return isInsideSector(area.x, area.y, area.r0, area.r, startAngle, endAngle, !area.clockWise, x, y); |
| case 'path': |
| return area.pathArray && isInsidePath(area.pathArray, Math.max(area.lineWidth, 5), area.brushType, x, y); |
| case 'polygon': |
| case 'star': |
| case 'isogon': |
| return isInsidePolygon(area.pointList, x, y); |
| case 'text': |
| var rect = area.__rect || shape.getRect(area); |
| return isInsideRect(rect.x, rect.y, rect.width, rect.height, x, y); |
| case 'rectangle': |
| case 'image': |
| return isInsideRect(area.x, area.y, area.width, area.height, x, y); |
| } |
| } |
| function _buildPathMethod(shape, context, area, x, y) { |
| context.beginPath(); |
| shape.buildPath(context, area); |
| context.closePath(); |
| return context.isPointInPath(x, y); |
| } |
| function isOutside(shape, area, x, y) { |
| return !isInside(shape, area, x, y); |
| } |
| function isInsideLine(x0, y0, x1, y1, lineWidth, x, y) { |
| if (lineWidth === 0) { |
| return false; |
| } |
| var _l = Math.max(lineWidth, 5); |
| var _a = 0; |
| var _b = x0; |
| if (y > y0 + _l && y > y1 + _l || y < y0 - _l && y < y1 - _l || x > x0 + _l && x > x1 + _l || x < x0 - _l && x < x1 - _l) { |
| return false; |
| } |
| if (x0 !== x1) { |
| _a = (y0 - y1) / (x0 - x1); |
| _b = (x0 * y1 - x1 * y0) / (x0 - x1); |
| } else { |
| return Math.abs(x - x0) <= _l / 2; |
| } |
| var tmp = _a * x - y + _b; |
| var _s = tmp * tmp / (_a * _a + 1); |
| return _s <= _l / 2 * _l / 2; |
| } |
| function isInsideCubicStroke(x0, y0, x1, y1, x2, y2, x3, y3, lineWidth, x, y) { |
| if (lineWidth === 0) { |
| return false; |
| } |
| var _l = Math.max(lineWidth, 5); |
| if (y > y0 + _l && y > y1 + _l && y > y2 + _l && y > y3 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l && y < y3 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l && x > x3 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l && x < x3 - _l) { |
| return false; |
| } |
| var d = curve.cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, null); |
| return d <= _l / 2; |
| } |
| function isInsideQuadraticStroke(x0, y0, x1, y1, x2, y2, lineWidth, x, y) { |
| if (lineWidth === 0) { |
| return false; |
| } |
| var _l = Math.max(lineWidth, 5); |
| if (y > y0 + _l && y > y1 + _l && y > y2 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l) { |
| return false; |
| } |
| var d = curve.quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, null); |
| return d <= _l / 2; |
| } |
| function isInsideArcStroke(cx, cy, r, startAngle, endAngle, anticlockwise, lineWidth, x, y) { |
| if (lineWidth === 0) { |
| return false; |
| } |
| var _l = Math.max(lineWidth, 5); |
| x -= cx; |
| y -= cy; |
| var d = Math.sqrt(x * x + y * y); |
| if (d - _l > r || d + _l < r) { |
| return false; |
| } |
| if (Math.abs(startAngle - endAngle) >= PI2) { |
| return true; |
| } |
| if (anticlockwise) { |
| var tmp = startAngle; |
| startAngle = normalizeRadian(endAngle); |
| endAngle = normalizeRadian(tmp); |
| } else { |
| startAngle = normalizeRadian(startAngle); |
| endAngle = normalizeRadian(endAngle); |
| } |
| if (startAngle > endAngle) { |
| endAngle += PI2; |
| } |
| var angle = Math.atan2(y, x); |
| if (angle < 0) { |
| angle += PI2; |
| } |
| return angle >= startAngle && angle <= endAngle || angle + PI2 >= startAngle && angle + PI2 <= endAngle; |
| } |
| function isInsidePolyline(points, lineWidth, x, y) { |
| var lineWidth = Math.max(lineWidth, 10); |
| for (var i = 0, l = points.length - 1; i < l; i++) { |
| var x0 = points[i][0]; |
| var y0 = points[i][1]; |
| var x1 = points[i + 1][0]; |
| var y1 = points[i + 1][1]; |
| if (isInsideLine(x0, y0, x1, y1, lineWidth, x, y)) { |
| return true; |
| } |
| } |
| return false; |
| } |
| function isInsideRing(cx, cy, r0, r, x, y) { |
| var d = (x - cx) * (x - cx) + (y - cy) * (y - cy); |
| return d < r * r && d > r0 * r0; |
| } |
| function isInsideRect(x0, y0, width, height, x, y) { |
| return x >= x0 && x <= x0 + width && y >= y0 && y <= y0 + height; |
| } |
| function isInsideCircle(x0, y0, r, x, y) { |
| return (x - x0) * (x - x0) + (y - y0) * (y - y0) < r * r; |
| } |
| function isInsideSector(cx, cy, r0, r, startAngle, endAngle, anticlockwise, x, y) { |
| return isInsideArcStroke(cx, cy, (r0 + r) / 2, startAngle, endAngle, anticlockwise, r - r0, x, y); |
| } |
| function isInsidePolygon(points, x, y) { |
| var N = points.length; |
| var w = 0; |
| for (var i = 0, j = N - 1; i < N; i++) { |
| var x0 = points[j][0]; |
| var y0 = points[j][1]; |
| var x1 = points[i][0]; |
| var y1 = points[i][1]; |
| w += windingLine(x0, y0, x1, y1, x, y); |
| j = i; |
| } |
| return w !== 0; |
| } |
| function windingLine(x0, y0, x1, y1, x, y) { |
| if (y > y0 && y > y1 || y < y0 && y < y1) { |
| return 0; |
| } |
| if (y1 == y0) { |
| return 0; |
| } |
| var dir = y1 < y0 ? 1 : -1; |
| var t = (y - y0) / (y1 - y0); |
| var x_ = t * (x1 - x0) + x0; |
| return x_ > x ? dir : 0; |
| } |
| var roots = [ |
| -1, |
| -1, |
| -1 |
| ]; |
| var extrema = [ |
| -1, |
| -1 |
| ]; |
| function swapExtrema() { |
| var tmp = extrema[0]; |
| extrema[0] = extrema[1]; |
| extrema[1] = tmp; |
| } |
| function windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) { |
| if (y > y0 && y > y1 && y > y2 && y > y3 || y < y0 && y < y1 && y < y2 && y < y3) { |
| return 0; |
| } |
| var nRoots = curve.cubicRootAt(y0, y1, y2, y3, y, roots); |
| if (nRoots === 0) { |
| return 0; |
| } else { |
| var w = 0; |
| var nExtrema = -1; |
| var y0_, y1_; |
| for (var i = 0; i < nRoots; i++) { |
| var t = roots[i]; |
| var x_ = curve.cubicAt(x0, x1, x2, x3, t); |
| if (x_ < x) { |
| continue; |
| } |
| if (nExtrema < 0) { |
| nExtrema = curve.cubicExtrema(y0, y1, y2, y3, extrema); |
| if (extrema[1] < extrema[0] && nExtrema > 1) { |
| swapExtrema(); |
| } |
| y0_ = curve.cubicAt(y0, y1, y2, y3, extrema[0]); |
| if (nExtrema > 1) { |
| y1_ = curve.cubicAt(y0, y1, y2, y3, extrema[1]); |
| } |
| } |
| if (nExtrema == 2) { |
| if (t < extrema[0]) { |
| w += y0_ < y0 ? 1 : -1; |
| } else if (t < extrema[1]) { |
| w += y1_ < y0_ ? 1 : -1; |
| } else { |
| w += y3 < y1_ ? 1 : -1; |
| } |
| } else { |
| if (t < extrema[0]) { |
| w += y0_ < y0 ? 1 : -1; |
| } else { |
| w += y3 < y0_ ? 1 : -1; |
| } |
| } |
| } |
| return w; |
| } |
| } |
| function windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) { |
| if (y > y0 && y > y1 && y > y2 || y < y0 && y < y1 && y < y2) { |
| return 0; |
| } |
| var nRoots = curve.quadraticRootAt(y0, y1, y2, y, roots); |
| if (nRoots === 0) { |
| return 0; |
| } else { |
| var t = curve.quadraticExtremum(y0, y1, y2); |
| if (t >= 0 && t <= 1) { |
| var w = 0; |
| var y_ = curve.quadraticAt(y0, y1, y2, t); |
| for (var i = 0; i < nRoots; i++) { |
| var x_ = curve.quadraticAt(x0, x1, x2, roots[i]); |
| if (x_ < x) { |
| continue; |
| } |
| if (roots[i] < t) { |
| w += y_ < y0 ? 1 : -1; |
| } else { |
| w += y2 < y_ ? 1 : -1; |
| } |
| } |
| return w; |
| } else { |
| var x_ = curve.quadraticAt(x0, x1, x2, roots[0]); |
| if (x_ < x) { |
| return 0; |
| } |
| return y2 < y0 ? 1 : -1; |
| } |
| } |
| } |
| function windingArc(cx, cy, r, startAngle, endAngle, anticlockwise, x, y) { |
| y -= cy; |
| if (y > r || y < -r) { |
| return 0; |
| } |
| var tmp = Math.sqrt(r * r - y * y); |
| roots[0] = -tmp; |
| roots[1] = tmp; |
| if (Math.abs(startAngle - endAngle) >= PI2) { |
| startAngle = 0; |
| endAngle = PI2; |
| var dir = anticlockwise ? 1 : -1; |
| if (x >= roots[0] + cx && x <= roots[1] + cx) { |
| return dir; |
| } else { |
| return 0; |
| } |
| } |
| if (anticlockwise) { |
| var tmp = startAngle; |
| startAngle = normalizeRadian(endAngle); |
| endAngle = normalizeRadian(tmp); |
| } else { |
| startAngle = normalizeRadian(startAngle); |
| endAngle = normalizeRadian(endAngle); |
| } |
| if (startAngle > endAngle) { |
| endAngle += PI2; |
| } |
| var w = 0; |
| for (var i = 0; i < 2; i++) { |
| var x_ = roots[i]; |
| if (x_ + cx > x) { |
| var angle = Math.atan2(y, x_); |
| var dir = anticlockwise ? 1 : -1; |
| if (angle < 0) { |
| angle = PI2 + angle; |
| } |
| if (angle >= startAngle && angle <= endAngle || angle + PI2 >= startAngle && angle + PI2 <= endAngle) { |
| if (angle > Math.PI / 2 && angle < Math.PI * 1.5) { |
| dir = -dir; |
| } |
| w += dir; |
| } |
| } |
| } |
| return w; |
| } |
| function isInsidePath(pathArray, lineWidth, brushType, x, y) { |
| var w = 0; |
| var xi = 0; |
| var yi = 0; |
| var x0 = 0; |
| var y0 = 0; |
| var beginSubpath = true; |
| var firstCmd = true; |
| brushType = brushType || 'fill'; |
| var hasStroke = brushType === 'stroke' || brushType === 'both'; |
| var hasFill = brushType === 'fill' || brushType === 'both'; |
| for (var i = 0; i < pathArray.length; i++) { |
| var seg = pathArray[i]; |
| var p = seg.points; |
| if (beginSubpath || seg.command === 'M') { |
| if (i > 0) { |
| if (hasFill) { |
| w += windingLine(xi, yi, x0, y0, x, y); |
| } |
| if (w !== 0) { |
| return true; |
| } |
| } |
| x0 = p[p.length - 2]; |
| y0 = p[p.length - 1]; |
| beginSubpath = false; |
| if (firstCmd && seg.command !== 'A') { |
| firstCmd = false; |
| xi = x0; |
| yi = y0; |
| } |
| } |
| switch (seg.command) { |
| case 'M': |
| xi = p[0]; |
| yi = p[1]; |
| break; |
| case 'L': |
| if (hasStroke) { |
| if (isInsideLine(xi, yi, p[0], p[1], lineWidth, x, y)) { |
| return true; |
| } |
| } |
| if (hasFill) { |
| w += windingLine(xi, yi, p[0], p[1], x, y); |
| } |
| xi = p[0]; |
| yi = p[1]; |
| break; |
| case 'C': |
| if (hasStroke) { |
| if (isInsideCubicStroke(xi, yi, p[0], p[1], p[2], p[3], p[4], p[5], lineWidth, x, y)) { |
| return true; |
| } |
| } |
| if (hasFill) { |
| w += windingCubic(xi, yi, p[0], p[1], p[2], p[3], p[4], p[5], x, y); |
| } |
| xi = p[4]; |
| yi = p[5]; |
| break; |
| case 'Q': |
| if (hasStroke) { |
| if (isInsideQuadraticStroke(xi, yi, p[0], p[1], p[2], p[3], lineWidth, x, y)) { |
| return true; |
| } |
| } |
| if (hasFill) { |
| w += windingQuadratic(xi, yi, p[0], p[1], p[2], p[3], x, y); |
| } |
| xi = p[2]; |
| yi = p[3]; |
| break; |
| case 'A': |
| var cx = p[0]; |
| var cy = p[1]; |
| var rx = p[2]; |
| var ry = p[3]; |
| var theta = p[4]; |
| var dTheta = p[5]; |
| var x1 = Math.cos(theta) * rx + cx; |
| var y1 = Math.sin(theta) * ry + cy; |
| if (!firstCmd) { |
| w += windingLine(xi, yi, x1, y1); |
| } else { |
| firstCmd = false; |
| x0 = x1; |
| y0 = y1; |
| } |
| var _x = (x - cx) * ry / rx + cx; |
| if (hasStroke) { |
| if (isInsideArcStroke(cx, cy, ry, theta, theta + dTheta, 1 - p[7], lineWidth, _x, y)) { |
| return true; |
| } |
| } |
| if (hasFill) { |
| w += windingArc(cx, cy, ry, theta, theta + dTheta, 1 - p[7], _x, y); |
| } |
| xi = Math.cos(theta + dTheta) * rx + cx; |
| yi = Math.sin(theta + dTheta) * ry + cy; |
| break; |
| case 'z': |
| if (hasStroke) { |
| if (isInsideLine(xi, yi, x0, y0, lineWidth, x, y)) { |
| return true; |
| } |
| } |
| beginSubpath = true; |
| break; |
| } |
| } |
| if (hasFill) { |
| w += windingLine(xi, yi, x0, y0, x, y); |
| } |
| return w !== 0; |
| } |
| function getTextWidth(text, textFont) { |
| var key = text + ':' + textFont; |
| if (_textWidthCache[key]) { |
| return _textWidthCache[key]; |
| } |
| _ctx = _ctx || util.getContext(); |
| _ctx.save(); |
| if (textFont) { |
| _ctx.font = textFont; |
| } |
| text = (text + '').split('\n'); |
| var width = 0; |
| for (var i = 0, l = text.length; i < l; i++) { |
| width = Math.max(_ctx.measureText(text[i]).width, width); |
| } |
| _ctx.restore(); |
| _textWidthCache[key] = width; |
| if (++_textWidthCacheCounter > TEXT_CACHE_MAX) { |
| _textWidthCacheCounter = 0; |
| _textWidthCache = {}; |
| } |
| return width; |
| } |
| function getTextHeight(text, textFont) { |
| var key = text + ':' + textFont; |
| if (_textHeightCache[key]) { |
| return _textHeightCache[key]; |
| } |
| _ctx = _ctx || util.getContext(); |
| _ctx.save(); |
| if (textFont) { |
| _ctx.font = textFont; |
| } |
| text = (text + '').split('\n'); |
| var height = (_ctx.measureText('国').width + 2) * text.length; |
| _ctx.restore(); |
| _textHeightCache[key] = height; |
| if (++_textHeightCacheCounter > TEXT_CACHE_MAX) { |
| _textHeightCacheCounter = 0; |
| _textHeightCache = {}; |
| } |
| return height; |
| } |
| return { |
| isInside: isInside, |
| isOutside: isOutside, |
| getTextWidth: getTextWidth, |
| getTextHeight: getTextHeight, |
| isInsidePath: isInsidePath, |
| isInsidePolygon: isInsidePolygon, |
| isInsideSector: isInsideSector, |
| isInsideCircle: isInsideCircle, |
| isInsideLine: isInsideLine, |
| isInsideRect: isInsideRect, |
| isInsidePolyline: isInsidePolyline, |
| isInsideCubicStroke: isInsideCubicStroke, |
| isInsideQuadraticStroke: isInsideQuadraticStroke |
| }; |
| });define('zrender/shape/Base', [ |
| 'require', |
| '../tool/matrix', |
| '../tool/guid', |
| '../tool/util', |
| '../tool/log', |
| '../mixin/Transformable', |
| '../mixin/Eventful', |
| '../tool/area', |
| '../tool/color' |
| ], function (require) { |
| var vmlCanvasManager = window['G_vmlCanvasManager']; |
| var matrix = require('../tool/matrix'); |
| var guid = require('../tool/guid'); |
| var util = require('../tool/util'); |
| var log = require('../tool/log'); |
| var Transformable = require('../mixin/Transformable'); |
| var Eventful = require('../mixin/Eventful'); |
| function _fillText(ctx, text, x, y, textFont, textAlign, textBaseline) { |
| if (textFont) { |
| ctx.font = textFont; |
| } |
| ctx.textAlign = textAlign; |
| ctx.textBaseline = textBaseline; |
| var rect = _getTextRect(text, x, y, textFont, textAlign, textBaseline); |
| text = (text + '').split('\n'); |
| var lineHeight = require('../tool/area').getTextHeight('国', textFont); |
| switch (textBaseline) { |
| case 'top': |
| y = rect.y; |
| break; |
| case 'bottom': |
| y = rect.y + lineHeight; |
| break; |
| default: |
| y = rect.y + lineHeight / 2; |
| } |
| for (var i = 0, l = text.length; i < l; i++) { |
| ctx.fillText(text[i], x, y); |
| y += lineHeight; |
| } |
| } |
| function _getTextRect(text, x, y, textFont, textAlign, textBaseline) { |
| var area = require('../tool/area'); |
| var width = area.getTextWidth(text, textFont); |
| var lineHeight = area.getTextHeight('国', textFont); |
| text = (text + '').split('\n'); |
| switch (textAlign) { |
| case 'end': |
| case 'right': |
| x -= width; |
| break; |
| case 'center': |
| x -= width / 2; |
| break; |
| } |
| switch (textBaseline) { |
| case 'top': |
| break; |
| case 'bottom': |
| y -= lineHeight * text.length; |
| break; |
| default: |
| y -= lineHeight * text.length / 2; |
| } |
| return { |
| x: x, |
| y: y, |
| width: width, |
| height: lineHeight * text.length |
| }; |
| } |
| var Base = function (options) { |
| options = options || {}; |
| this.id = options.id || guid(); |
| for (var key in options) { |
| this[key] = options[key]; |
| } |
| this.style = this.style || {}; |
| this.highlightStyle = this.highlightStyle || null; |
| this.parent = null; |
| this.__dirty = true; |
| this.__clipShapes = []; |
| Transformable.call(this); |
| Eventful.call(this); |
| }; |
| Base.prototype.invisible = false; |
| Base.prototype.ignore = false; |
| Base.prototype.zlevel = 0; |
| Base.prototype.draggable = false; |
| Base.prototype.clickable = false; |
| Base.prototype.hoverable = true; |
| Base.prototype.z = 0; |
| Base.prototype.brush = function (ctx, isHighlight) { |
| var style = this.beforeBrush(ctx, isHighlight); |
| ctx.beginPath(); |
| this.buildPath(ctx, style); |
| switch (style.brushType) { |
| case 'both': |
| ctx.fill(); |
| case 'stroke': |
| style.lineWidth > 0 && ctx.stroke(); |
| break; |
| default: |
| ctx.fill(); |
| } |
| this.drawText(ctx, style, this.style); |
| this.afterBrush(ctx); |
| }; |
| Base.prototype.beforeBrush = function (ctx, isHighlight) { |
| var style = this.style; |
| if (this.brushTypeOnly) { |
| style.brushType = this.brushTypeOnly; |
| } |
| if (isHighlight) { |
| style = this.getHighlightStyle(style, this.highlightStyle || {}, this.brushTypeOnly); |
| } |
| if (this.brushTypeOnly == 'stroke') { |
| style.strokeColor = style.strokeColor || style.color; |
| } |
| ctx.save(); |
| this.doClip(ctx); |
| this.setContext(ctx, style); |
| this.setTransform(ctx); |
| return style; |
| }; |
| Base.prototype.afterBrush = function (ctx) { |
| ctx.restore(); |
| }; |
| var STYLE_CTX_MAP = [ |
| [ |
| 'color', |
| 'fillStyle' |
| ], |
| [ |
| 'strokeColor', |
| 'strokeStyle' |
| ], |
| [ |
| 'opacity', |
| 'globalAlpha' |
| ], |
| [ |
| 'lineCap', |
| 'lineCap' |
| ], |
| [ |
| 'lineJoin', |
| 'lineJoin' |
| ], |
| [ |
| 'miterLimit', |
| 'miterLimit' |
| ], |
| [ |
| 'lineWidth', |
| 'lineWidth' |
| ], |
| [ |
| 'shadowBlur', |
| 'shadowBlur' |
| ], |
| [ |
| 'shadowColor', |
| 'shadowColor' |
| ], |
| [ |
| 'shadowOffsetX', |
| 'shadowOffsetX' |
| ], |
| [ |
| 'shadowOffsetY', |
| 'shadowOffsetY' |
| ] |
| ]; |
| Base.prototype.setContext = function (ctx, style) { |
| for (var i = 0, len = STYLE_CTX_MAP.length; i < len; i++) { |
| var styleProp = STYLE_CTX_MAP[i][0]; |
| var styleValue = style[styleProp]; |
| var ctxProp = STYLE_CTX_MAP[i][1]; |
| if (typeof styleValue != 'undefined') { |
| ctx[ctxProp] = styleValue; |
| } |
| } |
| }; |
| var clipShapeInvTransform = matrix.create(); |
| Base.prototype.doClip = function (ctx) { |
| if (this.__clipShapes && !vmlCanvasManager) { |
| for (var i = 0; i < this.__clipShapes.length; i++) { |
| var clipShape = this.__clipShapes[i]; |
| if (clipShape.needTransform) { |
| var m = clipShape.transform; |
| matrix.invert(clipShapeInvTransform, m); |
| ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); |
| } |
| ctx.beginPath(); |
| clipShape.buildPath(ctx, clipShape.style); |
| ctx.clip(); |
| if (clipShape.needTransform) { |
| var m = clipShapeInvTransform; |
| ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); |
| } |
| } |
| } |
| }; |
| Base.prototype.getHighlightStyle = function (style, highlightStyle, brushTypeOnly) { |
| var newStyle = {}; |
| for (var k in style) { |
| newStyle[k] = style[k]; |
| } |
| var color = require('../tool/color'); |
| var highlightColor = color.getHighlightColor(); |
| if (style.brushType != 'stroke') { |
| newStyle.strokeColor = highlightColor; |
| newStyle.lineWidth = (style.lineWidth || 1) + this.getHighlightZoom(); |
| newStyle.brushType = 'both'; |
| } else { |
| if (brushTypeOnly != 'stroke') { |
| newStyle.strokeColor = highlightColor; |
| newStyle.lineWidth = (style.lineWidth || 1) + this.getHighlightZoom(); |
| } else { |
| newStyle.strokeColor = highlightStyle.strokeColor || color.mix(style.strokeColor, color.toRGB(highlightColor)); |
| } |
| } |
| for (var k in highlightStyle) { |
| if (typeof highlightStyle[k] != 'undefined') { |
| newStyle[k] = highlightStyle[k]; |
| } |
| } |
| return newStyle; |
| }; |
| Base.prototype.getHighlightZoom = function () { |
| return this.type != 'text' ? 6 : 2; |
| }; |
| Base.prototype.drift = function (dx, dy) { |
| this.position[0] += dx; |
| this.position[1] += dy; |
| }; |
| Base.prototype.buildPath = function (ctx, style) { |
| log('buildPath not implemented in ' + this.type); |
| }; |
| Base.prototype.getRect = function (style) { |
| log('getRect not implemented in ' + this.type); |
| }; |
| Base.prototype.isCover = function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| if (this.isCoverRect(x, y)) { |
| return require('../tool/area').isInside(this, this.style, x, y); |
| } |
| return false; |
| }; |
| Base.prototype.isCoverRect = function (x, y) { |
| var rect = this.style.__rect; |
| if (!rect) { |
| rect = this.style.__rect = this.getRect(this.style); |
| } |
| return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height; |
| }; |
| Base.prototype.drawText = function (ctx, style, normalStyle) { |
| if (typeof style.text == 'undefined' || style.text === false) { |
| return; |
| } |
| var textColor = style.textColor || style.color || style.strokeColor; |
| ctx.fillStyle = textColor; |
| var dd = 10; |
| var al; |
| var bl; |
| var tx; |
| var ty; |
| var textPosition = style.textPosition || this.textPosition || 'top'; |
| switch (textPosition) { |
| case 'inside': |
| case 'top': |
| case 'bottom': |
| case 'left': |
| case 'right': |
| if (this.getRect) { |
| var rect = (normalStyle || style).__rect || this.getRect(normalStyle || style); |
| switch (textPosition) { |
| case 'inside': |
| tx = rect.x + rect.width / 2; |
| ty = rect.y + rect.height / 2; |
| al = 'center'; |
| bl = 'middle'; |
| if (style.brushType != 'stroke' && textColor == style.color) { |
| ctx.fillStyle = '#fff'; |
| } |
| break; |
| case 'left': |
| tx = rect.x - dd; |
| ty = rect.y + rect.height / 2; |
| al = 'end'; |
| bl = 'middle'; |
| break; |
| case 'right': |
| tx = rect.x + rect.width + dd; |
| ty = rect.y + rect.height / 2; |
| al = 'start'; |
| bl = 'middle'; |
| break; |
| case 'top': |
| tx = rect.x + rect.width / 2; |
| ty = rect.y - dd; |
| al = 'center'; |
| bl = 'bottom'; |
| break; |
| case 'bottom': |
| tx = rect.x + rect.width / 2; |
| ty = rect.y + rect.height + dd; |
| al = 'center'; |
| bl = 'top'; |
| break; |
| } |
| } |
| break; |
| case 'start': |
| case 'end': |
| var pointList = style.pointList || [ |
| [ |
| style.xStart || 0, |
| style.yStart || 0 |
| ], |
| [ |
| style.xEnd || 0, |
| style.yEnd || 0 |
| ] |
| ]; |
| var length = pointList.length; |
| if (length < 2) { |
| return; |
| } |
| var xStart; |
| var xEnd; |
| var yStart; |
| var yEnd; |
| switch (textPosition) { |
| case 'start': |
| xStart = pointList[1][0]; |
| xEnd = pointList[0][0]; |
| yStart = pointList[1][1]; |
| yEnd = pointList[0][1]; |
| break; |
| case 'end': |
| xStart = pointList[length - 2][0]; |
| xEnd = pointList[length - 1][0]; |
| yStart = pointList[length - 2][1]; |
| yEnd = pointList[length - 1][1]; |
| break; |
| } |
| tx = xEnd; |
| ty = yEnd; |
| var angle = Math.atan((yStart - yEnd) / (xEnd - xStart)) / Math.PI * 180; |
| if (xEnd - xStart < 0) { |
| angle += 180; |
| } else if (yStart - yEnd < 0) { |
| angle += 360; |
| } |
| dd = 5; |
| if (angle >= 30 && angle <= 150) { |
| al = 'center'; |
| bl = 'bottom'; |
| ty -= dd; |
| } else if (angle > 150 && angle < 210) { |
| al = 'right'; |
| bl = 'middle'; |
| tx -= dd; |
| } else if (angle >= 210 && angle <= 330) { |
| al = 'center'; |
| bl = 'top'; |
| ty += dd; |
| } else { |
| al = 'left'; |
| bl = 'middle'; |
| tx += dd; |
| } |
| break; |
| case 'specific': |
| tx = style.textX || 0; |
| ty = style.textY || 0; |
| al = 'start'; |
| bl = 'middle'; |
| break; |
| } |
| if (tx != null && ty != null) { |
| _fillText(ctx, style.text, tx, ty, style.textFont, style.textAlign || al, style.textBaseline || bl); |
| } |
| }; |
| Base.prototype.modSelf = function () { |
| this.__dirty = true; |
| if (this.style) { |
| this.style.__rect = null; |
| } |
| if (this.highlightStyle) { |
| this.highlightStyle.__rect = null; |
| } |
| }; |
| Base.prototype.isSilent = function () { |
| return !(this.hoverable || this.draggable || this.clickable || this.onmousemove || this.onmouseover || this.onmouseout || this.onmousedown || this.onmouseup || this.onclick || this.ondragenter || this.ondragover || this.ondragleave || this.ondrop); |
| }; |
| util.merge(Base.prototype, Transformable.prototype, true); |
| util.merge(Base.prototype, Eventful.prototype, true); |
| return Base; |
| });define('zrender/tool/curve', [ |
| 'require', |
| './vector' |
| ], function (require) { |
| var vector = require('./vector'); |
| 'use strict'; |
| var EPSILON = 0.0001; |
| var THREE_SQRT = Math.sqrt(3); |
| var ONE_THIRD = 1 / 3; |
| var _v0 = vector.create(); |
| var _v1 = vector.create(); |
| var _v2 = vector.create(); |
| function isAroundZero(val) { |
| return val > -EPSILON && val < EPSILON; |
| } |
| function isNotAroundZero(val) { |
| return val > EPSILON || val < -EPSILON; |
| } |
| function cubicAt(p0, p1, p2, p3, t) { |
| var onet = 1 - t; |
| return onet * onet * (onet * p0 + 3 * t * p1) + t * t * (t * p3 + 3 * onet * p2); |
| } |
| function cubicDerivativeAt(p0, p1, p2, p3, t) { |
| var onet = 1 - t; |
| return 3 * (((p1 - p0) * onet + 2 * (p2 - p1) * t) * onet + (p3 - p2) * t * t); |
| } |
| function cubicRootAt(p0, p1, p2, p3, val, roots) { |
| var a = p3 + 3 * (p1 - p2) - p0; |
| var b = 3 * (p2 - p1 * 2 + p0); |
| var c = 3 * (p1 - p0); |
| var d = p0 - val; |
| var A = b * b - 3 * a * c; |
| var B = b * c - 9 * a * d; |
| var C = c * c - 3 * b * d; |
| var n = 0; |
| if (isAroundZero(A) && isAroundZero(B)) { |
| if (isAroundZero(b)) { |
| roots[0] = 0; |
| } else { |
| var t1 = -c / b; |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| } |
| } else { |
| var disc = B * B - 4 * A * C; |
| if (isAroundZero(disc)) { |
| var K = B / A; |
| var t1 = -b / a + K; |
| var t2 = -K / 2; |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| if (t2 >= 0 && t2 <= 1) { |
| roots[n++] = t2; |
| } |
| } else if (disc > 0) { |
| var discSqrt = Math.sqrt(disc); |
| var Y1 = A * b + 1.5 * a * (-B + discSqrt); |
| var Y2 = A * b + 1.5 * a * (-B - discSqrt); |
| if (Y1 < 0) { |
| Y1 = -Math.pow(-Y1, ONE_THIRD); |
| } else { |
| Y1 = Math.pow(Y1, ONE_THIRD); |
| } |
| if (Y2 < 0) { |
| Y2 = -Math.pow(-Y2, ONE_THIRD); |
| } else { |
| Y2 = Math.pow(Y2, ONE_THIRD); |
| } |
| var t1 = (-b - (Y1 + Y2)) / (3 * a); |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| } else { |
| var T = (2 * A * b - 3 * a * B) / (2 * Math.sqrt(A * A * A)); |
| var theta = Math.acos(T) / 3; |
| var ASqrt = Math.sqrt(A); |
| var tmp = Math.cos(theta); |
| var t1 = (-b - 2 * ASqrt * tmp) / (3 * a); |
| var t2 = (-b + ASqrt * (tmp + THREE_SQRT * Math.sin(theta))) / (3 * a); |
| var t3 = (-b + ASqrt * (tmp - THREE_SQRT * Math.sin(theta))) / (3 * a); |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| if (t2 >= 0 && t2 <= 1) { |
| roots[n++] = t2; |
| } |
| if (t3 >= 0 && t3 <= 1) { |
| roots[n++] = t3; |
| } |
| } |
| } |
| return n; |
| } |
| function cubicExtrema(p0, p1, p2, p3, extrema) { |
| var b = 6 * p2 - 12 * p1 + 6 * p0; |
| var a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2; |
| var c = 3 * p1 - 3 * p0; |
| var n = 0; |
| if (isAroundZero(a)) { |
| if (isNotAroundZero(b)) { |
| var t1 = -c / b; |
| if (t1 >= 0 && t1 <= 1) { |
| extrema[n++] = t1; |
| } |
| } |
| } else { |
| var disc = b * b - 4 * a * c; |
| if (isAroundZero(disc)) { |
| extrema[0] = -b / (2 * a); |
| } else if (disc > 0) { |
| var discSqrt = Math.sqrt(disc); |
| var t1 = (-b + discSqrt) / (2 * a); |
| var t2 = (-b - discSqrt) / (2 * a); |
| if (t1 >= 0 && t1 <= 1) { |
| extrema[n++] = t1; |
| } |
| if (t2 >= 0 && t2 <= 1) { |
| extrema[n++] = t2; |
| } |
| } |
| } |
| return n; |
| } |
| function cubicSubdivide(p0, p1, p2, p3, t, out) { |
| var p01 = (p1 - p0) * t + p0; |
| var p12 = (p2 - p1) * t + p1; |
| var p23 = (p3 - p2) * t + p2; |
| var p012 = (p12 - p01) * t + p01; |
| var p123 = (p23 - p12) * t + p12; |
| var p0123 = (p123 - p012) * t + p012; |
| out[0] = p0; |
| out[1] = p01; |
| out[2] = p012; |
| out[3] = p0123; |
| out[4] = p0123; |
| out[5] = p123; |
| out[6] = p23; |
| out[7] = p3; |
| } |
| function cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, out) { |
| var t; |
| var interval = 0.005; |
| var d = Infinity; |
| _v0[0] = x; |
| _v0[1] = y; |
| for (var _t = 0; _t < 1; _t += 0.05) { |
| _v1[0] = cubicAt(x0, x1, x2, x3, _t); |
| _v1[1] = cubicAt(y0, y1, y2, y3, _t); |
| var d1 = vector.distSquare(_v0, _v1); |
| if (d1 < d) { |
| t = _t; |
| d = d1; |
| } |
| } |
| d = Infinity; |
| for (var i = 0; i < 32; i++) { |
| if (interval < EPSILON) { |
| break; |
| } |
| var prev = t - interval; |
| var next = t + interval; |
| _v1[0] = cubicAt(x0, x1, x2, x3, prev); |
| _v1[1] = cubicAt(y0, y1, y2, y3, prev); |
| var d1 = vector.distSquare(_v1, _v0); |
| if (prev >= 0 && d1 < d) { |
| t = prev; |
| d = d1; |
| } else { |
| _v2[0] = cubicAt(x0, x1, x2, x3, next); |
| _v2[1] = cubicAt(y0, y1, y2, y3, next); |
| var d2 = vector.distSquare(_v2, _v0); |
| if (next <= 1 && d2 < d) { |
| t = next; |
| d = d2; |
| } else { |
| interval *= 0.5; |
| } |
| } |
| } |
| if (out) { |
| out[0] = cubicAt(x0, x1, x2, x3, t); |
| out[1] = cubicAt(y0, y1, y2, y3, t); |
| } |
| return Math.sqrt(d); |
| } |
| function quadraticAt(p0, p1, p2, t) { |
| var onet = 1 - t; |
| return onet * (onet * p0 + 2 * t * p1) + t * t * p2; |
| } |
| function quadraticDerivativeAt(p0, p1, p2, t) { |
| return 2 * ((1 - t) * (p1 - p0) + t * (p2 - p1)); |
| } |
| function quadraticRootAt(p0, p1, p2, val, roots) { |
| var a = p0 - 2 * p1 + p2; |
| var b = 2 * (p1 - p0); |
| var c = p0 - val; |
| var n = 0; |
| if (isAroundZero(a)) { |
| if (isNotAroundZero(b)) { |
| var t1 = -c / b; |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| } |
| } else { |
| var disc = b * b - 4 * a * c; |
| if (isAroundZero(disc)) { |
| var t1 = -b / (2 * a); |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| } else if (disc > 0) { |
| var discSqrt = Math.sqrt(disc); |
| var t1 = (-b + discSqrt) / (2 * a); |
| var t2 = (-b - discSqrt) / (2 * a); |
| if (t1 >= 0 && t1 <= 1) { |
| roots[n++] = t1; |
| } |
| if (t2 >= 0 && t2 <= 1) { |
| roots[n++] = t2; |
| } |
| } |
| } |
| return n; |
| } |
| function quadraticExtremum(p0, p1, p2) { |
| var divider = p0 + p2 - 2 * p1; |
| if (divider === 0) { |
| return 0.5; |
| } else { |
| return (p0 - p1) / divider; |
| } |
| } |
| function quadraticSubdivide(p0, p1, p2, t, out) { |
| var p01 = (p1 - p0) * t + p0; |
| var p12 = (p2 - p1) * t + p1; |
| var p012 = (p12 - p01) * t + p01; |
| out[0] = p0; |
| out[1] = p01; |
| out[2] = p012; |
| out[3] = p012; |
| out[4] = p12; |
| out[5] = p2; |
| } |
| function quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, out) { |
| var t; |
| var interval = 0.005; |
| var d = Infinity; |
| _v0[0] = x; |
| _v0[1] = y; |
| for (var _t = 0; _t < 1; _t += 0.05) { |
| _v1[0] = quadraticAt(x0, x1, x2, _t); |
| _v1[1] = quadraticAt(y0, y1, y2, _t); |
| var d1 = vector.distSquare(_v0, _v1); |
| if (d1 < d) { |
| t = _t; |
| d = d1; |
| } |
| } |
| d = Infinity; |
| for (var i = 0; i < 32; i++) { |
| if (interval < EPSILON) { |
| break; |
| } |
| var prev = t - interval; |
| var next = t + interval; |
| _v1[0] = quadraticAt(x0, x1, x2, prev); |
| _v1[1] = quadraticAt(y0, y1, y2, prev); |
| var d1 = vector.distSquare(_v1, _v0); |
| if (prev >= 0 && d1 < d) { |
| t = prev; |
| d = d1; |
| } else { |
| _v2[0] = quadraticAt(x0, x1, x2, next); |
| _v2[1] = quadraticAt(y0, y1, y2, next); |
| var d2 = vector.distSquare(_v2, _v0); |
| if (next <= 1 && d2 < d) { |
| t = next; |
| d = d2; |
| } else { |
| interval *= 0.5; |
| } |
| } |
| } |
| if (out) { |
| out[0] = quadraticAt(x0, x1, x2, t); |
| out[1] = quadraticAt(y0, y1, y2, t); |
| } |
| return Math.sqrt(d); |
| } |
| return { |
| cubicAt: cubicAt, |
| cubicDerivativeAt: cubicDerivativeAt, |
| cubicRootAt: cubicRootAt, |
| cubicExtrema: cubicExtrema, |
| cubicSubdivide: cubicSubdivide, |
| cubicProjectPoint: cubicProjectPoint, |
| quadraticAt: quadraticAt, |
| quadraticDerivativeAt: quadraticDerivativeAt, |
| quadraticRootAt: quadraticRootAt, |
| quadraticExtremum: quadraticExtremum, |
| quadraticSubdivide: quadraticSubdivide, |
| quadraticProjectPoint: quadraticProjectPoint |
| }; |
| });define('zrender/mixin/Transformable', [ |
| 'require', |
| '../tool/matrix', |
| '../tool/vector' |
| ], function (require) { |
| 'use strict'; |
| var matrix = require('../tool/matrix'); |
| var vector = require('../tool/vector'); |
| var origin = [ |
| 0, |
| 0 |
| ]; |
| var mTranslate = matrix.translate; |
| var EPSILON = 0.00005; |
| function isAroundZero(val) { |
| return val > -EPSILON && val < EPSILON; |
| } |
| function isNotAroundZero(val) { |
| return val > EPSILON || val < -EPSILON; |
| } |
| var Transformable = function () { |
| if (!this.position) { |
| this.position = [ |
| 0, |
| 0 |
| ]; |
| } |
| if (typeof this.rotation == 'undefined') { |
| this.rotation = [ |
| 0, |
| 0, |
| 0 |
| ]; |
| } |
| if (!this.scale) { |
| this.scale = [ |
| 1, |
| 1, |
| 0, |
| 0 |
| ]; |
| } |
| this.needLocalTransform = false; |
| this.needTransform = false; |
| }; |
| Transformable.prototype = { |
| constructor: Transformable, |
| updateNeedTransform: function () { |
| this.needLocalTransform = isNotAroundZero(this.rotation[0]) || isNotAroundZero(this.position[0]) || isNotAroundZero(this.position[1]) || isNotAroundZero(this.scale[0] - 1) || isNotAroundZero(this.scale[1] - 1); |
| }, |
| updateTransform: function () { |
| this.updateNeedTransform(); |
| var parentHasTransform = this.parent && this.parent.needTransform; |
| this.needTransform = this.needLocalTransform || parentHasTransform; |
| if (!this.needTransform) { |
| return; |
| } |
| var m = this.transform || matrix.create(); |
| matrix.identity(m); |
| if (this.needLocalTransform) { |
| var scale = this.scale; |
| if (isNotAroundZero(scale[0]) || isNotAroundZero(scale[1])) { |
| origin[0] = -scale[2] || 0; |
| origin[1] = -scale[3] || 0; |
| var haveOrigin = isNotAroundZero(origin[0]) || isNotAroundZero(origin[1]); |
| if (haveOrigin) { |
| mTranslate(m, m, origin); |
| } |
| matrix.scale(m, m, scale); |
| if (haveOrigin) { |
| origin[0] = -origin[0]; |
| origin[1] = -origin[1]; |
| mTranslate(m, m, origin); |
| } |
| } |
| if (this.rotation instanceof Array) { |
| if (this.rotation[0] !== 0) { |
| origin[0] = -this.rotation[1] || 0; |
| origin[1] = -this.rotation[2] || 0; |
| var haveOrigin = isNotAroundZero(origin[0]) || isNotAroundZero(origin[1]); |
| if (haveOrigin) { |
| mTranslate(m, m, origin); |
| } |
| matrix.rotate(m, m, this.rotation[0]); |
| if (haveOrigin) { |
| origin[0] = -origin[0]; |
| origin[1] = -origin[1]; |
| mTranslate(m, m, origin); |
| } |
| } |
| } else { |
| if (this.rotation !== 0) { |
| matrix.rotate(m, m, this.rotation); |
| } |
| } |
| if (isNotAroundZero(this.position[0]) || isNotAroundZero(this.position[1])) { |
| mTranslate(m, m, this.position); |
| } |
| } |
| if (parentHasTransform) { |
| if (this.needLocalTransform) { |
| matrix.mul(m, this.parent.transform, m); |
| } else { |
| matrix.copy(m, this.parent.transform); |
| } |
| } |
| this.transform = m; |
| this.invTransform = this.invTransform || matrix.create(); |
| matrix.invert(this.invTransform, m); |
| }, |
| setTransform: function (ctx) { |
| if (this.needTransform) { |
| var m = this.transform; |
| ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); |
| } |
| }, |
| lookAt: function () { |
| var v = vector.create(); |
| return function (target) { |
| if (!this.transform) { |
| this.transform = matrix.create(); |
| } |
| var m = this.transform; |
| vector.sub(v, target, this.position); |
| if (isAroundZero(v[0]) && isAroundZero(v[1])) { |
| return; |
| } |
| vector.normalize(v, v); |
| var scale = this.scale; |
| m[2] = v[0] * scale[1]; |
| m[3] = v[1] * scale[1]; |
| m[0] = v[1] * scale[0]; |
| m[1] = -v[0] * scale[0]; |
| m[4] = this.position[0]; |
| m[5] = this.position[1]; |
| this.decomposeTransform(); |
| }; |
| }(), |
| decomposeTransform: function () { |
| if (!this.transform) { |
| return; |
| } |
| var m = this.transform; |
| var sx = m[0] * m[0] + m[1] * m[1]; |
| var position = this.position; |
| var scale = this.scale; |
| var rotation = this.rotation; |
| if (isNotAroundZero(sx - 1)) { |
| sx = Math.sqrt(sx); |
| } |
| var sy = m[2] * m[2] + m[3] * m[3]; |
| if (isNotAroundZero(sy - 1)) { |
| sy = Math.sqrt(sy); |
| } |
| position[0] = m[4]; |
| position[1] = m[5]; |
| scale[0] = sx; |
| scale[1] = sy; |
| scale[2] = scale[3] = 0; |
| rotation[0] = Math.atan2(-m[1] / sy, m[0] / sx); |
| rotation[1] = rotation[2] = 0; |
| }, |
| transformCoordToLocal: function (x, y) { |
| var v2 = [ |
| x, |
| y |
| ]; |
| if (this.needTransform && this.invTransform) { |
| vector.applyTransform(v2, v2, this.invTransform); |
| } |
| return v2; |
| } |
| }; |
| return Transformable; |
| });define('zrender/Group', [ |
| 'require', |
| './tool/guid', |
| './tool/util', |
| './mixin/Transformable', |
| './mixin/Eventful' |
| ], function (require) { |
| var guid = require('./tool/guid'); |
| var util = require('./tool/util'); |
| var Transformable = require('./mixin/Transformable'); |
| var Eventful = require('./mixin/Eventful'); |
| var Group = function (options) { |
| options = options || {}; |
| this.id = options.id || guid(); |
| for (var key in options) { |
| this[key] = options[key]; |
| } |
| this.type = 'group'; |
| this.clipShape = null; |
| this._children = []; |
| this._storage = null; |
| this.__dirty = true; |
| Transformable.call(this); |
| Eventful.call(this); |
| }; |
| Group.prototype.ignore = false; |
| Group.prototype.children = function () { |
| return this._children.slice(); |
| }; |
| Group.prototype.childAt = function (idx) { |
| return this._children[idx]; |
| }; |
| Group.prototype.addChild = function (child) { |
| if (child == this) { |
| return; |
| } |
| if (child.parent == this) { |
| return; |
| } |
| if (child.parent) { |
| child.parent.removeChild(child); |
| } |
| this._children.push(child); |
| child.parent = this; |
| if (this._storage && this._storage !== child._storage) { |
| this._storage.addToMap(child); |
| if (child instanceof Group) { |
| child.addChildrenToStorage(this._storage); |
| } |
| } |
| }; |
| Group.prototype.removeChild = function (child) { |
| var idx = util.indexOf(this._children, child); |
| if (idx >= 0) { |
| this._children.splice(idx, 1); |
| } |
| child.parent = null; |
| if (this._storage) { |
| this._storage.delFromMap(child.id); |
| if (child instanceof Group) { |
| child.delChildrenFromStorage(this._storage); |
| } |
| } |
| }; |
| Group.prototype.clearChildren = function () { |
| for (var i = 0; i < this._children.length; i++) { |
| var child = this._children[i]; |
| if (this._storage) { |
| this._storage.delFromMap(child.id); |
| if (child instanceof Group) { |
| child.delChildrenFromStorage(this._storage); |
| } |
| } |
| } |
| this._children.length = 0; |
| }; |
| Group.prototype.eachChild = function (cb, context) { |
| var haveContext = !!context; |
| for (var i = 0; i < this._children.length; i++) { |
| var child = this._children[i]; |
| if (haveContext) { |
| cb.call(context, child); |
| } else { |
| cb(child); |
| } |
| } |
| }; |
| Group.prototype.traverse = function (cb, context) { |
| var haveContext = !!context; |
| for (var i = 0; i < this._children.length; i++) { |
| var child = this._children[i]; |
| if (haveContext) { |
| cb.call(context, child); |
| } else { |
| cb(child); |
| } |
| if (child.type === 'group') { |
| child.traverse(cb, context); |
| } |
| } |
| }; |
| Group.prototype.addChildrenToStorage = function (storage) { |
| for (var i = 0; i < this._children.length; i++) { |
| var child = this._children[i]; |
| storage.addToMap(child); |
| if (child instanceof Group) { |
| child.addChildrenToStorage(storage); |
| } |
| } |
| }; |
| Group.prototype.delChildrenFromStorage = function (storage) { |
| for (var i = 0; i < this._children.length; i++) { |
| var child = this._children[i]; |
| storage.delFromMap(child.id); |
| if (child instanceof Group) { |
| child.delChildrenFromStorage(storage); |
| } |
| } |
| }; |
| Group.prototype.modSelf = function () { |
| this.__dirty = true; |
| }; |
| util.merge(Group.prototype, Transformable.prototype, true); |
| util.merge(Group.prototype, Eventful.prototype, true); |
| return Group; |
| });define('zrender/animation/Clip', [ |
| 'require', |
| './easing' |
| ], function (require) { |
| var Easing = require('./easing'); |
| function Clip(options) { |
| this._targetPool = options.target || {}; |
| if (!(this._targetPool instanceof Array)) { |
| this._targetPool = [this._targetPool]; |
| } |
| this._life = options.life || 1000; |
| this._delay = options.delay || 0; |
| this._startTime = new Date().getTime() + this._delay; |
| this._endTime = this._startTime + this._life * 1000; |
| this.loop = typeof options.loop == 'undefined' ? false : options.loop; |
| this.gap = options.gap || 0; |
| this.easing = options.easing || 'Linear'; |
| this.onframe = options.onframe; |
| this.ondestroy = options.ondestroy; |
| this.onrestart = options.onrestart; |
| } |
| Clip.prototype = { |
| step: function (time) { |
| var percent = (time - this._startTime) / this._life; |
| if (percent < 0) { |
| return; |
| } |
| percent = Math.min(percent, 1); |
| var easingFunc = typeof this.easing == 'string' ? Easing[this.easing] : this.easing; |
| var schedule = typeof easingFunc === 'function' ? easingFunc(percent) : percent; |
| this.fire('frame', schedule); |
| if (percent == 1) { |
| if (this.loop) { |
| this.restart(); |
| return 'restart'; |
| } |
| this.__needsRemove = true; |
| return 'destroy'; |
| } |
| return null; |
| }, |
| restart: function () { |
| var time = new Date().getTime(); |
| var remainder = (time - this._startTime) % this._life; |
| this._startTime = new Date().getTime() - remainder + this.gap; |
| this.__needsRemove = false; |
| }, |
| fire: function (eventType, arg) { |
| for (var i = 0, len = this._targetPool.length; i < len; i++) { |
| if (this['on' + eventType]) { |
| this['on' + eventType](this._targetPool[i], arg); |
| } |
| } |
| }, |
| constructor: Clip |
| }; |
| return Clip; |
| });define('zrender/animation/easing', [], function () { |
| var easing = { |
| Linear: function (k) { |
| return k; |
| }, |
| QuadraticIn: function (k) { |
| return k * k; |
| }, |
| QuadraticOut: function (k) { |
| return k * (2 - k); |
| }, |
| QuadraticInOut: function (k) { |
| if ((k *= 2) < 1) { |
| return 0.5 * k * k; |
| } |
| return -0.5 * (--k * (k - 2) - 1); |
| }, |
| CubicIn: function (k) { |
| return k * k * k; |
| }, |
| CubicOut: function (k) { |
| return --k * k * k + 1; |
| }, |
| CubicInOut: function (k) { |
| if ((k *= 2) < 1) { |
| return 0.5 * k * k * k; |
| } |
| return 0.5 * ((k -= 2) * k * k + 2); |
| }, |
| QuarticIn: function (k) { |
| return k * k * k * k; |
| }, |
| QuarticOut: function (k) { |
| return 1 - --k * k * k * k; |
| }, |
| QuarticInOut: function (k) { |
| if ((k *= 2) < 1) { |
| return 0.5 * k * k * k * k; |
| } |
| return -0.5 * ((k -= 2) * k * k * k - 2); |
| }, |
| QuinticIn: function (k) { |
| return k * k * k * k * k; |
| }, |
| QuinticOut: function (k) { |
| return --k * k * k * k * k + 1; |
| }, |
| QuinticInOut: function (k) { |
| if ((k *= 2) < 1) { |
| return 0.5 * k * k * k * k * k; |
| } |
| return 0.5 * ((k -= 2) * k * k * k * k + 2); |
| }, |
| SinusoidalIn: function (k) { |
| return 1 - Math.cos(k * Math.PI / 2); |
| }, |
| SinusoidalOut: function (k) { |
| return Math.sin(k * Math.PI / 2); |
| }, |
| SinusoidalInOut: function (k) { |
| return 0.5 * (1 - Math.cos(Math.PI * k)); |
| }, |
| ExponentialIn: function (k) { |
| return k === 0 ? 0 : Math.pow(1024, k - 1); |
| }, |
| ExponentialOut: function (k) { |
| return k === 1 ? 1 : 1 - Math.pow(2, -10 * k); |
| }, |
| ExponentialInOut: function (k) { |
| if (k === 0) { |
| return 0; |
| } |
| if (k === 1) { |
| return 1; |
| } |
| if ((k *= 2) < 1) { |
| return 0.5 * Math.pow(1024, k - 1); |
| } |
| return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2); |
| }, |
| CircularIn: function (k) { |
| return 1 - Math.sqrt(1 - k * k); |
| }, |
| CircularOut: function (k) { |
| return Math.sqrt(1 - --k * k); |
| }, |
| CircularInOut: function (k) { |
| if ((k *= 2) < 1) { |
| return -0.5 * (Math.sqrt(1 - k * k) - 1); |
| } |
| return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1); |
| }, |
| ElasticIn: function (k) { |
| var s; |
| var a = 0.1; |
| var p = 0.4; |
| if (k === 0) { |
| return 0; |
| } |
| if (k === 1) { |
| return 1; |
| } |
| if (!a || a < 1) { |
| a = 1; |
| s = p / 4; |
| } else { |
| s = p * Math.asin(1 / a) / (2 * Math.PI); |
| } |
| return -(a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p)); |
| }, |
| ElasticOut: function (k) { |
| var s; |
| var a = 0.1; |
| var p = 0.4; |
| if (k === 0) { |
| return 0; |
| } |
| if (k === 1) { |
| return 1; |
| } |
| if (!a || a < 1) { |
| a = 1; |
| s = p / 4; |
| } else { |
| s = p * Math.asin(1 / a) / (2 * Math.PI); |
| } |
| return a * Math.pow(2, -10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1; |
| }, |
| ElasticInOut: function (k) { |
| var s; |
| var a = 0.1; |
| var p = 0.4; |
| if (k === 0) { |
| return 0; |
| } |
| if (k === 1) { |
| return 1; |
| } |
| if (!a || a < 1) { |
| a = 1; |
| s = p / 4; |
| } else { |
| s = p * Math.asin(1 / a) / (2 * Math.PI); |
| } |
| if ((k *= 2) < 1) { |
| return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p)); |
| } |
| return a * Math.pow(2, -10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1; |
| }, |
| BackIn: function (k) { |
| var s = 1.70158; |
| return k * k * ((s + 1) * k - s); |
| }, |
| BackOut: function (k) { |
| var s = 1.70158; |
| return --k * k * ((s + 1) * k + s) + 1; |
| }, |
| BackInOut: function (k) { |
| var s = 1.70158 * 1.525; |
| if ((k *= 2) < 1) { |
| return 0.5 * (k * k * ((s + 1) * k - s)); |
| } |
| return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2); |
| }, |
| BounceIn: function (k) { |
| return 1 - easing.BounceOut(1 - k); |
| }, |
| BounceOut: function (k) { |
| if (k < 1 / 2.75) { |
| return 7.5625 * k * k; |
| } else if (k < 2 / 2.75) { |
| return 7.5625 * (k -= 1.5 / 2.75) * k + 0.75; |
| } else if (k < 2.5 / 2.75) { |
| return 7.5625 * (k -= 2.25 / 2.75) * k + 0.9375; |
| } else { |
| return 7.5625 * (k -= 2.625 / 2.75) * k + 0.984375; |
| } |
| }, |
| BounceInOut: function (k) { |
| if (k < 0.5) { |
| return easing.BounceIn(k * 2) * 0.5; |
| } |
| return easing.BounceOut(k * 2 - 1) * 0.5 + 0.5; |
| } |
| }; |
| return easing; |
| });define('echarts/chart/base', [ |
| 'require', |
| 'zrender/shape/Image', |
| '../util/shape/Icon', |
| '../util/shape/MarkLine', |
| '../util/shape/Symbol', |
| 'zrender/shape/Polyline', |
| 'zrender/shape/ShapeBundle', |
| '../config', |
| '../util/ecData', |
| '../util/ecAnimation', |
| '../util/ecEffect', |
| '../util/accMath', |
| '../component/base', |
| '../layout/EdgeBundling', |
| 'zrender/tool/util', |
| 'zrender/tool/area' |
| ], function (require) { |
| var ImageShape = require('zrender/shape/Image'); |
| var IconShape = require('../util/shape/Icon'); |
| var MarkLineShape = require('../util/shape/MarkLine'); |
| var SymbolShape = require('../util/shape/Symbol'); |
| var PolylineShape = require('zrender/shape/Polyline'); |
| var ShapeBundle = require('zrender/shape/ShapeBundle'); |
| var ecConfig = require('../config'); |
| var ecData = require('../util/ecData'); |
| var ecAnimation = require('../util/ecAnimation'); |
| var ecEffect = require('../util/ecEffect'); |
| var accMath = require('../util/accMath'); |
| var ComponentBase = require('../component/base'); |
| var EdgeBundling = require('../layout/EdgeBundling'); |
| var zrUtil = require('zrender/tool/util'); |
| var zrArea = require('zrender/tool/area'); |
| function isCoordAvailable(coord) { |
| return coord.x != null && coord.y != null; |
| } |
| function Base(ecTheme, messageCenter, zr, option, myChart) { |
| ComponentBase.call(this, ecTheme, messageCenter, zr, option, myChart); |
| var self = this; |
| this.selectedMap = {}; |
| this.lastShapeList = []; |
| this.shapeHandler = { |
| onclick: function () { |
| self.isClick = true; |
| }, |
| ondragover: function (param) { |
| var calculableShape = param.target; |
| calculableShape.highlightStyle = calculableShape.highlightStyle || {}; |
| var highlightStyle = calculableShape.highlightStyle; |
| var brushType = highlightStyle.brushTyep; |
| var strokeColor = highlightStyle.strokeColor; |
| var lineWidth = highlightStyle.lineWidth; |
| highlightStyle.brushType = 'stroke'; |
| highlightStyle.strokeColor = self.ecTheme.calculableColor || ecConfig.calculableColor; |
| highlightStyle.lineWidth = calculableShape.type === 'icon' ? 30 : 10; |
| self.zr.addHoverShape(calculableShape); |
| setTimeout(function () { |
| if (highlightStyle) { |
| highlightStyle.brushType = brushType; |
| highlightStyle.strokeColor = strokeColor; |
| highlightStyle.lineWidth = lineWidth; |
| } |
| }, 20); |
| }, |
| ondrop: function (param) { |
| if (ecData.get(param.dragged, 'data') != null) { |
| self.isDrop = true; |
| } |
| }, |
| ondragend: function () { |
| self.isDragend = true; |
| } |
| }; |
| } |
| Base.prototype = { |
| setCalculable: function (shape) { |
| shape.dragEnableTime = this.ecTheme.DRAG_ENABLE_TIME || ecConfig.DRAG_ENABLE_TIME; |
| shape.ondragover = this.shapeHandler.ondragover; |
| shape.ondragend = this.shapeHandler.ondragend; |
| shape.ondrop = this.shapeHandler.ondrop; |
| return shape; |
| }, |
| ondrop: function (param, status) { |
| if (!this.isDrop || !param.target || status.dragIn) { |
| return; |
| } |
| var target = param.target; |
| var dragged = param.dragged; |
| var seriesIndex = ecData.get(target, 'seriesIndex'); |
| var dataIndex = ecData.get(target, 'dataIndex'); |
| var series = this.series; |
| var data; |
| var legend = this.component.legend; |
| if (dataIndex === -1) { |
| if (ecData.get(dragged, 'seriesIndex') == seriesIndex) { |
| status.dragOut = status.dragIn = status.needRefresh = true; |
| this.isDrop = false; |
| return; |
| } |
| data = { |
| value: ecData.get(dragged, 'value'), |
| name: ecData.get(dragged, 'name') |
| }; |
| if (this.type === ecConfig.CHART_TYPE_PIE && data.value < 0) { |
| data.value = 0; |
| } |
| var hasFind = false; |
| var sData = series[seriesIndex].data; |
| for (var i = 0, l = sData.length; i < l; i++) { |
| if (sData[i].name === data.name && sData[i].value === '-') { |
| series[seriesIndex].data[i].value = data.value; |
| hasFind = true; |
| } |
| } |
| !hasFind && series[seriesIndex].data.push(data); |
| legend && legend.add(data.name, dragged.style.color || dragged.style.strokeColor); |
| } else { |
| data = series[seriesIndex].data[dataIndex] || '-'; |
| if (data.value != null) { |
| if (data.value != '-') { |
| series[seriesIndex].data[dataIndex].value = accMath.accAdd(series[seriesIndex].data[dataIndex].value, ecData.get(dragged, 'value')); |
| } else { |
| series[seriesIndex].data[dataIndex].value = ecData.get(dragged, 'value'); |
| } |
| if (this.type === ecConfig.CHART_TYPE_FUNNEL || this.type === ecConfig.CHART_TYPE_PIE) { |
| legend && legend.getRelatedAmount(data.name) === 1 && this.component.legend.del(data.name); |
| data.name += this.option.nameConnector + ecData.get(dragged, 'name'); |
| legend && legend.add(data.name, dragged.style.color || dragged.style.strokeColor); |
| } |
| } else { |
| if (data != '-') { |
| series[seriesIndex].data[dataIndex] = accMath.accAdd(series[seriesIndex].data[dataIndex], ecData.get(dragged, 'value')); |
| } else { |
| series[seriesIndex].data[dataIndex] = ecData.get(dragged, 'value'); |
| } |
| } |
| } |
| status.dragIn = status.dragIn || true; |
| this.isDrop = false; |
| var self = this; |
| setTimeout(function () { |
| self.zr.trigger('mousemove', param.event); |
| }, 300); |
| return; |
| }, |
| ondragend: function (param, status) { |
| if (!this.isDragend || !param.target || status.dragOut) { |
| return; |
| } |
| var target = param.target; |
| var seriesIndex = ecData.get(target, 'seriesIndex'); |
| var dataIndex = ecData.get(target, 'dataIndex'); |
| var series = this.series; |
| if (series[seriesIndex].data[dataIndex].value != null) { |
| series[seriesIndex].data[dataIndex].value = '-'; |
| var name = series[seriesIndex].data[dataIndex].name; |
| var legend = this.component.legend; |
| if (legend && legend.getRelatedAmount(name) === 0) { |
| legend.del(name); |
| } |
| } else { |
| series[seriesIndex].data[dataIndex] = '-'; |
| } |
| status.dragOut = true; |
| status.needRefresh = true; |
| this.isDragend = false; |
| return; |
| }, |
| onlegendSelected: function (param, status) { |
| var legendSelected = param.selected; |
| for (var itemName in this.selectedMap) { |
| if (this.selectedMap[itemName] != legendSelected[itemName]) { |
| status.needRefresh = true; |
| } |
| this.selectedMap[itemName] = legendSelected[itemName]; |
| } |
| return; |
| }, |
| _buildPosition: function () { |
| this._symbol = this.option.symbolList; |
| this._sIndex2ShapeMap = {}; |
| this._sIndex2ColorMap = {}; |
| this.selectedMap = {}; |
| this.xMarkMap = {}; |
| var series = this.series; |
| var _position2sIndexMap = { |
| top: [], |
| bottom: [], |
| left: [], |
| right: [], |
| other: [] |
| }; |
| var xAxisIndex; |
| var yAxisIndex; |
| var xAxis; |
| var yAxis; |
| for (var i = 0, l = series.length; i < l; i++) { |
| if (series[i].type === this.type) { |
| series[i] = this.reformOption(series[i]); |
| this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink; |
| xAxisIndex = series[i].xAxisIndex; |
| yAxisIndex = series[i].yAxisIndex; |
| xAxis = this.component.xAxis.getAxis(xAxisIndex); |
| yAxis = this.component.yAxis.getAxis(yAxisIndex); |
| if (xAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY) { |
| _position2sIndexMap[xAxis.getPosition()].push(i); |
| } else if (yAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY) { |
| _position2sIndexMap[yAxis.getPosition()].push(i); |
| } else { |
| _position2sIndexMap.other.push(i); |
| } |
| } |
| } |
| for (var position in _position2sIndexMap) { |
| if (_position2sIndexMap[position].length > 0) { |
| this._buildSinglePosition(position, _position2sIndexMap[position]); |
| } |
| } |
| this.addShapeList(); |
| }, |
| _buildSinglePosition: function (position, seriesArray) { |
| var mapData = this._mapData(seriesArray); |
| var locationMap = mapData.locationMap; |
| var maxDataLength = mapData.maxDataLength; |
| if (maxDataLength === 0 || locationMap.length === 0) { |
| return; |
| } |
| switch (position) { |
| case 'bottom': |
| case 'top': |
| this._buildHorizontal(seriesArray, maxDataLength, locationMap, this.xMarkMap); |
| break; |
| case 'left': |
| case 'right': |
| this._buildVertical(seriesArray, maxDataLength, locationMap, this.xMarkMap); |
| break; |
| case 'other': |
| this._buildOther(seriesArray, maxDataLength, locationMap, this.xMarkMap); |
| break; |
| } |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| this.buildMark(seriesArray[i]); |
| } |
| }, |
| _mapData: function (seriesArray) { |
| var series = this.series; |
| var serie; |
| var dataIndex = 0; |
| var stackMap = {}; |
| var magicStackKey = '__kener__stack__'; |
| var stackKey; |
| var serieName; |
| var legend = this.component.legend; |
| var locationMap = []; |
| var maxDataLength = 0; |
| var iconShape; |
| for (var i = 0, l = seriesArray.length; i < l; i++) { |
| serie = series[seriesArray[i]]; |
| serieName = serie.name; |
| this._sIndex2ShapeMap[seriesArray[i]] = this._sIndex2ShapeMap[seriesArray[i]] || this.query(serie, 'symbol') || this._symbol[i % this._symbol.length]; |
| if (legend) { |
| this.selectedMap[serieName] = legend.isSelected(serieName); |
| this._sIndex2ColorMap[seriesArray[i]] = legend.getColor(serieName); |
| iconShape = legend.getItemShape(serieName); |
| if (iconShape) { |
| var style = iconShape.style; |
| if (this.type == ecConfig.CHART_TYPE_LINE) { |
| style.iconType = 'legendLineIcon'; |
| style.symbol = this._sIndex2ShapeMap[seriesArray[i]]; |
| } else if (serie.itemStyle.normal.barBorderWidth > 0) { |
| var highlightStyle = iconShape.highlightStyle; |
| style.brushType = 'both'; |
| style.x += 1; |
| style.y += 1; |
| style.width -= 2; |
| style.height -= 2; |
| style.strokeColor = highlightStyle.strokeColor = serie.itemStyle.normal.barBorderColor; |
| highlightStyle.lineWidth = 3; |
| } |
| legend.setItemShape(serieName, iconShape); |
| } |
| } else { |
| this.selectedMap[serieName] = true; |
| this._sIndex2ColorMap[seriesArray[i]] = this.zr.getColor(seriesArray[i]); |
| } |
| if (this.selectedMap[serieName]) { |
| stackKey = serie.stack || magicStackKey + seriesArray[i]; |
| if (stackMap[stackKey] == null) { |
| stackMap[stackKey] = dataIndex; |
| locationMap[dataIndex] = [seriesArray[i]]; |
| dataIndex++; |
| } else { |
| locationMap[stackMap[stackKey]].push(seriesArray[i]); |
| } |
| } |
| maxDataLength = Math.max(maxDataLength, serie.data.length); |
| } |
| return { |
| locationMap: locationMap, |
| maxDataLength: maxDataLength |
| }; |
| }, |
| _calculMarkMapXY: function (xMarkMap, locationMap, xy) { |
| var series = this.series; |
| for (var j = 0, k = locationMap.length; j < k; j++) { |
| for (var m = 0, n = locationMap[j].length; m < n; m++) { |
| var seriesIndex = locationMap[j][m]; |
| var valueIndex = xy == 'xy' ? 0 : ''; |
| var grid = this.component.grid; |
| var tarMark = xMarkMap[seriesIndex]; |
| if (xy.indexOf('x') != '-1') { |
| if (tarMark['counter' + valueIndex] > 0) { |
| tarMark['average' + valueIndex] = tarMark['sum' + valueIndex] / tarMark['counter' + valueIndex]; |
| } |
| var x = this.component.xAxis.getAxis(series[seriesIndex].xAxisIndex || 0).getCoord(tarMark['average' + valueIndex]); |
| tarMark['averageLine' + valueIndex] = [ |
| [ |
| x, |
| grid.getYend() |
| ], |
| [ |
| x, |
| grid.getY() |
| ] |
| ]; |
| tarMark['minLine' + valueIndex] = [ |
| [ |
| tarMark['minX' + valueIndex], |
| grid.getYend() |
| ], |
| [ |
| tarMark['minX' + valueIndex], |
| grid.getY() |
| ] |
| ]; |
| tarMark['maxLine' + valueIndex] = [ |
| [ |
| tarMark['maxX' + valueIndex], |
| grid.getYend() |
| ], |
| [ |
| tarMark['maxX' + valueIndex], |
| grid.getY() |
| ] |
| ]; |
| tarMark.isHorizontal = false; |
| } |
| valueIndex = xy == 'xy' ? 1 : ''; |
| if (xy.indexOf('y') != '-1') { |
| if (tarMark['counter' + valueIndex] > 0) { |
| tarMark['average' + valueIndex] = tarMark['sum' + valueIndex] / tarMark['counter' + valueIndex]; |
| } |
| var y = this.component.yAxis.getAxis(series[seriesIndex].yAxisIndex || 0).getCoord(tarMark['average' + valueIndex]); |
| tarMark['averageLine' + valueIndex] = [ |
| [ |
| grid.getX(), |
| y |
| ], |
| [ |
| grid.getXend(), |
| y |
| ] |
| ]; |
| tarMark['minLine' + valueIndex] = [ |
| [ |
| grid.getX(), |
| tarMark['minY' + valueIndex] |
| ], |
| [ |
| grid.getXend(), |
| tarMark['minY' + valueIndex] |
| ] |
| ]; |
| tarMark['maxLine' + valueIndex] = [ |
| [ |
| grid.getX(), |
| tarMark['maxY' + valueIndex] |
| ], |
| [ |
| grid.getXend(), |
| tarMark['maxY' + valueIndex] |
| ] |
| ]; |
| tarMark.isHorizontal = true; |
| } |
| } |
| } |
| }, |
| addLabel: function (tarShape, serie, data, name, orient) { |
| var queryTarget = [ |
| data, |
| serie |
| ]; |
| var nLabel = this.deepMerge(queryTarget, 'itemStyle.normal.label'); |
| var eLabel = this.deepMerge(queryTarget, 'itemStyle.emphasis.label'); |
| var nTextStyle = nLabel.textStyle || {}; |
| var eTextStyle = eLabel.textStyle || {}; |
| if (nLabel.show) { |
| var style = tarShape.style; |
| style.text = this._getLabelText(serie, data, name, 'normal'); |
| style.textPosition = nLabel.position == null ? orient === 'horizontal' ? 'right' : 'top' : nLabel.position; |
| style.textColor = nTextStyle.color; |
| style.textFont = this.getFont(nTextStyle); |
| style.textAlign = nTextStyle.align; |
| style.textBaseline = nTextStyle.baseline; |
| } |
| if (eLabel.show) { |
| var highlightStyle = tarShape.highlightStyle; |
| highlightStyle.text = this._getLabelText(serie, data, name, 'emphasis'); |
| highlightStyle.textPosition = nLabel.show ? tarShape.style.textPosition : eLabel.position == null ? orient === 'horizontal' ? 'right' : 'top' : eLabel.position; |
| highlightStyle.textColor = eTextStyle.color; |
| highlightStyle.textFont = this.getFont(eTextStyle); |
| highlightStyle.textAlign = eTextStyle.align; |
| highlightStyle.textBaseline = eTextStyle.baseline; |
| } |
| return tarShape; |
| }, |
| _getLabelText: function (serie, data, name, status) { |
| var formatter = this.deepQuery([ |
| data, |
| serie |
| ], 'itemStyle.' + status + '.label.formatter'); |
| if (!formatter && status === 'emphasis') { |
| formatter = this.deepQuery([ |
| data, |
| serie |
| ], 'itemStyle.normal.label.formatter'); |
| } |
| var value = this.getDataFromOption(data, '-'); |
| if (formatter) { |
| if (typeof formatter === 'function') { |
| return formatter.call(this.myChart, { |
| seriesName: serie.name, |
| series: serie, |
| name: name, |
| value: value, |
| data: data, |
| status: status |
| }); |
| } else if (typeof formatter === 'string') { |
| formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}').replace('{a0}', serie.name).replace('{b0}', name).replace('{c0}', this.numAddCommas(value)); |
| return formatter; |
| } |
| } else { |
| if (value instanceof Array) { |
| return value[2] != null ? this.numAddCommas(value[2]) : value[0] + ' , ' + value[1]; |
| } else { |
| return this.numAddCommas(value); |
| } |
| } |
| }, |
| buildMark: function (seriesIndex) { |
| var serie = this.series[seriesIndex]; |
| if (this.selectedMap[serie.name]) { |
| serie.markLine && this._buildMarkLine(seriesIndex); |
| serie.markPoint && this._buildMarkPoint(seriesIndex); |
| } |
| }, |
| _buildMarkPoint: function (seriesIndex) { |
| var attachStyle = (this.markAttachStyle || {})[seriesIndex]; |
| var serie = this.series[seriesIndex]; |
| var mpData; |
| var pos; |
| var markPoint = zrUtil.clone(serie.markPoint); |
| for (var i = 0, l = markPoint.data.length; i < l; i++) { |
| mpData = markPoint.data[i]; |
| pos = this.getMarkCoord(seriesIndex, mpData); |
| mpData.x = mpData.x != null ? mpData.x : pos[0]; |
| mpData.y = mpData.y != null ? mpData.y : pos[1]; |
| if (mpData.type && (mpData.type === 'max' || mpData.type === 'min')) { |
| mpData.value = pos[3]; |
| mpData.name = mpData.name || mpData.type; |
| mpData.symbolSize = mpData.symbolSize || zrArea.getTextWidth(pos[3], this.getFont()) / 2 + 5; |
| } |
| } |
| var shapeList = this._markPoint(seriesIndex, markPoint); |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| var tarShape = shapeList[i]; |
| tarShape.zlevel = serie.zlevel; |
| tarShape.z = serie.z + 1; |
| for (var key in attachStyle) { |
| tarShape[key] = zrUtil.clone(attachStyle[key]); |
| } |
| this.shapeList.push(tarShape); |
| } |
| if (this.type === ecConfig.CHART_TYPE_FORCE || this.type === ecConfig.CHART_TYPE_CHORD) { |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| this.zr.addShape(shapeList[i]); |
| } |
| } |
| }, |
| _buildMarkLine: function (seriesIndex) { |
| var attachStyle = (this.markAttachStyle || {})[seriesIndex]; |
| var serie = this.series[seriesIndex]; |
| var pos; |
| var markLine = zrUtil.clone(serie.markLine); |
| for (var i = 0, l = markLine.data.length; i < l; i++) { |
| var mlData = markLine.data[i]; |
| if (mlData.type && (mlData.type === 'max' || mlData.type === 'min' || mlData.type === 'average')) { |
| pos = this.getMarkCoord(seriesIndex, mlData); |
| markLine.data[i] = [ |
| zrUtil.clone(mlData), |
| {} |
| ]; |
| markLine.data[i][0].name = mlData.name || mlData.type; |
| markLine.data[i][0].value = mlData.type !== 'average' ? pos[3] : +pos[3].toFixed(markLine.precision != null ? markLine.precision : this.deepQuery([ |
| this.ecTheme, |
| ecConfig |
| ], 'markLine.precision')); |
| pos = pos[2]; |
| mlData = [ |
| {}, |
| {} |
| ]; |
| } else { |
| pos = [ |
| this.getMarkCoord(seriesIndex, mlData[0]), |
| this.getMarkCoord(seriesIndex, mlData[1]) |
| ]; |
| } |
| if (pos == null || pos[0] == null || pos[1] == null) { |
| continue; |
| } |
| markLine.data[i][0].x = mlData[0].x != null ? mlData[0].x : pos[0][0]; |
| markLine.data[i][0].y = mlData[0].y != null ? mlData[0].y : pos[0][1]; |
| markLine.data[i][1].x = mlData[1].x != null ? mlData[1].x : pos[1][0]; |
| markLine.data[i][1].y = mlData[1].y != null ? mlData[1].y : pos[1][1]; |
| } |
| var shapeList = this._markLine(seriesIndex, markLine); |
| var isLarge = markLine.large; |
| if (isLarge) { |
| var shapeBundle = new ShapeBundle({ style: { shapeList: shapeList } }); |
| var firstShape = shapeList[0]; |
| if (firstShape) { |
| zrUtil.merge(shapeBundle.style, firstShape.style); |
| zrUtil.merge(shapeBundle.highlightStyle = {}, firstShape.highlightStyle); |
| shapeBundle.style.brushType = 'stroke'; |
| shapeBundle.zlevel = serie.zlevel; |
| shapeBundle.z = serie.z + 1; |
| shapeBundle.hoverable = false; |
| for (var key in attachStyle) { |
| shapeBundle[key] = zrUtil.clone(attachStyle[key]); |
| } |
| } |
| this.shapeList.push(shapeBundle); |
| this.zr.addShape(shapeBundle); |
| shapeBundle._mark = 'largeLine'; |
| var effect = markLine.effect; |
| if (effect.show) { |
| shapeBundle.effect = effect; |
| } |
| } else { |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| var tarShape = shapeList[i]; |
| tarShape.zlevel = serie.zlevel; |
| tarShape.z = serie.z + 1; |
| for (var key in attachStyle) { |
| tarShape[key] = zrUtil.clone(attachStyle[key]); |
| } |
| this.shapeList.push(tarShape); |
| } |
| if (this.type === ecConfig.CHART_TYPE_FORCE || this.type === ecConfig.CHART_TYPE_CHORD) { |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| this.zr.addShape(shapeList[i]); |
| } |
| } |
| } |
| }, |
| _markPoint: function (seriesIndex, mpOption) { |
| var serie = this.series[seriesIndex]; |
| var component = this.component; |
| zrUtil.merge(zrUtil.merge(mpOption, zrUtil.clone(this.ecTheme.markPoint || {})), zrUtil.clone(ecConfig.markPoint)); |
| mpOption.name = serie.name; |
| var pList = []; |
| var data = mpOption.data; |
| var itemShape; |
| var dataRange = component.dataRange; |
| var legend = component.legend; |
| var color; |
| var value; |
| var queryTarget; |
| var nColor; |
| var eColor; |
| var effect; |
| var zrWidth = this.zr.getWidth(); |
| var zrHeight = this.zr.getHeight(); |
| if (!mpOption.large) { |
| for (var i = 0, l = data.length; i < l; i++) { |
| if (data[i].x == null || data[i].y == null) { |
| continue; |
| } |
| value = data[i].value != null ? data[i].value : ''; |
| if (legend) { |
| color = legend.getColor(serie.name); |
| } |
| if (dataRange) { |
| color = isNaN(value) ? color : dataRange.getColor(value); |
| queryTarget = [ |
| data[i], |
| mpOption |
| ]; |
| nColor = this.deepQuery(queryTarget, 'itemStyle.normal.color') || color; |
| eColor = this.deepQuery(queryTarget, 'itemStyle.emphasis.color') || nColor; |
| if (nColor == null && eColor == null) { |
| continue; |
| } |
| } |
| color = color == null ? this.zr.getColor(seriesIndex) : color; |
| data[i].tooltip = data[i].tooltip || mpOption.tooltip || { trigger: 'item' }; |
| data[i].name = data[i].name != null ? data[i].name : ''; |
| data[i].value = value; |
| itemShape = this.getSymbolShape(mpOption, seriesIndex, data[i], i, data[i].name, this.parsePercent(data[i].x, zrWidth), this.parsePercent(data[i].y, zrHeight), 'pin', color, 'rgba(0,0,0,0)', 'horizontal'); |
| itemShape._mark = 'point'; |
| effect = this.deepMerge([ |
| data[i], |
| mpOption |
| ], 'effect'); |
| if (effect.show) { |
| itemShape.effect = effect; |
| } |
| if (serie.type === ecConfig.CHART_TYPE_MAP) { |
| itemShape._geo = this.getMarkGeo(data[i]); |
| } |
| ecData.pack(itemShape, serie, seriesIndex, data[i], i, data[i].name, value); |
| pList.push(itemShape); |
| } |
| } else { |
| itemShape = this.getLargeMarkPointShape(seriesIndex, mpOption); |
| itemShape._mark = 'largePoint'; |
| itemShape && pList.push(itemShape); |
| } |
| return pList; |
| }, |
| _markLine: function () { |
| function normalizeOptionValue(mlOption, key) { |
| mlOption[key] = mlOption[key] instanceof Array ? mlOption[key].length > 1 ? mlOption[key] : [ |
| mlOption[key][0], |
| mlOption[key][0] |
| ] : [ |
| mlOption[key], |
| mlOption[key] |
| ]; |
| } |
| return function (seriesIndex, mlOption) { |
| var serie = this.series[seriesIndex]; |
| var component = this.component; |
| var dataRange = component.dataRange; |
| var legend = component.legend; |
| zrUtil.merge(zrUtil.merge(mlOption, zrUtil.clone(this.ecTheme.markLine || {})), zrUtil.clone(ecConfig.markLine)); |
| var defaultColor = legend ? legend.getColor(serie.name) : this.zr.getColor(seriesIndex); |
| normalizeOptionValue(mlOption, 'symbol'); |
| normalizeOptionValue(mlOption, 'symbolSize'); |
| normalizeOptionValue(mlOption, 'symbolRotate'); |
| var data = mlOption.data; |
| var edges = []; |
| var zrWidth = this.zr.getWidth(); |
| var zrHeight = this.zr.getHeight(); |
| for (var i = 0; i < data.length; i++) { |
| var mlData = data[i]; |
| if (isCoordAvailable(mlData[0]) && isCoordAvailable(mlData[1])) { |
| var mergeData = this.deepMerge(mlData); |
| var queryTarget = [ |
| mergeData, |
| mlOption |
| ]; |
| var color = defaultColor; |
| var value = mergeData.value != null ? mergeData.value : ''; |
| if (dataRange) { |
| color = isNaN(value) ? color : dataRange.getColor(value); |
| var nColor = this.deepQuery(queryTarget, 'itemStyle.normal.color') || color; |
| var eColor = this.deepQuery(queryTarget, 'itemStyle.emphasis.color') || nColor; |
| if (nColor == null && eColor == null) { |
| continue; |
| } |
| } |
| mlData[0].tooltip = mergeData.tooltip || mlOption.tooltip || { trigger: 'item' }; |
| mlData[0].name = mlData[0].name || ''; |
| mlData[1].name = mlData[1].name || ''; |
| mlData[0].value = value; |
| edges.push({ |
| points: [ |
| [ |
| this.parsePercent(mlData[0].x, zrWidth), |
| this.parsePercent(mlData[0].y, zrHeight) |
| ], |
| [ |
| this.parsePercent(mlData[1].x, zrWidth), |
| this.parsePercent(mlData[1].y, zrHeight) |
| ] |
| ], |
| rawData: mlData, |
| color: color |
| }); |
| } |
| } |
| var enableBundling = this.query(mlOption, 'bundling.enable'); |
| if (enableBundling) { |
| var edgeBundling = new EdgeBundling(); |
| edgeBundling.maxTurningAngle = this.query(mlOption, 'bundling.maxTurningAngle') / 180 * Math.PI; |
| edges = edgeBundling.run(edges); |
| } |
| mlOption.name = serie.name; |
| var shapeList = []; |
| for (var i = 0, l = edges.length; i < l; i++) { |
| var edge = edges[i]; |
| var rawEdge = edge.rawEdge || edge; |
| var mlData = rawEdge.rawData; |
| var value = mlData.value != null ? mlData.value : ''; |
| var itemShape = this.getMarkLineShape(mlOption, seriesIndex, mlData, i, edge.points, enableBundling, rawEdge.color); |
| itemShape._mark = 'line'; |
| var effect = this.deepMerge([ |
| mlData[0], |
| mlData[1], |
| mlOption |
| ], 'effect'); |
| if (effect.show) { |
| itemShape.effect = effect; |
| itemShape.effect.large = mlOption.large; |
| } |
| if (serie.type === ecConfig.CHART_TYPE_MAP) { |
| itemShape._geo = [ |
| this.getMarkGeo(mlData[0]), |
| this.getMarkGeo(mlData[1]) |
| ]; |
| } |
| ecData.pack(itemShape, serie, seriesIndex, mlData[0], i, mlData[0].name + (mlData[1].name !== '' ? ' > ' + mlData[1].name : ''), value); |
| shapeList.push(itemShape); |
| } |
| return shapeList; |
| }; |
| }(), |
| getMarkCoord: function () { |
| return [ |
| 0, |
| 0 |
| ]; |
| }, |
| getSymbolShape: function (serie, seriesIndex, data, dataIndex, name, x, y, symbol, color, emptyColor, orient) { |
| var queryTarget = [ |
| data, |
| serie |
| ]; |
| var value = this.getDataFromOption(data, '-'); |
| symbol = this.deepQuery(queryTarget, 'symbol') || symbol; |
| var symbolSize = this.deepQuery(queryTarget, 'symbolSize'); |
| symbolSize = typeof symbolSize === 'function' ? symbolSize(value) : symbolSize; |
| if (typeof symbolSize === 'number') { |
| symbolSize = [ |
| symbolSize, |
| symbolSize |
| ]; |
| } |
| var symbolRotate = this.deepQuery(queryTarget, 'symbolRotate'); |
| var normal = this.deepMerge(queryTarget, 'itemStyle.normal'); |
| var emphasis = this.deepMerge(queryTarget, 'itemStyle.emphasis'); |
| var nBorderWidth = normal.borderWidth != null ? normal.borderWidth : normal.lineStyle && normal.lineStyle.width; |
| if (nBorderWidth == null) { |
| nBorderWidth = symbol.match('empty') ? 2 : 0; |
| } |
| var eBorderWidth = emphasis.borderWidth != null ? emphasis.borderWidth : emphasis.lineStyle && emphasis.lineStyle.width; |
| if (eBorderWidth == null) { |
| eBorderWidth = nBorderWidth + 2; |
| } |
| var nColor = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data); |
| var eColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data); |
| var width = symbolSize[0]; |
| var height = symbolSize[1]; |
| var itemShape = new IconShape({ |
| style: { |
| iconType: symbol.replace('empty', '').toLowerCase(), |
| x: x - width, |
| y: y - height, |
| width: width * 2, |
| height: height * 2, |
| brushType: 'both', |
| color: symbol.match('empty') ? emptyColor : nColor || color, |
| strokeColor: normal.borderColor || nColor || color, |
| lineWidth: nBorderWidth |
| }, |
| highlightStyle: { |
| color: symbol.match('empty') ? emptyColor : eColor || nColor || color, |
| strokeColor: emphasis.borderColor || normal.borderColor || eColor || nColor || color, |
| lineWidth: eBorderWidth |
| }, |
| clickable: this.deepQuery(queryTarget, 'clickable') |
| }); |
| if (symbol.match('image')) { |
| itemShape.style.image = symbol.replace(new RegExp('^image:\\/\\/'), ''); |
| itemShape = new ImageShape({ |
| style: itemShape.style, |
| highlightStyle: itemShape.highlightStyle, |
| clickable: this.deepQuery(queryTarget, 'clickable') |
| }); |
| } |
| if (symbolRotate != null) { |
| itemShape.rotation = [ |
| symbolRotate * Math.PI / 180, |
| x, |
| y |
| ]; |
| } |
| if (symbol.match('star')) { |
| itemShape.style.iconType = 'star'; |
| itemShape.style.n = symbol.replace('empty', '').replace('star', '') - 0 || 5; |
| } |
| if (symbol === 'none') { |
| itemShape.invisible = true; |
| itemShape.hoverable = false; |
| } |
| itemShape = this.addLabel(itemShape, serie, data, name, orient); |
| if (symbol.match('empty')) { |
| if (itemShape.style.textColor == null) { |
| itemShape.style.textColor = itemShape.style.strokeColor; |
| } |
| if (itemShape.highlightStyle.textColor == null) { |
| itemShape.highlightStyle.textColor = itemShape.highlightStyle.strokeColor; |
| } |
| } |
| ecData.pack(itemShape, serie, seriesIndex, data, dataIndex, name); |
| itemShape._x = x; |
| itemShape._y = y; |
| itemShape._dataIndex = dataIndex; |
| itemShape._seriesIndex = seriesIndex; |
| return itemShape; |
| }, |
| getMarkLineShape: function (mlOption, seriesIndex, data, dataIndex, points, bundling, color) { |
| var value0 = data[0].value != null ? data[0].value : '-'; |
| var value1 = data[1].value != null ? data[1].value : '-'; |
| var symbol = [ |
| data[0].symbol || mlOption.symbol[0], |
| data[1].symbol || mlOption.symbol[1] |
| ]; |
| var symbolSize = [ |
| data[0].symbolSize || mlOption.symbolSize[0], |
| data[1].symbolSize || mlOption.symbolSize[1] |
| ]; |
| symbolSize[0] = typeof symbolSize[0] === 'function' ? symbolSize[0](value0) : symbolSize[0]; |
| symbolSize[1] = typeof symbolSize[1] === 'function' ? symbolSize[1](value1) : symbolSize[1]; |
| var symbolRotate = [ |
| this.query(data[0], 'symbolRotate') || mlOption.symbolRotate[0], |
| this.query(data[1], 'symbolRotate') || mlOption.symbolRotate[1] |
| ]; |
| var queryTarget = [ |
| data[0], |
| data[1], |
| mlOption |
| ]; |
| var normal = this.deepMerge(queryTarget, 'itemStyle.normal'); |
| normal.color = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data); |
| var emphasis = this.deepMerge(queryTarget, 'itemStyle.emphasis'); |
| emphasis.color = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data); |
| var nlineStyle = normal.lineStyle; |
| var elineStyle = emphasis.lineStyle; |
| var nBorderWidth = nlineStyle.width; |
| if (nBorderWidth == null) { |
| nBorderWidth = normal.borderWidth; |
| } |
| var eBorderWidth = elineStyle.width; |
| if (eBorderWidth == null) { |
| eBorderWidth = emphasis.borderWidth != null ? emphasis.borderWidth : nBorderWidth + 2; |
| } |
| var smoothness = this.deepQuery(queryTarget, 'smoothness'); |
| if (!this.deepQuery(queryTarget, 'smooth')) { |
| smoothness = 0; |
| } |
| var ShapeCtor = bundling ? PolylineShape : MarkLineShape; |
| var itemShape = new ShapeCtor({ |
| style: { |
| symbol: symbol, |
| symbolSize: symbolSize, |
| symbolRotate: symbolRotate, |
| brushType: 'both', |
| lineType: nlineStyle.type, |
| shadowColor: nlineStyle.shadowColor || nlineStyle.color || normal.borderColor || normal.color || color, |
| shadowBlur: nlineStyle.shadowBlur, |
| shadowOffsetX: nlineStyle.shadowOffsetX, |
| shadowOffsetY: nlineStyle.shadowOffsetY, |
| color: normal.color || color, |
| strokeColor: nlineStyle.color || normal.borderColor || normal.color || color, |
| lineWidth: nBorderWidth, |
| symbolBorderColor: normal.borderColor || normal.color || color, |
| symbolBorder: normal.borderWidth |
| }, |
| highlightStyle: { |
| shadowColor: elineStyle.shadowColor, |
| shadowBlur: elineStyle.shadowBlur, |
| shadowOffsetX: elineStyle.shadowOffsetX, |
| shadowOffsetY: elineStyle.shadowOffsetY, |
| color: emphasis.color || normal.color || color, |
| strokeColor: elineStyle.color || nlineStyle.color || emphasis.borderColor || normal.borderColor || emphasis.color || normal.color || color, |
| lineWidth: eBorderWidth, |
| symbolBorderColor: emphasis.borderColor || normal.borderColor || emphasis.color || normal.color || color, |
| symbolBorder: emphasis.borderWidth == null ? normal.borderWidth + 2 : emphasis.borderWidth |
| }, |
| clickable: this.deepQuery(queryTarget, 'clickable') |
| }); |
| var shapeStyle = itemShape.style; |
| if (bundling) { |
| shapeStyle.pointList = points; |
| shapeStyle.smooth = smoothness; |
| } else { |
| shapeStyle.xStart = points[0][0]; |
| shapeStyle.yStart = points[0][1]; |
| shapeStyle.xEnd = points[1][0]; |
| shapeStyle.yEnd = points[1][1]; |
| shapeStyle.curveness = smoothness; |
| itemShape.updatePoints(itemShape.style); |
| } |
| itemShape = this.addLabel(itemShape, mlOption, data[0], data[0].name + ' : ' + data[1].name); |
| return itemShape; |
| }, |
| getLargeMarkPointShape: function (seriesIndex, mpOption) { |
| var serie = this.series[seriesIndex]; |
| var component = this.component; |
| var data = mpOption.data; |
| var itemShape; |
| var dataRange = component.dataRange; |
| var legend = component.legend; |
| var color; |
| var value; |
| var queryTarget = [ |
| data[0], |
| mpOption |
| ]; |
| var nColor; |
| var eColor; |
| var effect; |
| if (legend) { |
| color = legend.getColor(serie.name); |
| } |
| if (dataRange) { |
| value = data[0].value != null ? data[0].value : ''; |
| color = isNaN(value) ? color : dataRange.getColor(value); |
| nColor = this.deepQuery(queryTarget, 'itemStyle.normal.color') || color; |
| eColor = this.deepQuery(queryTarget, 'itemStyle.emphasis.color') || nColor; |
| if (nColor == null && eColor == null) { |
| return; |
| } |
| } |
| color = this.deepMerge(queryTarget, 'itemStyle.normal').color || color; |
| var symbol = this.deepQuery(queryTarget, 'symbol') || 'circle'; |
| symbol = symbol.replace('empty', '').replace(/\d/g, ''); |
| effect = this.deepMerge([ |
| data[0], |
| mpOption |
| ], 'effect'); |
| var devicePixelRatio = window.devicePixelRatio || 1; |
| itemShape = new SymbolShape({ |
| style: { |
| pointList: data, |
| color: color, |
| strokeColor: color, |
| shadowColor: effect.shadowColor || color, |
| shadowBlur: (effect.shadowBlur != null ? effect.shadowBlur : 8) * devicePixelRatio, |
| size: this.deepQuery(queryTarget, 'symbolSize'), |
| iconType: symbol, |
| brushType: 'fill', |
| lineWidth: 1 |
| }, |
| draggable: false, |
| hoverable: false |
| }); |
| if (effect.show) { |
| itemShape.effect = effect; |
| } |
| return itemShape; |
| }, |
| backupShapeList: function () { |
| if (this.shapeList && this.shapeList.length > 0) { |
| this.lastShapeList = this.shapeList; |
| this.shapeList = []; |
| } else { |
| this.lastShapeList = []; |
| } |
| }, |
| addShapeList: function () { |
| var maxLenth = this.option.animationThreshold / (this.canvasSupported ? 2 : 4); |
| var lastShapeList = this.lastShapeList; |
| var shapeList = this.shapeList; |
| var isUpdate = lastShapeList.length > 0; |
| var duration = isUpdate ? this.query(this.option, 'animationDurationUpdate') : this.query(this.option, 'animationDuration'); |
| var easing = this.query(this.option, 'animationEasing'); |
| var delay; |
| var key; |
| var oldMap = {}; |
| var newMap = {}; |
| if (this.option.animation && !this.option.renderAsImage && shapeList.length < maxLenth && !this.motionlessOnce) { |
| for (var i = 0, l = lastShapeList.length; i < l; i++) { |
| key = this._getAnimationKey(lastShapeList[i]); |
| if (key.match('undefined')) { |
| this.zr.delShape(lastShapeList[i].id); |
| } else { |
| key += lastShapeList[i].type; |
| if (oldMap[key]) { |
| this.zr.delShape(lastShapeList[i].id); |
| } else { |
| oldMap[key] = lastShapeList[i]; |
| } |
| } |
| } |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| key = this._getAnimationKey(shapeList[i]); |
| if (key.match('undefined')) { |
| this.zr.addShape(shapeList[i]); |
| } else { |
| key += shapeList[i].type; |
| newMap[key] = shapeList[i]; |
| } |
| } |
| for (key in oldMap) { |
| if (!newMap[key]) { |
| this.zr.delShape(oldMap[key].id); |
| } |
| } |
| for (key in newMap) { |
| if (oldMap[key]) { |
| this.zr.delShape(oldMap[key].id); |
| this._animateMod(oldMap[key], newMap[key], duration, easing, 0, isUpdate); |
| } else { |
| delay = (this.type == ecConfig.CHART_TYPE_LINE || this.type == ecConfig.CHART_TYPE_RADAR) && key.indexOf('icon') !== 0 ? duration / 2 : 0; |
| this._animateMod(false, newMap[key], duration, easing, delay, isUpdate); |
| } |
| } |
| this.zr.refresh(); |
| this.animationEffect(); |
| } else { |
| this.motionlessOnce = false; |
| this.zr.delShape(lastShapeList); |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| this.zr.addShape(shapeList[i]); |
| } |
| } |
| }, |
| _getAnimationKey: function (shape) { |
| if (this.type != ecConfig.CHART_TYPE_MAP && this.type != ecConfig.CHART_TYPE_TREEMAP && this.type != ecConfig.CHART_TYPE_VENN && this.type != ecConfig.CHART_TYPE_TREE) { |
| return ecData.get(shape, 'seriesIndex') + '_' + ecData.get(shape, 'dataIndex') + (shape._mark ? shape._mark : '') + (this.type === ecConfig.CHART_TYPE_RADAR ? ecData.get(shape, 'special') : ''); |
| } else { |
| return ecData.get(shape, 'seriesIndex') + '_' + ecData.get(shape, 'dataIndex') + (shape._mark ? shape._mark : 'undefined'); |
| } |
| }, |
| _animateMod: function (oldShape, newShape, duration, easing, delay, isUpdate) { |
| switch (newShape.type) { |
| case 'polyline': |
| case 'half-smooth-polygon': |
| ecAnimation.pointList(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'rectangle': |
| ecAnimation.rectangle(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'image': |
| case 'icon': |
| ecAnimation.icon(this.zr, oldShape, newShape, duration, easing, delay); |
| break; |
| case 'candle': |
| if (!isUpdate) { |
| ecAnimation.candle(this.zr, oldShape, newShape, duration, easing); |
| } else { |
| this.zr.addShape(newShape); |
| } |
| break; |
| case 'ring': |
| case 'sector': |
| case 'circle': |
| if (!isUpdate) { |
| ecAnimation.ring(this.zr, oldShape, newShape, duration + (ecData.get(newShape, 'dataIndex') || 0) % 20 * 100, easing); |
| } else if (newShape.type === 'sector') { |
| ecAnimation.sector(this.zr, oldShape, newShape, duration, easing); |
| } else { |
| this.zr.addShape(newShape); |
| } |
| break; |
| case 'text': |
| ecAnimation.text(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'polygon': |
| if (!isUpdate) { |
| ecAnimation.polygon(this.zr, oldShape, newShape, duration, easing); |
| } else { |
| ecAnimation.pointList(this.zr, oldShape, newShape, duration, easing); |
| } |
| break; |
| case 'ribbon': |
| ecAnimation.ribbon(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'gauge-pointer': |
| ecAnimation.gaugePointer(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'mark-line': |
| ecAnimation.markline(this.zr, oldShape, newShape, duration, easing); |
| break; |
| case 'bezier-curve': |
| case 'line': |
| ecAnimation.line(this.zr, oldShape, newShape, duration, easing); |
| break; |
| default: |
| this.zr.addShape(newShape); |
| break; |
| } |
| }, |
| animationMark: function (duration, easing, shapeList) { |
| var shapeList = shapeList || this.shapeList; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| if (!shapeList[i]._mark) { |
| continue; |
| } |
| this._animateMod(false, shapeList[i], duration, easing, 0, true); |
| } |
| this.animationEffect(shapeList); |
| }, |
| animationEffect: function (shapeList) { |
| !shapeList && this.clearEffectShape(); |
| shapeList = shapeList || this.shapeList; |
| if (shapeList == null) { |
| return; |
| } |
| var zlevel = ecConfig.EFFECT_ZLEVEL; |
| if (this.canvasSupported) { |
| this.zr.modLayer(zlevel, { |
| motionBlur: true, |
| lastFrameAlpha: this.option.effectBlendAlpha || ecConfig.effectBlendAlpha |
| }); |
| } |
| var shape; |
| for (var i = 0, l = shapeList.length; i < l; i++) { |
| shape = shapeList[i]; |
| if (!(shape._mark && shape.effect && shape.effect.show && ecEffect[shape._mark])) { |
| continue; |
| } |
| ecEffect[shape._mark](this.zr, this.effectList, shape, zlevel); |
| this.effectList[this.effectList.length - 1]._mark = shape._mark; |
| } |
| }, |
| clearEffectShape: function (clearMotionBlur) { |
| var effectList = this.effectList; |
| if (this.zr && effectList && effectList.length > 0) { |
| clearMotionBlur && this.zr.modLayer(ecConfig.EFFECT_ZLEVEL, { motionBlur: false }); |
| this.zr.delShape(effectList); |
| for (var i = 0; i < effectList.length; i++) { |
| if (effectList[i].effectAnimator) { |
| effectList[i].effectAnimator.stop(); |
| } |
| } |
| } |
| this.effectList = []; |
| }, |
| addMark: function (seriesIndex, markData, markType) { |
| var serie = this.series[seriesIndex]; |
| if (this.selectedMap[serie.name]) { |
| var duration = this.query(this.option, 'animationDurationUpdate'); |
| var easing = this.query(this.option, 'animationEasing'); |
| var oriMarkData = serie[markType].data; |
| var lastLength = this.shapeList.length; |
| serie[markType].data = markData.data; |
| this['_build' + markType.replace('m', 'M')](seriesIndex); |
| if (this.option.animation && !this.option.renderAsImage) { |
| this.animationMark(duration, easing, this.shapeList.slice(lastLength)); |
| } else { |
| for (var i = lastLength, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| this.zr.refreshNextFrame(); |
| } |
| serie[markType].data = oriMarkData; |
| } |
| }, |
| delMark: function (seriesIndex, markName, markType) { |
| markType = markType.replace('mark', '').replace('large', '').toLowerCase(); |
| var serie = this.series[seriesIndex]; |
| if (this.selectedMap[serie.name]) { |
| var needRefresh = false; |
| var shapeList = [ |
| this.shapeList, |
| this.effectList |
| ]; |
| var len = 2; |
| while (len--) { |
| for (var i = 0, l = shapeList[len].length; i < l; i++) { |
| if (shapeList[len][i]._mark == markType && ecData.get(shapeList[len][i], 'seriesIndex') == seriesIndex && ecData.get(shapeList[len][i], 'name') == markName) { |
| this.zr.delShape(shapeList[len][i].id); |
| shapeList[len].splice(i, 1); |
| needRefresh = true; |
| break; |
| } |
| } |
| } |
| needRefresh && this.zr.refreshNextFrame(); |
| } |
| } |
| }; |
| zrUtil.inherits(Base, ComponentBase); |
| return Base; |
| });define('zrender/shape/Circle', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| 'use strict'; |
| var Base = require('./Base'); |
| var Circle = function (options) { |
| Base.call(this, options); |
| }; |
| Circle.prototype = { |
| type: 'circle', |
| buildPath: function (ctx, style) { |
| ctx.moveTo(style.x + style.r, style.y); |
| ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, true); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var lineWidth; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } else { |
| lineWidth = 0; |
| } |
| style.__rect = { |
| x: Math.round(style.x - style.r - lineWidth / 2), |
| y: Math.round(style.y - style.r - lineWidth / 2), |
| width: style.r * 2 + lineWidth, |
| height: style.r * 2 + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Circle, Base); |
| return Circle; |
| });define('echarts/util/accMath', [], function () { |
| function accDiv(arg1, arg2) { |
| var s1 = arg1.toString(); |
| var s2 = arg2.toString(); |
| var m = 0; |
| try { |
| m = s2.split('.')[1].length; |
| } catch (e) { |
| } |
| try { |
| m -= s1.split('.')[1].length; |
| } catch (e) { |
| } |
| return (s1.replace('.', '') - 0) / (s2.replace('.', '') - 0) * Math.pow(10, m); |
| } |
| function accMul(arg1, arg2) { |
| var s1 = arg1.toString(); |
| var s2 = arg2.toString(); |
| var m = 0; |
| try { |
| m += s1.split('.')[1].length; |
| } catch (e) { |
| } |
| try { |
| m += s2.split('.')[1].length; |
| } catch (e) { |
| } |
| return (s1.replace('.', '') - 0) * (s2.replace('.', '') - 0) / Math.pow(10, m); |
| } |
| function accAdd(arg1, arg2) { |
| var r1 = 0; |
| var r2 = 0; |
| try { |
| r1 = arg1.toString().split('.')[1].length; |
| } catch (e) { |
| } |
| try { |
| r2 = arg2.toString().split('.')[1].length; |
| } catch (e) { |
| } |
| var m = Math.pow(10, Math.max(r1, r2)); |
| return (Math.round(arg1 * m) + Math.round(arg2 * m)) / m; |
| } |
| function accSub(arg1, arg2) { |
| return accAdd(arg1, -arg2); |
| } |
| return { |
| accDiv: accDiv, |
| accMul: accMul, |
| accAdd: accAdd, |
| accSub: accSub |
| }; |
| });define('echarts/util/shape/Icon', [ |
| 'require', |
| 'zrender/tool/util', |
| 'zrender/shape/Star', |
| 'zrender/shape/Heart', |
| 'zrender/shape/Droplet', |
| 'zrender/shape/Image', |
| 'zrender/shape/Base' |
| ], function (require) { |
| var zrUtil = require('zrender/tool/util'); |
| function _iconMark(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y + style.height); |
| ctx.lineTo(x + 5 * dx, y + 14 * dy); |
| ctx.lineTo(x + style.width, y + 3 * dy); |
| ctx.lineTo(x + 13 * dx, y); |
| ctx.lineTo(x + 2 * dx, y + 11 * dy); |
| ctx.lineTo(x, y + style.height); |
| ctx.moveTo(x + 6 * dx, y + 10 * dy); |
| ctx.lineTo(x + 14 * dx, y + 2 * dy); |
| ctx.moveTo(x + 10 * dx, y + 13 * dy); |
| ctx.lineTo(x + style.width, y + 13 * dy); |
| ctx.moveTo(x + 13 * dx, y + 10 * dy); |
| ctx.lineTo(x + 13 * dx, y + style.height); |
| } |
| function _iconMarkUndo(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y + style.height); |
| ctx.lineTo(x + 5 * dx, y + 14 * dy); |
| ctx.lineTo(x + style.width, y + 3 * dy); |
| ctx.lineTo(x + 13 * dx, y); |
| ctx.lineTo(x + 2 * dx, y + 11 * dy); |
| ctx.lineTo(x, y + style.height); |
| ctx.moveTo(x + 6 * dx, y + 10 * dy); |
| ctx.lineTo(x + 14 * dx, y + 2 * dy); |
| ctx.moveTo(x + 10 * dx, y + 13 * dy); |
| ctx.lineTo(x + style.width, y + 13 * dy); |
| } |
| function _iconMarkClear(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x + 4 * dx, y + 15 * dy); |
| ctx.lineTo(x + 9 * dx, y + 13 * dy); |
| ctx.lineTo(x + 14 * dx, y + 8 * dy); |
| ctx.lineTo(x + 11 * dx, y + 5 * dy); |
| ctx.lineTo(x + 6 * dx, y + 10 * dy); |
| ctx.lineTo(x + 4 * dx, y + 15 * dy); |
| ctx.moveTo(x + 5 * dx, y); |
| ctx.lineTo(x + 11 * dx, y); |
| ctx.moveTo(x + 5 * dx, y + dy); |
| ctx.lineTo(x + 11 * dx, y + dy); |
| ctx.moveTo(x, y + 2 * dy); |
| ctx.lineTo(x + style.width, y + 2 * dy); |
| ctx.moveTo(x, y + 5 * dy); |
| ctx.lineTo(x + 3 * dx, y + style.height); |
| ctx.lineTo(x + 13 * dx, y + style.height); |
| ctx.lineTo(x + style.width, y + 5 * dy); |
| } |
| function _iconDataZoom(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y + 3 * dy); |
| ctx.lineTo(x + 6 * dx, y + 3 * dy); |
| ctx.moveTo(x + 3 * dx, y); |
| ctx.lineTo(x + 3 * dx, y + 6 * dy); |
| ctx.moveTo(x + 3 * dx, y + 8 * dy); |
| ctx.lineTo(x + 3 * dx, y + style.height); |
| ctx.lineTo(x + style.width, y + style.height); |
| ctx.lineTo(x + style.width, y + 3 * dy); |
| ctx.lineTo(x + 8 * dx, y + 3 * dy); |
| } |
| function _iconDataZoomReset(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x + 6 * dx, y); |
| ctx.lineTo(x + 2 * dx, y + 3 * dy); |
| ctx.lineTo(x + 6 * dx, y + 6 * dy); |
| ctx.moveTo(x + 2 * dx, y + 3 * dy); |
| ctx.lineTo(x + 14 * dx, y + 3 * dy); |
| ctx.lineTo(x + 14 * dx, y + 11 * dy); |
| ctx.moveTo(x + 2 * dx, y + 5 * dy); |
| ctx.lineTo(x + 2 * dx, y + 13 * dy); |
| ctx.lineTo(x + 14 * dx, y + 13 * dy); |
| ctx.moveTo(x + 10 * dx, y + 10 * dy); |
| ctx.lineTo(x + 14 * dx, y + 13 * dy); |
| ctx.lineTo(x + 10 * dx, y + style.height); |
| } |
| function _iconRestore(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| var r = style.width / 2; |
| ctx.lineWidth = 1.5; |
| ctx.arc(x + r, y + r, r - dx, 0, Math.PI * 2 / 3); |
| ctx.moveTo(x + 3 * dx, y + style.height); |
| ctx.lineTo(x + 0 * dx, y + 12 * dy); |
| ctx.lineTo(x + 5 * dx, y + 11 * dy); |
| ctx.moveTo(x, y + 8 * dy); |
| ctx.arc(x + r, y + r, r - dx, Math.PI, Math.PI * 5 / 3); |
| ctx.moveTo(x + 13 * dx, y); |
| ctx.lineTo(x + style.width, y + 4 * dy); |
| ctx.lineTo(x + 11 * dx, y + 5 * dy); |
| } |
| function _iconLineChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y + style.height); |
| ctx.lineTo(x + style.width, y + style.height); |
| ctx.moveTo(x + 2 * dx, y + 14 * dy); |
| ctx.lineTo(x + 7 * dx, y + 6 * dy); |
| ctx.lineTo(x + 11 * dx, y + 11 * dy); |
| ctx.lineTo(x + 15 * dx, y + 2 * dy); |
| } |
| function _iconBarChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y + style.height); |
| ctx.lineTo(x + style.width, y + style.height); |
| ctx.moveTo(x + 3 * dx, y + 14 * dy); |
| ctx.lineTo(x + 3 * dx, y + 6 * dy); |
| ctx.lineTo(x + 4 * dx, y + 6 * dy); |
| ctx.lineTo(x + 4 * dx, y + 14 * dy); |
| ctx.moveTo(x + 7 * dx, y + 14 * dy); |
| ctx.lineTo(x + 7 * dx, y + 2 * dy); |
| ctx.lineTo(x + 8 * dx, y + 2 * dy); |
| ctx.lineTo(x + 8 * dx, y + 14 * dy); |
| ctx.moveTo(x + 11 * dx, y + 14 * dy); |
| ctx.lineTo(x + 11 * dx, y + 9 * dy); |
| ctx.lineTo(x + 12 * dx, y + 9 * dy); |
| ctx.lineTo(x + 12 * dx, y + 14 * dy); |
| } |
| function _iconPieChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width - 2; |
| var height = style.height - 2; |
| var r = Math.min(width, height) / 2; |
| y += 2; |
| ctx.moveTo(x + r + 3, y + r - 3); |
| ctx.arc(x + r + 3, y + r - 3, r - 1, 0, -Math.PI / 2, true); |
| ctx.lineTo(x + r + 3, y + r - 3); |
| ctx.moveTo(x + r, y); |
| ctx.lineTo(x + r, y + r); |
| ctx.arc(x + r, y + r, r, -Math.PI / 2, Math.PI * 2, true); |
| ctx.lineTo(x + r, y + r); |
| ctx.lineWidth = 1.5; |
| } |
| function _iconFunnelChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| y -= dy; |
| ctx.moveTo(x + 1 * dx, y + 2 * dy); |
| ctx.lineTo(x + 15 * dx, y + 2 * dy); |
| ctx.lineTo(x + 14 * dx, y + 3 * dy); |
| ctx.lineTo(x + 2 * dx, y + 3 * dy); |
| ctx.moveTo(x + 3 * dx, y + 6 * dy); |
| ctx.lineTo(x + 13 * dx, y + 6 * dy); |
| ctx.lineTo(x + 12 * dx, y + 7 * dy); |
| ctx.lineTo(x + 4 * dx, y + 7 * dy); |
| ctx.moveTo(x + 5 * dx, y + 10 * dy); |
| ctx.lineTo(x + 11 * dx, y + 10 * dy); |
| ctx.lineTo(x + 10 * dx, y + 11 * dy); |
| ctx.lineTo(x + 6 * dx, y + 11 * dy); |
| ctx.moveTo(x + 7 * dx, y + 14 * dy); |
| ctx.lineTo(x + 9 * dx, y + 14 * dy); |
| ctx.lineTo(x + 8 * dx, y + 15 * dy); |
| ctx.lineTo(x + 7 * dx, y + 15 * dy); |
| } |
| function _iconForceChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| var dx = width / 16; |
| var dy = height / 16; |
| var r = Math.min(dx, dy) * 2; |
| ctx.moveTo(x + dx + r, y + dy + r); |
| ctx.arc(x + dx, y + dy, r, Math.PI / 4, Math.PI * 3); |
| ctx.lineTo(x + 7 * dx - r, y + 6 * dy - r); |
| ctx.arc(x + 7 * dx, y + 6 * dy, r, Math.PI / 4 * 5, Math.PI * 4); |
| ctx.arc(x + 7 * dx, y + 6 * dy, r / 2, Math.PI / 4 * 5, Math.PI * 4); |
| ctx.moveTo(x + 7 * dx - r / 2, y + 6 * dy + r); |
| ctx.lineTo(x + dx + r, y + 14 * dy - r); |
| ctx.arc(x + dx, y + 14 * dy, r, -Math.PI / 4, Math.PI * 2); |
| ctx.moveTo(x + 7 * dx + r / 2, y + 6 * dy); |
| ctx.lineTo(x + 14 * dx - r, y + 10 * dy - r / 2); |
| ctx.moveTo(x + 16 * dx, y + 10 * dy); |
| ctx.arc(x + 14 * dx, y + 10 * dy, r, 0, Math.PI * 3); |
| ctx.lineWidth = 1.5; |
| } |
| function _iconChordChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| var r = Math.min(width, height) / 2; |
| ctx.moveTo(x + width, y + height / 2); |
| ctx.arc(x + r, y + r, r, 0, Math.PI * 2); |
| ctx.arc(x + r, y, r, Math.PI / 4, Math.PI / 5 * 4); |
| ctx.arc(x, y + r, r, -Math.PI / 3, Math.PI / 3); |
| ctx.arc(x + width, y + height, r, Math.PI, Math.PI / 2 * 3); |
| ctx.lineWidth = 1.5; |
| } |
| function _iconStackChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| var dy = Math.round(height / 3); |
| var delta = Math.round((dy - 2) / 2); |
| var len = 3; |
| while (len--) { |
| ctx.rect(x, y + dy * len + delta, width, 2); |
| } |
| } |
| function _iconTiledChart(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| var dx = Math.round(width / 3); |
| var delta = Math.round((dx - 2) / 2); |
| var len = 3; |
| while (len--) { |
| ctx.rect(x + dx * len + delta, y, 2, height); |
| } |
| } |
| function _iconDataView(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| ctx.moveTo(x + dx, y); |
| ctx.lineTo(x + dx, y + style.height); |
| ctx.lineTo(x + 15 * dx, y + style.height); |
| ctx.lineTo(x + 15 * dx, y); |
| ctx.lineTo(x + dx, y); |
| ctx.moveTo(x + 3 * dx, y + 3 * dx); |
| ctx.lineTo(x + 13 * dx, y + 3 * dx); |
| ctx.moveTo(x + 3 * dx, y + 6 * dx); |
| ctx.lineTo(x + 13 * dx, y + 6 * dx); |
| ctx.moveTo(x + 3 * dx, y + 9 * dx); |
| ctx.lineTo(x + 13 * dx, y + 9 * dx); |
| ctx.moveTo(x + 3 * dx, y + 12 * dx); |
| ctx.lineTo(x + 9 * dx, y + 12 * dx); |
| } |
| function _iconSave(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| var dy = style.height / 16; |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y + style.height); |
| ctx.lineTo(x + style.width, y + style.height); |
| ctx.lineTo(x + style.width, y); |
| ctx.lineTo(x, y); |
| ctx.moveTo(x + 4 * dx, y); |
| ctx.lineTo(x + 4 * dx, y + 8 * dy); |
| ctx.lineTo(x + 12 * dx, y + 8 * dy); |
| ctx.lineTo(x + 12 * dx, y); |
| ctx.moveTo(x + 6 * dx, y + 11 * dy); |
| ctx.lineTo(x + 6 * dx, y + 13 * dy); |
| ctx.lineTo(x + 10 * dx, y + 13 * dy); |
| ctx.lineTo(x + 10 * dx, y + 11 * dy); |
| ctx.lineTo(x + 6 * dx, y + 11 * dy); |
| } |
| function _iconCross(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var width = style.width; |
| var height = style.height; |
| ctx.moveTo(x, y + height / 2); |
| ctx.lineTo(x + width, y + height / 2); |
| ctx.moveTo(x + width / 2, y); |
| ctx.lineTo(x + width / 2, y + height); |
| } |
| function _iconCircle(ctx, style) { |
| var width = style.width / 2; |
| var height = style.height / 2; |
| var r = Math.min(width, height); |
| ctx.moveTo(style.x + width + r, style.y + height); |
| ctx.arc(style.x + width, style.y + height, r, 0, Math.PI * 2); |
| ctx.closePath(); |
| } |
| function _iconRectangle(ctx, style) { |
| ctx.rect(style.x, style.y, style.width, style.height); |
| ctx.closePath(); |
| } |
| function _iconTriangle(ctx, style) { |
| var width = style.width / 2; |
| var height = style.height / 2; |
| var x = style.x + width; |
| var y = style.y + height; |
| var symbolSize = Math.min(width, height); |
| ctx.moveTo(x, y - symbolSize); |
| ctx.lineTo(x + symbolSize, y + symbolSize); |
| ctx.lineTo(x - symbolSize, y + symbolSize); |
| ctx.lineTo(x, y - symbolSize); |
| ctx.closePath(); |
| } |
| function _iconDiamond(ctx, style) { |
| var width = style.width / 2; |
| var height = style.height / 2; |
| var x = style.x + width; |
| var y = style.y + height; |
| var symbolSize = Math.min(width, height); |
| ctx.moveTo(x, y - symbolSize); |
| ctx.lineTo(x + symbolSize, y); |
| ctx.lineTo(x, y + symbolSize); |
| ctx.lineTo(x - symbolSize, y); |
| ctx.lineTo(x, y - symbolSize); |
| ctx.closePath(); |
| } |
| function _iconArrow(ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var dx = style.width / 16; |
| ctx.moveTo(x + 8 * dx, y); |
| ctx.lineTo(x + dx, y + style.height); |
| ctx.lineTo(x + 8 * dx, y + style.height / 4 * 3); |
| ctx.lineTo(x + 15 * dx, y + style.height); |
| ctx.lineTo(x + 8 * dx, y); |
| ctx.closePath(); |
| } |
| function _iconStar(ctx, style) { |
| var StarShape = require('zrender/shape/Star'); |
| var width = style.width / 2; |
| var height = style.height / 2; |
| StarShape.prototype.buildPath(ctx, { |
| x: style.x + width, |
| y: style.y + height, |
| r: Math.min(width, height), |
| n: style.n || 5 |
| }); |
| } |
| function _iconHeart(ctx, style) { |
| var HeartShape = require('zrender/shape/Heart'); |
| HeartShape.prototype.buildPath(ctx, { |
| x: style.x + style.width / 2, |
| y: style.y + style.height * 0.2, |
| a: style.width / 2, |
| b: style.height * 0.8 |
| }); |
| } |
| function _iconDroplet(ctx, style) { |
| var DropletShape = require('zrender/shape/Droplet'); |
| DropletShape.prototype.buildPath(ctx, { |
| x: style.x + style.width * 0.5, |
| y: style.y + style.height * 0.5, |
| a: style.width * 0.5, |
| b: style.height * 0.8 |
| }); |
| } |
| function _iconPin(ctx, style) { |
| var x = style.x; |
| var y = style.y - style.height / 2 * 1.5; |
| var width = style.width / 2; |
| var height = style.height / 2; |
| var r = Math.min(width, height); |
| ctx.arc(x + width, y + height, r, Math.PI / 5 * 4, Math.PI / 5); |
| ctx.lineTo(x + width, y + height + r * 1.5); |
| ctx.closePath(); |
| } |
| function _iconImage(ctx, style, refreshNextFrame) { |
| var ImageShape = require('zrender/shape/Image'); |
| this._imageShape = this._imageShape || new ImageShape({ style: {} }); |
| for (var name in style) { |
| this._imageShape.style[name] = style[name]; |
| } |
| this._imageShape.brush(ctx, false, refreshNextFrame); |
| } |
| var Base = require('zrender/shape/Base'); |
| function Icon(options) { |
| Base.call(this, options); |
| } |
| Icon.prototype = { |
| type: 'icon', |
| iconLibrary: { |
| mark: _iconMark, |
| markUndo: _iconMarkUndo, |
| markClear: _iconMarkClear, |
| dataZoom: _iconDataZoom, |
| dataZoomReset: _iconDataZoomReset, |
| restore: _iconRestore, |
| lineChart: _iconLineChart, |
| barChart: _iconBarChart, |
| pieChart: _iconPieChart, |
| funnelChart: _iconFunnelChart, |
| forceChart: _iconForceChart, |
| chordChart: _iconChordChart, |
| stackChart: _iconStackChart, |
| tiledChart: _iconTiledChart, |
| dataView: _iconDataView, |
| saveAsImage: _iconSave, |
| cross: _iconCross, |
| circle: _iconCircle, |
| rectangle: _iconRectangle, |
| triangle: _iconTriangle, |
| diamond: _iconDiamond, |
| arrow: _iconArrow, |
| star: _iconStar, |
| heart: _iconHeart, |
| droplet: _iconDroplet, |
| pin: _iconPin, |
| image: _iconImage |
| }, |
| brush: function (ctx, isHighlight, refreshNextFrame) { |
| var style = isHighlight ? this.highlightStyle : this.style; |
| style = style || {}; |
| var iconType = style.iconType || this.style.iconType; |
| if (iconType === 'image') { |
| var ImageShape = require('zrender/shape/Image'); |
| ImageShape.prototype.brush.call(this, ctx, isHighlight, refreshNextFrame); |
| } else { |
| var style = this.beforeBrush(ctx, isHighlight); |
| ctx.beginPath(); |
| this.buildPath(ctx, style, refreshNextFrame); |
| switch (style.brushType) { |
| case 'both': |
| ctx.fill(); |
| case 'stroke': |
| style.lineWidth > 0 && ctx.stroke(); |
| break; |
| default: |
| ctx.fill(); |
| } |
| this.drawText(ctx, style, this.style); |
| this.afterBrush(ctx); |
| } |
| }, |
| buildPath: function (ctx, style, refreshNextFrame) { |
| if (this.iconLibrary[style.iconType]) { |
| this.iconLibrary[style.iconType].call(this, ctx, style, refreshNextFrame); |
| } else { |
| ctx.moveTo(style.x, style.y); |
| ctx.lineTo(style.x + style.width, style.y); |
| ctx.lineTo(style.x + style.width, style.y + style.height); |
| ctx.lineTo(style.x, style.y + style.height); |
| ctx.lineTo(style.x, style.y); |
| ctx.closePath(); |
| } |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| style.__rect = { |
| x: Math.round(style.x), |
| y: Math.round(style.y - (style.iconType == 'pin' ? style.height / 2 * 1.5 : 0)), |
| width: style.width, |
| height: style.height * (style.iconType === 'pin' ? 1.25 : 1) |
| }; |
| return style.__rect; |
| }, |
| isCover: function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| var rect = this.style.__rect; |
| if (!rect) { |
| rect = this.style.__rect = this.getRect(this.style); |
| } |
| var delta = rect.height < 8 || rect.width < 8 ? 4 : 0; |
| return x >= rect.x - delta && x <= rect.x + rect.width + delta && y >= rect.y - delta && y <= rect.y + rect.height + delta; |
| } |
| }; |
| zrUtil.inherits(Icon, Base); |
| return Icon; |
| });define('echarts/util/shape/MarkLine', [ |
| 'require', |
| 'zrender/shape/Base', |
| './Icon', |
| 'zrender/shape/Line', |
| 'zrender/shape/BezierCurve', |
| 'zrender/tool/area', |
| 'zrender/shape/util/dashedLineTo', |
| 'zrender/tool/util', |
| 'zrender/tool/curve' |
| ], function (require) { |
| var Base = require('zrender/shape/Base'); |
| var IconShape = require('./Icon'); |
| var LineShape = require('zrender/shape/Line'); |
| var lineInstance = new LineShape({}); |
| var CurveShape = require('zrender/shape/BezierCurve'); |
| var curveInstance = new CurveShape({}); |
| var area = require('zrender/tool/area'); |
| var dashedLineTo = require('zrender/shape/util/dashedLineTo'); |
| var zrUtil = require('zrender/tool/util'); |
| var curveTool = require('zrender/tool/curve'); |
| function MarkLine(options) { |
| Base.call(this, options); |
| if (this.style.curveness > 0) { |
| this.updatePoints(this.style); |
| } |
| if (this.highlightStyle.curveness > 0) { |
| this.updatePoints(this.highlightStyle); |
| } |
| } |
| MarkLine.prototype = { |
| type: 'mark-line', |
| brush: function (ctx, isHighlight) { |
| var style = this.style; |
| if (isHighlight) { |
| style = this.getHighlightStyle(style, this.highlightStyle || {}); |
| } |
| ctx.save(); |
| this.setContext(ctx, style); |
| this.setTransform(ctx); |
| ctx.save(); |
| ctx.beginPath(); |
| this.buildPath(ctx, style); |
| ctx.stroke(); |
| ctx.restore(); |
| this.brushSymbol(ctx, style, 0); |
| this.brushSymbol(ctx, style, 1); |
| this.drawText(ctx, style, this.style); |
| ctx.restore(); |
| }, |
| buildPath: function (ctx, style) { |
| var lineType = style.lineType || 'solid'; |
| ctx.moveTo(style.xStart, style.yStart); |
| if (style.curveness > 0) { |
| var lineDash = null; |
| switch (lineType) { |
| case 'dashed': |
| lineDash = [ |
| 5, |
| 5 |
| ]; |
| break; |
| case 'dotted': |
| lineDash = [ |
| 1, |
| 1 |
| ]; |
| break; |
| } |
| if (lineDash && ctx.setLineDash) { |
| ctx.setLineDash(lineDash); |
| } |
| ctx.quadraticCurveTo(style.cpX1, style.cpY1, style.xEnd, style.yEnd); |
| } else { |
| if (lineType == 'solid') { |
| ctx.lineTo(style.xEnd, style.yEnd); |
| } else { |
| var dashLength = (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1); |
| dashedLineTo(ctx, style.xStart, style.yStart, style.xEnd, style.yEnd, dashLength); |
| } |
| } |
| }, |
| updatePoints: function (style) { |
| var curveness = style.curveness || 0; |
| var inv = 1; |
| var x0 = style.xStart; |
| var y0 = style.yStart; |
| var x2 = style.xEnd; |
| var y2 = style.yEnd; |
| var x1 = (x0 + x2) / 2 - inv * (y0 - y2) * curveness; |
| var y1 = (y0 + y2) / 2 - inv * (x2 - x0) * curveness; |
| style.cpX1 = x1; |
| style.cpY1 = y1; |
| }, |
| brushSymbol: function (ctx, style, idx) { |
| if (style.symbol[idx] == 'none') { |
| return; |
| } |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.lineWidth = style.symbolBorder; |
| ctx.strokeStyle = style.symbolBorderColor; |
| var symbol = style.symbol[idx].replace('empty', '').toLowerCase(); |
| if (style.symbol[idx].match('empty')) { |
| ctx.fillStyle = '#fff'; |
| } |
| var x0 = style.xStart; |
| var y0 = style.yStart; |
| var x2 = style.xEnd; |
| var y2 = style.yEnd; |
| var x = idx === 0 ? x0 : x2; |
| var y = idx === 0 ? y0 : y2; |
| var curveness = style.curveness || 0; |
| var rotate = style.symbolRotate[idx] != null ? style.symbolRotate[idx] - 0 : 0; |
| rotate = rotate / 180 * Math.PI; |
| if (symbol == 'arrow' && rotate === 0) { |
| if (curveness === 0) { |
| var sign = idx === 0 ? -1 : 1; |
| rotate = Math.PI / 2 + Math.atan2(sign * (y2 - y0), sign * (x2 - x0)); |
| } else { |
| var x1 = style.cpX1; |
| var y1 = style.cpY1; |
| var quadraticDerivativeAt = curveTool.quadraticDerivativeAt; |
| var dx = quadraticDerivativeAt(x0, x1, x2, idx); |
| var dy = quadraticDerivativeAt(y0, y1, y2, idx); |
| rotate = Math.PI / 2 + Math.atan2(dy, dx); |
| } |
| } |
| ctx.translate(x, y); |
| if (rotate !== 0) { |
| ctx.rotate(rotate); |
| } |
| var symbolSize = style.symbolSize[idx]; |
| IconShape.prototype.buildPath(ctx, { |
| x: -symbolSize, |
| y: -symbolSize, |
| width: symbolSize * 2, |
| height: symbolSize * 2, |
| iconType: symbol |
| }); |
| ctx.closePath(); |
| ctx.fill(); |
| ctx.stroke(); |
| ctx.restore(); |
| }, |
| getRect: function (style) { |
| style.curveness > 0 ? curveInstance.getRect(style) : lineInstance.getRect(style); |
| return style.__rect; |
| }, |
| isCover: function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| if (this.isCoverRect(x, y)) { |
| return this.style.curveness > 0 ? area.isInside(curveInstance, this.style, x, y) : area.isInside(lineInstance, this.style, x, y); |
| } |
| return false; |
| } |
| }; |
| zrUtil.inherits(MarkLine, Base); |
| return MarkLine; |
| });define('echarts/util/shape/Symbol', [ |
| 'require', |
| 'zrender/shape/Base', |
| 'zrender/shape/Polygon', |
| 'zrender/tool/util', |
| './normalIsCover' |
| ], function (require) { |
| var Base = require('zrender/shape/Base'); |
| var PolygonShape = require('zrender/shape/Polygon'); |
| var polygonInstance = new PolygonShape({}); |
| var zrUtil = require('zrender/tool/util'); |
| function Symbol(options) { |
| Base.call(this, options); |
| } |
| Symbol.prototype = { |
| type: 'symbol', |
| buildPath: function (ctx, style) { |
| var pointList = style.pointList; |
| var len = pointList.length; |
| if (len === 0) { |
| return; |
| } |
| var subSize = 10000; |
| var subSetLength = Math.ceil(len / subSize); |
| var sub; |
| var subLen; |
| var isArray = pointList[0] instanceof Array; |
| var size = style.size ? style.size : 2; |
| var curSize = size; |
| var halfSize = size / 2; |
| var PI2 = Math.PI * 2; |
| var percent; |
| var x; |
| var y; |
| for (var j = 0; j < subSetLength; j++) { |
| ctx.beginPath(); |
| sub = j * subSize; |
| subLen = sub + subSize; |
| subLen = subLen > len ? len : subLen; |
| for (var i = sub; i < subLen; i++) { |
| if (style.random) { |
| percent = style['randomMap' + i % 20] / 100; |
| curSize = size * percent * percent; |
| halfSize = curSize / 2; |
| } |
| if (isArray) { |
| x = pointList[i][0]; |
| y = pointList[i][1]; |
| } else { |
| x = pointList[i].x; |
| y = pointList[i].y; |
| } |
| if (curSize < 3) { |
| ctx.rect(x - halfSize, y - halfSize, curSize, curSize); |
| } else { |
| switch (style.iconType) { |
| case 'circle': |
| ctx.moveTo(x, y); |
| ctx.arc(x, y, halfSize, 0, PI2, true); |
| break; |
| case 'diamond': |
| ctx.moveTo(x, y - halfSize); |
| ctx.lineTo(x + halfSize / 3, y - halfSize / 3); |
| ctx.lineTo(x + halfSize, y); |
| ctx.lineTo(x + halfSize / 3, y + halfSize / 3); |
| ctx.lineTo(x, y + halfSize); |
| ctx.lineTo(x - halfSize / 3, y + halfSize / 3); |
| ctx.lineTo(x - halfSize, y); |
| ctx.lineTo(x - halfSize / 3, y - halfSize / 3); |
| ctx.lineTo(x, y - halfSize); |
| break; |
| default: |
| ctx.rect(x - halfSize, y - halfSize, curSize, curSize); |
| } |
| } |
| } |
| ctx.closePath(); |
| if (j < subSetLength - 1) { |
| switch (style.brushType) { |
| case 'both': |
| ctx.fill(); |
| style.lineWidth > 0 && ctx.stroke(); |
| break; |
| case 'stroke': |
| style.lineWidth > 0 && ctx.stroke(); |
| break; |
| default: |
| ctx.fill(); |
| } |
| } |
| } |
| }, |
| getRect: function (style) { |
| return style.__rect || polygonInstance.getRect(style); |
| }, |
| isCover: require('./normalIsCover') |
| }; |
| zrUtil.inherits(Symbol, Base); |
| return Symbol; |
| });define('zrender/shape/Polyline', [ |
| 'require', |
| './Base', |
| './util/smoothSpline', |
| './util/smoothBezier', |
| './util/dashedLineTo', |
| './Polygon', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var smoothSpline = require('./util/smoothSpline'); |
| var smoothBezier = require('./util/smoothBezier'); |
| var dashedLineTo = require('./util/dashedLineTo'); |
| var Polyline = function (options) { |
| this.brushTypeOnly = 'stroke'; |
| this.textPosition = 'end'; |
| Base.call(this, options); |
| }; |
| Polyline.prototype = { |
| type: 'polyline', |
| buildPath: function (ctx, style) { |
| var pointList = style.pointList; |
| if (pointList.length < 2) { |
| return; |
| } |
| var len = Math.min(style.pointList.length, Math.round(style.pointListLength || style.pointList.length)); |
| if (style.smooth && style.smooth !== 'spline') { |
| if (!style.controlPointList) { |
| this.updateControlPoints(style); |
| } |
| var controlPointList = style.controlPointList; |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| var cp1; |
| var cp2; |
| var p; |
| for (var i = 0; i < len - 1; i++) { |
| cp1 = controlPointList[i * 2]; |
| cp2 = controlPointList[i * 2 + 1]; |
| p = pointList[i + 1]; |
| ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]); |
| } |
| } else { |
| if (style.smooth === 'spline') { |
| pointList = smoothSpline(pointList); |
| len = pointList.length; |
| } |
| if (!style.lineType || style.lineType == 'solid') { |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| for (var i = 1; i < len; i++) { |
| ctx.lineTo(pointList[i][0], pointList[i][1]); |
| } |
| } else if (style.lineType == 'dashed' || style.lineType == 'dotted') { |
| var dashLength = (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1); |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| for (var i = 1; i < len; i++) { |
| dashedLineTo(ctx, pointList[i - 1][0], pointList[i - 1][1], pointList[i][0], pointList[i][1], dashLength); |
| } |
| } |
| } |
| return; |
| }, |
| updateControlPoints: function (style) { |
| style.controlPointList = smoothBezier(style.pointList, style.smooth, false, style.smoothConstraint); |
| }, |
| getRect: function (style) { |
| return require('./Polygon').prototype.getRect(style); |
| } |
| }; |
| require('../tool/util').inherits(Polyline, Base); |
| return Polyline; |
| });define('zrender/shape/ShapeBundle', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var ShapeBundle = function (options) { |
| Base.call(this, options); |
| }; |
| ShapeBundle.prototype = { |
| constructor: ShapeBundle, |
| type: 'shape-bundle', |
| brush: function (ctx, isHighlight) { |
| var style = this.beforeBrush(ctx, isHighlight); |
| ctx.beginPath(); |
| for (var i = 0; i < style.shapeList.length; i++) { |
| var subShape = style.shapeList[i]; |
| var subShapeStyle = subShape.style; |
| if (isHighlight) { |
| subShapeStyle = subShape.getHighlightStyle(subShapeStyle, subShape.highlightStyle || {}, subShape.brushTypeOnly); |
| } |
| subShape.buildPath(ctx, subShapeStyle); |
| } |
| switch (style.brushType) { |
| case 'both': |
| ctx.fill(); |
| case 'stroke': |
| style.lineWidth > 0 && ctx.stroke(); |
| break; |
| default: |
| ctx.fill(); |
| } |
| this.drawText(ctx, style, this.style); |
| this.afterBrush(ctx); |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var minX = Infinity; |
| var maxX = -Infinity; |
| var minY = Infinity; |
| var maxY = -Infinity; |
| for (var i = 0; i < style.shapeList.length; i++) { |
| var subShape = style.shapeList[i]; |
| var subRect = subShape.getRect(subShape.style); |
| var minX = Math.min(subRect.x, minX); |
| var minY = Math.min(subRect.y, minY); |
| var maxX = Math.max(subRect.x + subRect.width, maxX); |
| var maxY = Math.max(subRect.y + subRect.height, maxY); |
| } |
| style.__rect = { |
| x: minX, |
| y: minY, |
| width: maxX - minX, |
| height: maxY - minY |
| }; |
| return style.__rect; |
| }, |
| isCover: function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| if (this.isCoverRect(x, y)) { |
| for (var i = 0; i < this.style.shapeList.length; i++) { |
| var subShape = this.style.shapeList[i]; |
| if (subShape.isCover(x, y)) { |
| return true; |
| } |
| } |
| } |
| return false; |
| } |
| }; |
| require('../tool/util').inherits(ShapeBundle, Base); |
| return ShapeBundle; |
| });define('echarts/util/ecAnimation', [ |
| 'require', |
| 'zrender/tool/util', |
| 'zrender/tool/curve', |
| 'zrender/shape/Polygon' |
| ], function (require) { |
| var zrUtil = require('zrender/tool/util'); |
| var curveTool = require('zrender/tool/curve'); |
| function pointList(zr, oldShape, newShape, duration, easing) { |
| var newPointList = newShape.style.pointList; |
| var newPointListLen = newPointList.length; |
| var oldPointList; |
| if (!oldShape) { |
| oldPointList = []; |
| if (newShape._orient != 'vertical') { |
| var y = newPointList[0][1]; |
| for (var i = 0; i < newPointListLen; i++) { |
| oldPointList[i] = [ |
| newPointList[i][0], |
| y |
| ]; |
| } |
| } else { |
| var x = newPointList[0][0]; |
| for (var i = 0; i < newPointListLen; i++) { |
| oldPointList[i] = [ |
| x, |
| newPointList[i][1] |
| ]; |
| } |
| } |
| if (newShape.type == 'half-smooth-polygon') { |
| oldPointList[newPointListLen - 1] = zrUtil.clone(newPointList[newPointListLen - 1]); |
| oldPointList[newPointListLen - 2] = zrUtil.clone(newPointList[newPointListLen - 2]); |
| } |
| oldShape = { style: { pointList: oldPointList } }; |
| } |
| oldPointList = oldShape.style.pointList; |
| var oldPointListLen = oldPointList.length; |
| if (oldPointListLen == newPointListLen) { |
| newShape.style.pointList = oldPointList; |
| } else if (oldPointListLen < newPointListLen) { |
| newShape.style.pointList = oldPointList.concat(newPointList.slice(oldPointListLen)); |
| } else { |
| newShape.style.pointList = oldPointList.slice(0, newPointListLen); |
| } |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { pointList: newPointList }).during(function () { |
| if (newShape.updateControlPoints) { |
| newShape.updateControlPoints(newShape.style); |
| } |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function cloneStyle(target, source) { |
| var len = arguments.length; |
| for (var i = 2; i < len; i++) { |
| var prop = arguments[i]; |
| target.style[prop] = source.style[prop]; |
| } |
| } |
| function rectangle(zr, oldShape, newShape, duration, easing) { |
| var newShapeStyle = newShape.style; |
| if (!oldShape) { |
| oldShape = { |
| position: newShape.position, |
| style: { |
| x: newShapeStyle.x, |
| y: newShape._orient == 'vertical' ? newShapeStyle.y + newShapeStyle.height : newShapeStyle.y, |
| width: newShape._orient == 'vertical' ? newShapeStyle.width : 0, |
| height: newShape._orient != 'vertical' ? newShapeStyle.height : 0 |
| } |
| }; |
| } |
| var newX = newShapeStyle.x; |
| var newY = newShapeStyle.y; |
| var newWidth = newShapeStyle.width; |
| var newHeight = newShapeStyle.height; |
| var newPosition = [ |
| newShape.position[0], |
| newShape.position[1] |
| ]; |
| cloneStyle(newShape, oldShape, 'x', 'y', 'width', 'height'); |
| newShape.position = oldShape.position; |
| zr.addShape(newShape); |
| if (newPosition[0] != oldShape.position[0] || newPosition[1] != oldShape.position[1]) { |
| zr.animate(newShape.id, '').when(duration, { position: newPosition }).start(easing); |
| } |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { |
| x: newX, |
| y: newY, |
| width: newWidth, |
| height: newHeight |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function candle(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| var y = newShape.style.y; |
| oldShape = { |
| style: { |
| y: [ |
| y[0], |
| y[0], |
| y[0], |
| y[0] |
| ] |
| } |
| }; |
| } |
| var newY = newShape.style.y; |
| newShape.style.y = oldShape.style.y; |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { y: newY }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function ring(zr, oldShape, newShape, duration, easing) { |
| var x = newShape.style.x; |
| var y = newShape.style.y; |
| var r0 = newShape.style.r0; |
| var r = newShape.style.r; |
| newShape.__animating = true; |
| if (newShape._animationAdd != 'r') { |
| newShape.style.r0 = 0; |
| newShape.style.r = 0; |
| newShape.rotation = [ |
| Math.PI * 2, |
| x, |
| y |
| ]; |
| zr.addShape(newShape); |
| zr.animate(newShape.id, 'style').when(duration, { |
| r0: r0, |
| r: r |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| zr.animate(newShape.id, '').when(duration, { |
| rotation: [ |
| 0, |
| x, |
| y |
| ] |
| }).start(easing); |
| } else { |
| newShape.style.r0 = newShape.style.r; |
| zr.addShape(newShape); |
| zr.animate(newShape.id, 'style').when(duration, { r0: r0 }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| } |
| function sector(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| if (newShape._animationAdd != 'r') { |
| oldShape = { |
| style: { |
| startAngle: newShape.style.startAngle, |
| endAngle: newShape.style.startAngle |
| } |
| }; |
| } else { |
| oldShape = { style: { r0: newShape.style.r } }; |
| } |
| } |
| var startAngle = newShape.style.startAngle; |
| var endAngle = newShape.style.endAngle; |
| cloneStyle(newShape, oldShape, 'startAngle', 'endAngle'); |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { |
| startAngle: startAngle, |
| endAngle: endAngle |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function text(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| oldShape = { |
| style: { |
| x: newShape.style.textAlign == 'left' ? newShape.style.x + 100 : newShape.style.x - 100, |
| y: newShape.style.y |
| } |
| }; |
| } |
| var x = newShape.style.x; |
| var y = newShape.style.y; |
| cloneStyle(newShape, oldShape, 'x', 'y'); |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { |
| x: x, |
| y: y |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function polygon(zr, oldShape, newShape, duration, easing) { |
| var rect = require('zrender/shape/Polygon').prototype.getRect(newShape.style); |
| var x = rect.x + rect.width / 2; |
| var y = rect.y + rect.height / 2; |
| newShape.scale = [ |
| 0.1, |
| 0.1, |
| x, |
| y |
| ]; |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, '').when(duration, { |
| scale: [ |
| 1, |
| 1, |
| x, |
| y |
| ] |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function ribbon(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| oldShape = { |
| style: { |
| source0: 0, |
| source1: newShape.style.source1 > 0 ? 360 : -360, |
| target0: 0, |
| target1: newShape.style.target1 > 0 ? 360 : -360 |
| } |
| }; |
| } |
| var source0 = newShape.style.source0; |
| var source1 = newShape.style.source1; |
| var target0 = newShape.style.target0; |
| var target1 = newShape.style.target1; |
| if (oldShape.style) { |
| cloneStyle(newShape, oldShape, 'source0', 'source1', 'target0', 'target1'); |
| } |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { |
| source0: source0, |
| source1: source1, |
| target0: target0, |
| target1: target1 |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function gaugePointer(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| oldShape = { style: { angle: newShape.style.startAngle } }; |
| } |
| var angle = newShape.style.angle; |
| newShape.style.angle = oldShape.style.angle; |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { angle: angle }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function icon(zr, oldShape, newShape, duration, easing, delay) { |
| newShape.style._x = newShape.style.x; |
| newShape.style._y = newShape.style.y; |
| newShape.style._width = newShape.style.width; |
| newShape.style._height = newShape.style.height; |
| if (!oldShape) { |
| var x = newShape._x || 0; |
| var y = newShape._y || 0; |
| newShape.scale = [ |
| 0.01, |
| 0.01, |
| x, |
| y |
| ]; |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, '').delay(delay).when(duration, { |
| scale: [ |
| 1, |
| 1, |
| x, |
| y |
| ] |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing || 'QuinticOut'); |
| } else { |
| rectangle(zr, oldShape, newShape, duration, easing); |
| } |
| } |
| function line(zr, oldShape, newShape, duration, easing) { |
| if (!oldShape) { |
| oldShape = { |
| style: { |
| xStart: newShape.style.xStart, |
| yStart: newShape.style.yStart, |
| xEnd: newShape.style.xStart, |
| yEnd: newShape.style.yStart |
| } |
| }; |
| } |
| var xStart = newShape.style.xStart; |
| var xEnd = newShape.style.xEnd; |
| var yStart = newShape.style.yStart; |
| var yEnd = newShape.style.yEnd; |
| cloneStyle(newShape, oldShape, 'xStart', 'xEnd', 'yStart', 'yEnd'); |
| zr.addShape(newShape); |
| newShape.__animating = true; |
| zr.animate(newShape.id, 'style').when(duration, { |
| xStart: xStart, |
| xEnd: xEnd, |
| yStart: yStart, |
| yEnd: yEnd |
| }).done(function () { |
| newShape.__animating = false; |
| }).start(easing); |
| } |
| function markline(zr, oldShape, newShape, duration, easing) { |
| easing = easing || 'QuinticOut'; |
| newShape.__animating = true; |
| zr.addShape(newShape); |
| var newShapeStyle = newShape.style; |
| var animationDone = function () { |
| newShape.__animating = false; |
| }; |
| var x0 = newShapeStyle.xStart; |
| var y0 = newShapeStyle.yStart; |
| var x2 = newShapeStyle.xEnd; |
| var y2 = newShapeStyle.yEnd; |
| if (newShapeStyle.curveness > 0) { |
| newShape.updatePoints(newShapeStyle); |
| var obj = { p: 0 }; |
| var x1 = newShapeStyle.cpX1; |
| var y1 = newShapeStyle.cpY1; |
| var newXArr = []; |
| var newYArr = []; |
| var subdivide = curveTool.quadraticSubdivide; |
| zr.animation.animate(obj).when(duration, { p: 1 }).during(function () { |
| subdivide(x0, x1, x2, obj.p, newXArr); |
| subdivide(y0, y1, y2, obj.p, newYArr); |
| newShapeStyle.cpX1 = newXArr[1]; |
| newShapeStyle.cpY1 = newYArr[1]; |
| newShapeStyle.xEnd = newXArr[2]; |
| newShapeStyle.yEnd = newYArr[2]; |
| zr.modShape(newShape); |
| }).done(animationDone).start(easing); |
| } else { |
| zr.animate(newShape.id, 'style').when(0, { |
| xEnd: x0, |
| yEnd: y0 |
| }).when(duration, { |
| xEnd: x2, |
| yEnd: y2 |
| }).done(animationDone).start(easing); |
| } |
| } |
| return { |
| pointList: pointList, |
| rectangle: rectangle, |
| candle: candle, |
| ring: ring, |
| sector: sector, |
| text: text, |
| polygon: polygon, |
| ribbon: ribbon, |
| gaugePointer: gaugePointer, |
| icon: icon, |
| line: line, |
| markline: markline |
| }; |
| });define('echarts/util/ecEffect', [ |
| 'require', |
| '../util/ecData', |
| 'zrender/shape/Circle', |
| 'zrender/shape/Image', |
| 'zrender/tool/curve', |
| '../util/shape/Icon', |
| '../util/shape/Symbol', |
| 'zrender/shape/ShapeBundle', |
| 'zrender/shape/Polyline', |
| 'zrender/tool/vector', |
| 'zrender/tool/env' |
| ], function (require) { |
| var ecData = require('../util/ecData'); |
| var CircleShape = require('zrender/shape/Circle'); |
| var ImageShape = require('zrender/shape/Image'); |
| var curveTool = require('zrender/tool/curve'); |
| var IconShape = require('../util/shape/Icon'); |
| var SymbolShape = require('../util/shape/Symbol'); |
| var ShapeBundle = require('zrender/shape/ShapeBundle'); |
| var Polyline = require('zrender/shape/Polyline'); |
| var vec2 = require('zrender/tool/vector'); |
| var canvasSupported = require('zrender/tool/env').canvasSupported; |
| function point(zr, effectList, shape, zlevel) { |
| var effect = shape.effect; |
| var color = effect.color || shape.style.strokeColor || shape.style.color; |
| var shadowColor = effect.shadowColor || color; |
| var size = effect.scaleSize; |
| var distance = effect.bounceDistance; |
| var shadowBlur = typeof effect.shadowBlur != 'undefined' ? effect.shadowBlur : size; |
| var effectShape; |
| if (shape.type !== 'image') { |
| effectShape = new IconShape({ |
| zlevel: zlevel, |
| style: { |
| brushType: 'stroke', |
| iconType: shape.style.iconType != 'droplet' ? shape.style.iconType : 'circle', |
| x: shadowBlur + 1, |
| y: shadowBlur + 1, |
| n: shape.style.n, |
| width: shape.style._width * size, |
| height: shape.style._height * size, |
| lineWidth: 1, |
| strokeColor: color, |
| shadowColor: shadowColor, |
| shadowBlur: shadowBlur |
| }, |
| draggable: false, |
| hoverable: false |
| }); |
| if (shape.style.iconType == 'pin') { |
| effectShape.style.y += effectShape.style.height / 2 * 1.5; |
| } |
| if (canvasSupported) { |
| effectShape.style.image = zr.shapeToImage(effectShape, effectShape.style.width + shadowBlur * 2 + 2, effectShape.style.height + shadowBlur * 2 + 2).style.image; |
| effectShape = new ImageShape({ |
| zlevel: effectShape.zlevel, |
| style: effectShape.style, |
| draggable: false, |
| hoverable: false |
| }); |
| } |
| } else { |
| effectShape = new ImageShape({ |
| zlevel: zlevel, |
| style: shape.style, |
| draggable: false, |
| hoverable: false |
| }); |
| } |
| ecData.clone(shape, effectShape); |
| effectShape.position = shape.position; |
| effectList.push(effectShape); |
| zr.addShape(effectShape); |
| var devicePixelRatio = shape.type !== 'image' ? window.devicePixelRatio || 1 : 1; |
| var offset = (effectShape.style.width / devicePixelRatio - shape.style._width) / 2; |
| effectShape.style.x = shape.style._x - offset; |
| effectShape.style.y = shape.style._y - offset; |
| if (shape.style.iconType == 'pin') { |
| effectShape.style.y -= shape.style.height / 2 * 1.5; |
| } |
| var duration = (effect.period + Math.random() * 10) * 100; |
| zr.modShape(shape.id, { invisible: true }); |
| var centerX = effectShape.style.x + effectShape.style.width / 2 / devicePixelRatio; |
| var centerY = effectShape.style.y + effectShape.style.height / 2 / devicePixelRatio; |
| if (effect.type === 'scale') { |
| zr.modShape(effectShape.id, { |
| scale: [ |
| 0.1, |
| 0.1, |
| centerX, |
| centerY |
| ] |
| }); |
| zr.animate(effectShape.id, '', effect.loop).when(duration, { |
| scale: [ |
| 1, |
| 1, |
| centerX, |
| centerY |
| ] |
| }).done(function () { |
| shape.effect.show = false; |
| zr.delShape(effectShape.id); |
| }).start(); |
| } else { |
| zr.animate(effectShape.id, 'style', effect.loop).when(duration, { y: effectShape.style.y - distance }).when(duration * 2, { y: effectShape.style.y }).done(function () { |
| shape.effect.show = false; |
| zr.delShape(effectShape.id); |
| }).start(); |
| } |
| } |
| function largePoint(zr, effectList, shape, zlevel) { |
| var effect = shape.effect; |
| var color = effect.color || shape.style.strokeColor || shape.style.color; |
| var size = effect.scaleSize; |
| var shadowColor = effect.shadowColor || color; |
| var shadowBlur = typeof effect.shadowBlur != 'undefined' ? effect.shadowBlur : size * 2; |
| var devicePixelRatio = window.devicePixelRatio || 1; |
| var effectShape = new SymbolShape({ |
| zlevel: zlevel, |
| position: shape.position, |
| scale: shape.scale, |
| style: { |
| pointList: shape.style.pointList, |
| iconType: shape.style.iconType, |
| color: color, |
| strokeColor: color, |
| shadowColor: shadowColor, |
| shadowBlur: shadowBlur * devicePixelRatio, |
| random: true, |
| brushType: 'fill', |
| lineWidth: 1, |
| size: shape.style.size |
| }, |
| draggable: false, |
| hoverable: false |
| }); |
| effectList.push(effectShape); |
| zr.addShape(effectShape); |
| zr.modShape(shape.id, { invisible: true }); |
| var duration = Math.round(effect.period * 100); |
| var clip1 = {}; |
| var clip2 = {}; |
| for (var i = 0; i < 20; i++) { |
| effectShape.style['randomMap' + i] = 0; |
| clip1 = {}; |
| clip1['randomMap' + i] = 100; |
| clip2 = {}; |
| clip2['randomMap' + i] = 0; |
| effectShape.style['randomMap' + i] = Math.random() * 100; |
| zr.animate(effectShape.id, 'style', true).when(duration, clip1).when(duration * 2, clip2).when(duration * 3, clip1).when(duration * 4, clip1).delay(Math.random() * duration * i).start(); |
| } |
| } |
| function line(zr, effectList, shape, zlevel, isLarge) { |
| var effect = shape.effect; |
| var shapeStyle = shape.style; |
| var color = effect.color || shapeStyle.strokeColor || shapeStyle.color; |
| var shadowColor = effect.shadowColor || shapeStyle.strokeColor || color; |
| var size = shapeStyle.lineWidth * effect.scaleSize; |
| var shadowBlur = typeof effect.shadowBlur != 'undefined' ? effect.shadowBlur : size; |
| var effectShape = new CircleShape({ |
| zlevel: zlevel, |
| style: { |
| x: shadowBlur, |
| y: shadowBlur, |
| r: size, |
| color: color, |
| shadowColor: shadowColor, |
| shadowBlur: shadowBlur |
| }, |
| hoverable: false |
| }); |
| var offset = 0; |
| if (canvasSupported && !isLarge) { |
| var zlevel = effectShape.zlevel; |
| effectShape = zr.shapeToImage(effectShape, (size + shadowBlur) * 2, (size + shadowBlur) * 2); |
| effectShape.zlevel = zlevel; |
| effectShape.hoverable = false; |
| offset = shadowBlur; |
| } |
| if (!isLarge) { |
| ecData.clone(shape, effectShape); |
| effectShape.position = shape.position; |
| effectList.push(effectShape); |
| zr.addShape(effectShape); |
| } |
| var effectDone = function () { |
| if (!isLarge) { |
| shape.effect.show = false; |
| zr.delShape(effectShape.id); |
| } |
| effectShape.effectAnimator = null; |
| }; |
| if (shape instanceof Polyline) { |
| var distanceList = [0]; |
| var totalDist = 0; |
| var pointList = shapeStyle.pointList; |
| var controlPointList = shapeStyle.controlPointList; |
| for (var i = 1; i < pointList.length; i++) { |
| if (controlPointList) { |
| var cp1 = controlPointList[(i - 1) * 2]; |
| var cp2 = controlPointList[(i - 1) * 2 + 1]; |
| totalDist += vec2.dist(pointList[i - 1], cp1) + vec2.dist(cp1, cp2) + vec2.dist(cp2, pointList[i]); |
| } else { |
| totalDist += vec2.dist(pointList[i - 1], pointList[i]); |
| } |
| distanceList.push(totalDist); |
| } |
| var obj = { p: 0 }; |
| var animator = zr.animation.animate(obj, { loop: effect.loop }); |
| for (var i = 0; i < distanceList.length; i++) { |
| animator.when(distanceList[i] * effect.period, { p: i }); |
| } |
| animator.during(function () { |
| var i = Math.floor(obj.p); |
| var x, y; |
| if (i == pointList.length - 1) { |
| x = pointList[i][0]; |
| y = pointList[i][1]; |
| } else { |
| var t = obj.p - i; |
| var p0 = pointList[i]; |
| var p1 = pointList[i + 1]; |
| if (controlPointList) { |
| var cp1 = controlPointList[i * 2]; |
| var cp2 = controlPointList[i * 2 + 1]; |
| x = curveTool.cubicAt(p0[0], cp1[0], cp2[0], p1[0], t); |
| y = curveTool.cubicAt(p0[1], cp1[1], cp2[1], p1[1], t); |
| } else { |
| x = (p1[0] - p0[0]) * t + p0[0]; |
| y = (p1[1] - p0[1]) * t + p0[1]; |
| } |
| } |
| effectShape.style.x = x; |
| effectShape.style.y = y; |
| if (!isLarge) { |
| zr.modShape(effectShape); |
| } |
| }).done(effectDone).start(); |
| animator.duration = totalDist * effect.period; |
| effectShape.effectAnimator = animator; |
| } else { |
| var x0 = shapeStyle.xStart - offset; |
| var y0 = shapeStyle.yStart - offset; |
| var x2 = shapeStyle.xEnd - offset; |
| var y2 = shapeStyle.yEnd - offset; |
| effectShape.style.x = x0; |
| effectShape.style.y = y0; |
| var distance = (x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0); |
| var duration = Math.round(Math.sqrt(Math.round(distance * effect.period * effect.period))); |
| if (shape.style.curveness > 0) { |
| var x1 = shapeStyle.cpX1 - offset; |
| var y1 = shapeStyle.cpY1 - offset; |
| effectShape.effectAnimator = zr.animation.animate(effectShape, { loop: effect.loop }).when(duration, { p: 1 }).during(function (target, t) { |
| effectShape.style.x = curveTool.quadraticAt(x0, x1, x2, t); |
| effectShape.style.y = curveTool.quadraticAt(y0, y1, y2, t); |
| if (!isLarge) { |
| zr.modShape(effectShape); |
| } |
| }).done(effectDone).start(); |
| } else { |
| effectShape.effectAnimator = zr.animation.animate(effectShape.style, { loop: effect.loop }).when(duration, { |
| x: x2, |
| y: y2 |
| }).during(function () { |
| if (!isLarge) { |
| zr.modShape(effectShape); |
| } |
| }).done(effectDone).start(); |
| } |
| effectShape.effectAnimator.duration = duration; |
| } |
| return effectShape; |
| } |
| function largeLine(zr, effectList, shape, zlevel) { |
| var effectShape = new ShapeBundle({ |
| style: { shapeList: [] }, |
| zlevel: zlevel, |
| hoverable: false |
| }); |
| var shapeList = shape.style.shapeList; |
| var effect = shape.effect; |
| effectShape.position = shape.position; |
| var maxDuration = 0; |
| var subEffectAnimators = []; |
| for (var i = 0; i < shapeList.length; i++) { |
| shapeList[i].effect = effect; |
| var subEffectShape = line(zr, null, shapeList[i], zlevel, true); |
| var subEffectAnimator = subEffectShape.effectAnimator; |
| effectShape.style.shapeList.push(subEffectShape); |
| if (subEffectAnimator.duration > maxDuration) { |
| maxDuration = subEffectAnimator.duration; |
| } |
| if (i === 0) { |
| effectShape.style.color = subEffectShape.style.color; |
| effectShape.style.shadowBlur = subEffectShape.style.shadowBlur; |
| effectShape.style.shadowColor = subEffectShape.style.shadowColor; |
| } |
| subEffectAnimators.push(subEffectAnimator); |
| } |
| effectList.push(effectShape); |
| zr.addShape(effectShape); |
| var clearAllAnimators = function () { |
| for (var i = 0; i < subEffectAnimators.length; i++) { |
| subEffectAnimators[i].stop(); |
| } |
| }; |
| if (maxDuration) { |
| effectShape.__dummy = 0; |
| var animator = zr.animate(effectShape.id, '', effect.loop).when(maxDuration, { __dummy: 1 }).during(function () { |
| zr.modShape(effectShape); |
| }).done(function () { |
| shape.effect.show = false; |
| zr.delShape(effectShape.id); |
| }).start(); |
| var oldStop = animator.stop; |
| animator.stop = function () { |
| clearAllAnimators(); |
| oldStop.call(this); |
| }; |
| } |
| } |
| return { |
| point: point, |
| largePoint: largePoint, |
| line: line, |
| largeLine: largeLine |
| }; |
| });define('echarts/component/base', [ |
| 'require', |
| '../config', |
| '../util/ecData', |
| '../util/ecQuery', |
| '../util/number', |
| 'zrender/tool/util', |
| 'zrender/tool/env' |
| ], function (require) { |
| var ecConfig = require('../config'); |
| var ecData = require('../util/ecData'); |
| var ecQuery = require('../util/ecQuery'); |
| var number = require('../util/number'); |
| var zrUtil = require('zrender/tool/util'); |
| function Base(ecTheme, messageCenter, zr, option, myChart) { |
| this.ecTheme = ecTheme; |
| this.messageCenter = messageCenter; |
| this.zr = zr; |
| this.option = option; |
| this.series = option.series; |
| this.myChart = myChart; |
| this.component = myChart.component; |
| this.shapeList = []; |
| this.effectList = []; |
| var self = this; |
| self._onlegendhoverlink = function (param) { |
| if (self.legendHoverLink) { |
| var targetName = param.target; |
| var name; |
| for (var i = self.shapeList.length - 1; i >= 0; i--) { |
| name = self.type == ecConfig.CHART_TYPE_PIE || self.type == ecConfig.CHART_TYPE_FUNNEL ? ecData.get(self.shapeList[i], 'name') : (ecData.get(self.shapeList[i], 'series') || {}).name; |
| if (name == targetName && !self.shapeList[i].invisible && !self.shapeList[i].__animating) { |
| self.zr.addHoverShape(self.shapeList[i]); |
| } |
| } |
| } |
| }; |
| messageCenter && messageCenter.bind(ecConfig.EVENT.LEGEND_HOVERLINK, this._onlegendhoverlink); |
| } |
| Base.prototype = { |
| canvasSupported: require('zrender/tool/env').canvasSupported, |
| _getZ: function (zWhat) { |
| if (this[zWhat] != null) { |
| return this[zWhat]; |
| } |
| var opt = this.ecTheme[this.type]; |
| if (opt && opt[zWhat] != null) { |
| return opt[zWhat]; |
| } |
| opt = ecConfig[this.type]; |
| if (opt && opt[zWhat] != null) { |
| return opt[zWhat]; |
| } |
| return 0; |
| }, |
| getZlevelBase: function () { |
| return this._getZ('zlevel'); |
| }, |
| getZBase: function () { |
| return this._getZ('z'); |
| }, |
| reformOption: function (opt) { |
| opt = zrUtil.merge(zrUtil.merge(opt || {}, zrUtil.clone(this.ecTheme[this.type] || {})), zrUtil.clone(ecConfig[this.type] || {})); |
| this.z = opt.z; |
| this.zlevel = opt.zlevel; |
| return opt; |
| }, |
| reformCssArray: function (p) { |
| if (p instanceof Array) { |
| switch (p.length + '') { |
| case '4': |
| return p; |
| case '3': |
| return [ |
| p[0], |
| p[1], |
| p[2], |
| p[1] |
| ]; |
| case '2': |
| return [ |
| p[0], |
| p[1], |
| p[0], |
| p[1] |
| ]; |
| case '1': |
| return [ |
| p[0], |
| p[0], |
| p[0], |
| p[0] |
| ]; |
| case '0': |
| return [ |
| 0, |
| 0, |
| 0, |
| 0 |
| ]; |
| } |
| } else { |
| return [ |
| p, |
| p, |
| p, |
| p |
| ]; |
| } |
| }, |
| getShapeById: function (id) { |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i].id === id) { |
| return this.shapeList[i]; |
| } |
| } |
| return null; |
| }, |
| getFont: function (textStyle) { |
| var finalTextStyle = this.getTextStyle(zrUtil.clone(textStyle)); |
| return finalTextStyle.fontStyle + ' ' + finalTextStyle.fontWeight + ' ' + finalTextStyle.fontSize + 'px ' + finalTextStyle.fontFamily; |
| }, |
| getTextStyle: function (targetStyle) { |
| return zrUtil.merge(zrUtil.merge(targetStyle || {}, this.ecTheme.textStyle), ecConfig.textStyle); |
| }, |
| getItemStyleColor: function (itemColor, seriesIndex, dataIndex, data) { |
| return typeof itemColor === 'function' ? itemColor.call(this.myChart, { |
| seriesIndex: seriesIndex, |
| series: this.series[seriesIndex], |
| dataIndex: dataIndex, |
| data: data |
| }) : itemColor; |
| }, |
| getDataFromOption: function (data, defaultData) { |
| return data != null ? data.value != null ? data.value : data : defaultData; |
| }, |
| subPixelOptimize: function (position, lineWidth) { |
| if (lineWidth % 2 === 1) { |
| position = Math.floor(position) + 0.5; |
| } else { |
| position = Math.round(position); |
| } |
| return position; |
| }, |
| resize: function () { |
| this.refresh && this.refresh(); |
| this.clearEffectShape && this.clearEffectShape(true); |
| var self = this; |
| setTimeout(function () { |
| self.animationEffect && self.animationEffect(); |
| }, 200); |
| }, |
| clear: function () { |
| this.clearEffectShape && this.clearEffectShape(); |
| this.zr && this.zr.delShape(this.shapeList); |
| this.shapeList = []; |
| }, |
| dispose: function () { |
| this.onbeforDispose && this.onbeforDispose(); |
| this.clear(); |
| this.shapeList = null; |
| this.effectList = null; |
| this.messageCenter && this.messageCenter.unbind(ecConfig.EVENT.LEGEND_HOVERLINK, this._onlegendhoverlink); |
| this.onafterDispose && this.onafterDispose(); |
| }, |
| query: ecQuery.query, |
| deepQuery: ecQuery.deepQuery, |
| deepMerge: ecQuery.deepMerge, |
| parsePercent: number.parsePercent, |
| parseCenter: number.parseCenter, |
| parseRadius: number.parseRadius, |
| numAddCommas: number.addCommas, |
| getPrecision: number.getPrecision |
| }; |
| return Base; |
| });define('echarts/layout/EdgeBundling', [ |
| 'require', |
| '../data/KDTree', |
| 'zrender/tool/vector' |
| ], function (require) { |
| var KDTree = require('../data/KDTree'); |
| var vec2 = require('zrender/tool/vector'); |
| var v2Create = vec2.create; |
| var v2DistSquare = vec2.distSquare; |
| var v2Dist = vec2.dist; |
| var v2Copy = vec2.copy; |
| var v2Clone = vec2.clone; |
| function squaredDistance(a, b) { |
| a = a.array; |
| b = b.array; |
| var x = b[0] - a[0]; |
| var y = b[1] - a[1]; |
| var z = b[2] - a[2]; |
| var w = b[3] - a[3]; |
| return x * x + y * y + z * z + w * w; |
| } |
| function CoarsenedEdge(group) { |
| this.points = [ |
| group.mp0, |
| group.mp1 |
| ]; |
| this.group = group; |
| } |
| function Edge(edge) { |
| var points = edge.points; |
| if (points[0][1] < points[1][1] || edge instanceof CoarsenedEdge) { |
| this.array = [ |
| points[0][0], |
| points[0][1], |
| points[1][0], |
| points[1][1] |
| ]; |
| this._startPoint = points[0]; |
| this._endPoint = points[1]; |
| } else { |
| this.array = [ |
| points[1][0], |
| points[1][1], |
| points[0][0], |
| points[0][1] |
| ]; |
| this._startPoint = points[1]; |
| this._endPoint = points[0]; |
| } |
| this.ink = v2Dist(points[0], points[1]); |
| this.edge = edge; |
| this.group = null; |
| } |
| Edge.prototype.getStartPoint = function () { |
| return this._startPoint; |
| }; |
| Edge.prototype.getEndPoint = function () { |
| return this._endPoint; |
| }; |
| function BundledEdgeGroup() { |
| this.edgeList = []; |
| this.mp0 = v2Create(); |
| this.mp1 = v2Create(); |
| this.ink = 0; |
| } |
| BundledEdgeGroup.prototype.addEdge = function (edge) { |
| edge.group = this; |
| this.edgeList.push(edge); |
| }; |
| BundledEdgeGroup.prototype.removeEdge = function (edge) { |
| edge.group = null; |
| this.edgeList.splice(this.edgeList.indexOf(edge), 1); |
| }; |
| function EdgeBundling() { |
| this.maxNearestEdge = 6; |
| this.maxTurningAngle = Math.PI / 4; |
| this.maxIteration = 20; |
| } |
| EdgeBundling.prototype = { |
| constructor: EdgeBundling, |
| run: function (rawEdges) { |
| var res = this._iterate(rawEdges); |
| var nIterate = 0; |
| while (nIterate++ < this.maxIteration) { |
| var coarsenedEdges = []; |
| for (var i = 0; i < res.groups.length; i++) { |
| coarsenedEdges.push(new CoarsenedEdge(res.groups[i])); |
| } |
| var newRes = this._iterate(coarsenedEdges); |
| if (newRes.savedInk <= 0) { |
| break; |
| } else { |
| res = newRes; |
| } |
| } |
| var newEdges = []; |
| function pointApproxEqual(p0, p1) { |
| return v2DistSquare(p0, p1) < 1e-10; |
| } |
| function cleanEdgePoints(edgePoints, rawEdgePoints) { |
| var res = []; |
| var off = 0; |
| for (var i = 0; i < edgePoints.length; i++) { |
| if (!(off > 0 && pointApproxEqual(edgePoints[i], res[off - 1]))) { |
| res[off++] = v2Clone(edgePoints[i]); |
| } |
| } |
| if (rawEdgePoints[0] && !pointApproxEqual(res[0], rawEdgePoints[0])) { |
| res = res.reverse(); |
| } |
| return res; |
| } |
| var buildNewEdges = function (groups, fromEdgePoints) { |
| var newEdgePoints; |
| for (var i = 0; i < groups.length; i++) { |
| var group = groups[i]; |
| if (group.edgeList[0] && group.edgeList[0].edge instanceof CoarsenedEdge) { |
| var newGroups = []; |
| for (var j = 0; j < group.edgeList.length; j++) { |
| newGroups.push(group.edgeList[j].edge.group); |
| } |
| if (!fromEdgePoints) { |
| newEdgePoints = []; |
| } else { |
| newEdgePoints = fromEdgePoints.slice(); |
| } |
| newEdgePoints.unshift(group.mp0); |
| newEdgePoints.push(group.mp1); |
| buildNewEdges(newGroups, newEdgePoints); |
| } else { |
| for (var j = 0; j < group.edgeList.length; j++) { |
| var edge = group.edgeList[j]; |
| if (!fromEdgePoints) { |
| newEdgePoints = []; |
| } else { |
| newEdgePoints = fromEdgePoints.slice(); |
| } |
| newEdgePoints.unshift(group.mp0); |
| newEdgePoints.push(group.mp1); |
| newEdgePoints.unshift(edge.getStartPoint()); |
| newEdgePoints.push(edge.getEndPoint()); |
| newEdges.push({ |
| points: cleanEdgePoints(newEdgePoints, edge.edge.points), |
| rawEdge: edge.edge |
| }); |
| } |
| } |
| } |
| }; |
| buildNewEdges(res.groups); |
| return newEdges; |
| }, |
| _iterate: function (rawEdges) { |
| var edges = []; |
| var groups = []; |
| var totalSavedInk = 0; |
| for (var i = 0; i < rawEdges.length; i++) { |
| var edge = new Edge(rawEdges[i]); |
| edges.push(edge); |
| } |
| var tree = new KDTree(edges, 4); |
| var nearests = []; |
| var _mp0 = v2Create(); |
| var _mp1 = v2Create(); |
| var _newGroupInk = 0; |
| var mp0 = v2Create(); |
| var mp1 = v2Create(); |
| var newGroupInk = 0; |
| for (var i = 0; i < edges.length; i++) { |
| var edge = edges[i]; |
| if (edge.group) { |
| continue; |
| } |
| tree.nearestN(edge, this.maxNearestEdge, squaredDistance, nearests); |
| var maxSavedInk = 0; |
| var mostSavingInkEdge = null; |
| var lastCheckedGroup = null; |
| for (var j = 0; j < nearests.length; j++) { |
| var nearest = nearests[j]; |
| var savedInk = 0; |
| if (nearest.group) { |
| if (nearest.group !== lastCheckedGroup) { |
| lastCheckedGroup = nearest.group; |
| _newGroupInk = this._calculateGroupEdgeInk(nearest.group, edge, _mp0, _mp1); |
| savedInk = nearest.group.ink + edge.ink - _newGroupInk; |
| } |
| } else { |
| _newGroupInk = this._calculateEdgeEdgeInk(edge, nearest, _mp0, _mp1); |
| savedInk = nearest.ink + edge.ink - _newGroupInk; |
| } |
| if (savedInk > maxSavedInk) { |
| maxSavedInk = savedInk; |
| mostSavingInkEdge = nearest; |
| v2Copy(mp1, _mp1); |
| v2Copy(mp0, _mp0); |
| newGroupInk = _newGroupInk; |
| } |
| } |
| if (mostSavingInkEdge) { |
| totalSavedInk += maxSavedInk; |
| var group; |
| if (!mostSavingInkEdge.group) { |
| group = new BundledEdgeGroup(); |
| groups.push(group); |
| group.addEdge(mostSavingInkEdge); |
| } |
| group = mostSavingInkEdge.group; |
| v2Copy(group.mp0, mp0); |
| v2Copy(group.mp1, mp1); |
| group.ink = newGroupInk; |
| mostSavingInkEdge.group.addEdge(edge); |
| } else { |
| var group = new BundledEdgeGroup(); |
| groups.push(group); |
| v2Copy(group.mp0, edge.getStartPoint()); |
| v2Copy(group.mp1, edge.getEndPoint()); |
| group.ink = edge.ink; |
| group.addEdge(edge); |
| } |
| } |
| return { |
| groups: groups, |
| edges: edges, |
| savedInk: totalSavedInk |
| }; |
| }, |
| _calculateEdgeEdgeInk: function () { |
| var startPointSet = []; |
| var endPointSet = []; |
| return function (e0, e1, mp0, mp1) { |
| startPointSet[0] = e0.getStartPoint(); |
| startPointSet[1] = e1.getStartPoint(); |
| endPointSet[0] = e0.getEndPoint(); |
| endPointSet[1] = e1.getEndPoint(); |
| this._calculateMeetPoints(startPointSet, endPointSet, mp0, mp1); |
| var ink = v2Dist(startPointSet[0], mp0) + v2Dist(mp0, mp1) + v2Dist(mp1, endPointSet[0]) + v2Dist(startPointSet[1], mp0) + v2Dist(mp1, endPointSet[1]); |
| return ink; |
| }; |
| }(), |
| _calculateGroupEdgeInk: function (group, edgeTryAdd, mp0, mp1) { |
| var startPointSet = []; |
| var endPointSet = []; |
| for (var i = 0; i < group.edgeList.length; i++) { |
| var edge = group.edgeList[i]; |
| startPointSet.push(edge.getStartPoint()); |
| endPointSet.push(edge.getEndPoint()); |
| } |
| startPointSet.push(edgeTryAdd.getStartPoint()); |
| endPointSet.push(edgeTryAdd.getEndPoint()); |
| this._calculateMeetPoints(startPointSet, endPointSet, mp0, mp1); |
| var ink = v2Dist(mp0, mp1); |
| for (var i = 0; i < startPointSet.length; i++) { |
| ink += v2Dist(startPointSet[i], mp0) + v2Dist(endPointSet[i], mp1); |
| } |
| return ink; |
| }, |
| _calculateMeetPoints: function () { |
| var cp0 = v2Create(); |
| var cp1 = v2Create(); |
| return function (startPointSet, endPointSet, mp0, mp1) { |
| vec2.set(cp0, 0, 0); |
| vec2.set(cp1, 0, 0); |
| var len = startPointSet.length; |
| for (var i = 0; i < len; i++) { |
| vec2.add(cp0, cp0, startPointSet[i]); |
| } |
| vec2.scale(cp0, cp0, 1 / len); |
| len = endPointSet.length; |
| for (var i = 0; i < len; i++) { |
| vec2.add(cp1, cp1, endPointSet[i]); |
| } |
| vec2.scale(cp1, cp1, 1 / len); |
| this._limitTurningAngle(startPointSet, cp0, cp1, mp0); |
| this._limitTurningAngle(endPointSet, cp1, cp0, mp1); |
| }; |
| }(), |
| _limitTurningAngle: function () { |
| var v10 = v2Create(); |
| var vTmp = v2Create(); |
| var project = v2Create(); |
| var tmpOut = v2Create(); |
| return function (pointSet, p0, p1, out) { |
| var maxTurningAngleCos = Math.cos(this.maxTurningAngle); |
| var maxTurningAngleTan = Math.tan(this.maxTurningAngle); |
| vec2.sub(v10, p0, p1); |
| vec2.normalize(v10, v10); |
| vec2.copy(out, p0); |
| var maxMovement = 0; |
| for (var i = 0; i < pointSet.length; i++) { |
| var p = pointSet[i]; |
| vec2.sub(vTmp, p, p0); |
| var len = vec2.len(vTmp); |
| vec2.scale(vTmp, vTmp, 1 / len); |
| var turningAngleCos = vec2.dot(vTmp, v10); |
| if (turningAngleCos < maxTurningAngleCos) { |
| vec2.scaleAndAdd(project, p0, v10, len * turningAngleCos); |
| var distance = v2Dist(project, p); |
| var d = distance / maxTurningAngleTan; |
| vec2.scaleAndAdd(tmpOut, project, v10, -d); |
| var movement = v2DistSquare(tmpOut, p0); |
| if (movement > maxMovement) { |
| maxMovement = movement; |
| vec2.copy(out, tmpOut); |
| } |
| } |
| } |
| }; |
| }() |
| }; |
| return EdgeBundling; |
| });define('zrender/shape/Star', [ |
| 'require', |
| '../tool/math', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var math = require('../tool/math'); |
| var sin = math.sin; |
| var cos = math.cos; |
| var PI = Math.PI; |
| var Base = require('./Base'); |
| var Star = function (options) { |
| Base.call(this, options); |
| }; |
| Star.prototype = { |
| type: 'star', |
| buildPath: function (ctx, style) { |
| var n = style.n; |
| if (!n || n < 2) { |
| return; |
| } |
| var x = style.x; |
| var y = style.y; |
| var r = style.r; |
| var r0 = style.r0; |
| if (r0 == null) { |
| r0 = n > 4 ? r * cos(2 * PI / n) / cos(PI / n) : r / 3; |
| } |
| var dStep = PI / n; |
| var deg = -PI / 2; |
| var xStart = x + r * cos(deg); |
| var yStart = y + r * sin(deg); |
| deg += dStep; |
| var pointList = style.pointList = []; |
| pointList.push([ |
| xStart, |
| yStart |
| ]); |
| for (var i = 0, end = n * 2 - 1, ri; i < end; i++) { |
| ri = i % 2 === 0 ? r0 : r; |
| pointList.push([ |
| x + ri * cos(deg), |
| y + ri * sin(deg) |
| ]); |
| deg += dStep; |
| } |
| pointList.push([ |
| xStart, |
| yStart |
| ]); |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| for (var i = 0; i < pointList.length; i++) { |
| ctx.lineTo(pointList[i][0], pointList[i][1]); |
| } |
| ctx.closePath(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var lineWidth; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } else { |
| lineWidth = 0; |
| } |
| style.__rect = { |
| x: Math.round(style.x - style.r - lineWidth / 2), |
| y: Math.round(style.y - style.r - lineWidth / 2), |
| width: style.r * 2 + lineWidth, |
| height: style.r * 2 + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Star, Base); |
| return Star; |
| });define('zrender/shape/Heart', [ |
| 'require', |
| './Base', |
| './util/PathProxy', |
| '../tool/area', |
| '../tool/util' |
| ], function (require) { |
| 'use strict'; |
| var Base = require('./Base'); |
| var PathProxy = require('./util/PathProxy'); |
| var area = require('../tool/area'); |
| var Heart = function (options) { |
| Base.call(this, options); |
| this._pathProxy = new PathProxy(); |
| }; |
| Heart.prototype = { |
| type: 'heart', |
| buildPath: function (ctx, style) { |
| var path = this._pathProxy || new PathProxy(); |
| path.begin(ctx); |
| path.moveTo(style.x, style.y); |
| path.bezierCurveTo(style.x + style.a / 2, style.y - style.b * 2 / 3, style.x + style.a * 2, style.y + style.b / 3, style.x, style.y + style.b); |
| path.bezierCurveTo(style.x - style.a * 2, style.y + style.b / 3, style.x - style.a / 2, style.y - style.b * 2 / 3, style.x, style.y); |
| path.closePath(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| if (!this._pathProxy.isEmpty()) { |
| this.buildPath(null, style); |
| } |
| return this._pathProxy.fastBoundingRect(); |
| }, |
| isCover: function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| if (this.isCoverRect(x, y)) { |
| return area.isInsidePath(this._pathProxy.pathCommands, this.style.lineWidth, this.style.brushType, x, y); |
| } |
| } |
| }; |
| require('../tool/util').inherits(Heart, Base); |
| return Heart; |
| });define('zrender/shape/Droplet', [ |
| 'require', |
| './Base', |
| './util/PathProxy', |
| '../tool/area', |
| '../tool/util' |
| ], function (require) { |
| 'use strict'; |
| var Base = require('./Base'); |
| var PathProxy = require('./util/PathProxy'); |
| var area = require('../tool/area'); |
| var Droplet = function (options) { |
| Base.call(this, options); |
| this._pathProxy = new PathProxy(); |
| }; |
| Droplet.prototype = { |
| type: 'droplet', |
| buildPath: function (ctx, style) { |
| var path = this._pathProxy || new PathProxy(); |
| path.begin(ctx); |
| path.moveTo(style.x, style.y + style.a); |
| path.bezierCurveTo(style.x + style.a, style.y + style.a, style.x + style.a * 3 / 2, style.y - style.a / 3, style.x, style.y - style.b); |
| path.bezierCurveTo(style.x - style.a * 3 / 2, style.y - style.a / 3, style.x - style.a, style.y + style.a, style.x, style.y + style.a); |
| path.closePath(); |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| if (!this._pathProxy.isEmpty()) { |
| this.buildPath(null, style); |
| } |
| return this._pathProxy.fastBoundingRect(); |
| }, |
| isCover: function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| if (this.isCoverRect(x, y)) { |
| return area.isInsidePath(this._pathProxy.pathCommands, this.style.lineWidth, this.style.brushType, x, y); |
| } |
| } |
| }; |
| require('../tool/util').inherits(Droplet, Base); |
| return Droplet; |
| });define('zrender/tool/math', [], function () { |
| var _radians = Math.PI / 180; |
| function sin(angle, isDegrees) { |
| return Math.sin(isDegrees ? angle * _radians : angle); |
| } |
| function cos(angle, isDegrees) { |
| return Math.cos(isDegrees ? angle * _radians : angle); |
| } |
| function degreeToRadian(angle) { |
| return angle * _radians; |
| } |
| function radianToDegree(angle) { |
| return angle / _radians; |
| } |
| return { |
| sin: sin, |
| cos: cos, |
| degreeToRadian: degreeToRadian, |
| radianToDegree: radianToDegree |
| }; |
| });define('zrender/shape/util/PathProxy', [ |
| 'require', |
| '../../tool/vector' |
| ], function (require) { |
| var vector = require('../../tool/vector'); |
| var PathSegment = function (command, points) { |
| this.command = command; |
| this.points = points || null; |
| }; |
| var PathProxy = function () { |
| this.pathCommands = []; |
| this._ctx = null; |
| this._min = []; |
| this._max = []; |
| }; |
| PathProxy.prototype.fastBoundingRect = function () { |
| var min = this._min; |
| var max = this._max; |
| min[0] = min[1] = Infinity; |
| max[0] = max[1] = -Infinity; |
| for (var i = 0; i < this.pathCommands.length; i++) { |
| var seg = this.pathCommands[i]; |
| var p = seg.points; |
| switch (seg.command) { |
| case 'M': |
| vector.min(min, min, p); |
| vector.max(max, max, p); |
| break; |
| case 'L': |
| vector.min(min, min, p); |
| vector.max(max, max, p); |
| break; |
| case 'C': |
| for (var j = 0; j < 6; j += 2) { |
| min[0] = Math.min(min[0], min[0], p[j]); |
| min[1] = Math.min(min[1], min[1], p[j + 1]); |
| max[0] = Math.max(max[0], max[0], p[j]); |
| max[1] = Math.max(max[1], max[1], p[j + 1]); |
| } |
| break; |
| case 'Q': |
| for (var j = 0; j < 4; j += 2) { |
| min[0] = Math.min(min[0], min[0], p[j]); |
| min[1] = Math.min(min[1], min[1], p[j + 1]); |
| max[0] = Math.max(max[0], max[0], p[j]); |
| max[1] = Math.max(max[1], max[1], p[j + 1]); |
| } |
| break; |
| case 'A': |
| var cx = p[0]; |
| var cy = p[1]; |
| var rx = p[2]; |
| var ry = p[3]; |
| min[0] = Math.min(min[0], min[0], cx - rx); |
| min[1] = Math.min(min[1], min[1], cy - ry); |
| max[0] = Math.max(max[0], max[0], cx + rx); |
| max[1] = Math.max(max[1], max[1], cy + ry); |
| break; |
| } |
| } |
| return { |
| x: min[0], |
| y: min[1], |
| width: max[0] - min[0], |
| height: max[1] - min[1] |
| }; |
| }; |
| PathProxy.prototype.begin = function (ctx) { |
| this._ctx = ctx || null; |
| this.pathCommands.length = 0; |
| return this; |
| }; |
| PathProxy.prototype.moveTo = function (x, y) { |
| this.pathCommands.push(new PathSegment('M', [ |
| x, |
| y |
| ])); |
| if (this._ctx) { |
| this._ctx.moveTo(x, y); |
| } |
| return this; |
| }; |
| PathProxy.prototype.lineTo = function (x, y) { |
| this.pathCommands.push(new PathSegment('L', [ |
| x, |
| y |
| ])); |
| if (this._ctx) { |
| this._ctx.lineTo(x, y); |
| } |
| return this; |
| }; |
| PathProxy.prototype.bezierCurveTo = function (x1, y1, x2, y2, x3, y3) { |
| this.pathCommands.push(new PathSegment('C', [ |
| x1, |
| y1, |
| x2, |
| y2, |
| x3, |
| y3 |
| ])); |
| if (this._ctx) { |
| this._ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3); |
| } |
| return this; |
| }; |
| PathProxy.prototype.quadraticCurveTo = function (x1, y1, x2, y2) { |
| this.pathCommands.push(new PathSegment('Q', [ |
| x1, |
| y1, |
| x2, |
| y2 |
| ])); |
| if (this._ctx) { |
| this._ctx.quadraticCurveTo(x1, y1, x2, y2); |
| } |
| return this; |
| }; |
| PathProxy.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) { |
| this.pathCommands.push(new PathSegment('A', [ |
| cx, |
| cy, |
| r, |
| r, |
| startAngle, |
| endAngle - startAngle, |
| 0, |
| anticlockwise ? 0 : 1 |
| ])); |
| if (this._ctx) { |
| this._ctx.arc(cx, cy, r, startAngle, endAngle, anticlockwise); |
| } |
| return this; |
| }; |
| PathProxy.prototype.arcTo = function (x1, y1, x2, y2, radius) { |
| if (this._ctx) { |
| this._ctx.arcTo(x1, y1, x2, y2, radius); |
| } |
| return this; |
| }; |
| PathProxy.prototype.rect = function (x, y, w, h) { |
| if (this._ctx) { |
| this._ctx.rect(x, y, w, h); |
| } |
| return this; |
| }; |
| PathProxy.prototype.closePath = function () { |
| this.pathCommands.push(new PathSegment('z')); |
| if (this._ctx) { |
| this._ctx.closePath(); |
| } |
| return this; |
| }; |
| PathProxy.prototype.isEmpty = function () { |
| return this.pathCommands.length === 0; |
| }; |
| PathProxy.PathSegment = PathSegment; |
| return PathProxy; |
| });define('zrender/shape/Line', [ |
| 'require', |
| './Base', |
| './util/dashedLineTo', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var dashedLineTo = require('./util/dashedLineTo'); |
| var Line = function (options) { |
| this.brushTypeOnly = 'stroke'; |
| this.textPosition = 'end'; |
| Base.call(this, options); |
| }; |
| Line.prototype = { |
| type: 'line', |
| buildPath: function (ctx, style) { |
| if (!style.lineType || style.lineType == 'solid') { |
| ctx.moveTo(style.xStart, style.yStart); |
| ctx.lineTo(style.xEnd, style.yEnd); |
| } else if (style.lineType == 'dashed' || style.lineType == 'dotted') { |
| var dashLength = (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1); |
| dashedLineTo(ctx, style.xStart, style.yStart, style.xEnd, style.yEnd, dashLength); |
| } |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var lineWidth = style.lineWidth || 1; |
| style.__rect = { |
| x: Math.min(style.xStart, style.xEnd) - lineWidth, |
| y: Math.min(style.yStart, style.yEnd) - lineWidth, |
| width: Math.abs(style.xStart - style.xEnd) + lineWidth, |
| height: Math.abs(style.yStart - style.yEnd) + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Line, Base); |
| return Line; |
| });define('zrender/shape/BezierCurve', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| 'use strict'; |
| var Base = require('./Base'); |
| var BezierCurve = function (options) { |
| this.brushTypeOnly = 'stroke'; |
| this.textPosition = 'end'; |
| Base.call(this, options); |
| }; |
| BezierCurve.prototype = { |
| type: 'bezier-curve', |
| buildPath: function (ctx, style) { |
| ctx.moveTo(style.xStart, style.yStart); |
| if (typeof style.cpX2 != 'undefined' && typeof style.cpY2 != 'undefined') { |
| ctx.bezierCurveTo(style.cpX1, style.cpY1, style.cpX2, style.cpY2, style.xEnd, style.yEnd); |
| } else { |
| ctx.quadraticCurveTo(style.cpX1, style.cpY1, style.xEnd, style.yEnd); |
| } |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var _minX = Math.min(style.xStart, style.xEnd, style.cpX1); |
| var _minY = Math.min(style.yStart, style.yEnd, style.cpY1); |
| var _maxX = Math.max(style.xStart, style.xEnd, style.cpX1); |
| var _maxY = Math.max(style.yStart, style.yEnd, style.cpY1); |
| var _x2 = style.cpX2; |
| var _y2 = style.cpY2; |
| if (typeof _x2 != 'undefined' && typeof _y2 != 'undefined') { |
| _minX = Math.min(_minX, _x2); |
| _minY = Math.min(_minY, _y2); |
| _maxX = Math.max(_maxX, _x2); |
| _maxY = Math.max(_maxY, _y2); |
| } |
| var lineWidth = style.lineWidth || 1; |
| style.__rect = { |
| x: _minX - lineWidth, |
| y: _minY - lineWidth, |
| width: _maxX - _minX + lineWidth, |
| height: _maxY - _minY + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(BezierCurve, Base); |
| return BezierCurve; |
| });define('zrender/shape/util/dashedLineTo', [], function () { |
| var dashPattern = [ |
| 5, |
| 5 |
| ]; |
| return function (ctx, x1, y1, x2, y2, dashLength) { |
| if (ctx.setLineDash) { |
| dashPattern[0] = dashPattern[1] = dashLength; |
| ctx.setLineDash(dashPattern); |
| ctx.moveTo(x1, y1); |
| ctx.lineTo(x2, y2); |
| return; |
| } |
| dashLength = typeof dashLength != 'number' ? 5 : dashLength; |
| var dx = x2 - x1; |
| var dy = y2 - y1; |
| var numDashes = Math.floor(Math.sqrt(dx * dx + dy * dy) / dashLength); |
| dx = dx / numDashes; |
| dy = dy / numDashes; |
| var flag = true; |
| for (var i = 0; i < numDashes; ++i) { |
| if (flag) { |
| ctx.moveTo(x1, y1); |
| } else { |
| ctx.lineTo(x1, y1); |
| } |
| flag = !flag; |
| x1 += dx; |
| y1 += dy; |
| } |
| ctx.lineTo(x2, y2); |
| }; |
| });define('zrender/shape/Polygon', [ |
| 'require', |
| './Base', |
| './util/smoothSpline', |
| './util/smoothBezier', |
| './util/dashedLineTo', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var smoothSpline = require('./util/smoothSpline'); |
| var smoothBezier = require('./util/smoothBezier'); |
| var dashedLineTo = require('./util/dashedLineTo'); |
| var Polygon = function (options) { |
| Base.call(this, options); |
| }; |
| Polygon.prototype = { |
| type: 'polygon', |
| buildPath: function (ctx, style) { |
| var pointList = style.pointList; |
| if (pointList.length < 2) { |
| return; |
| } |
| if (style.smooth && style.smooth !== 'spline') { |
| var controlPoints = smoothBezier(pointList, style.smooth, true, style.smoothConstraint); |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| var cp1; |
| var cp2; |
| var p; |
| var len = pointList.length; |
| for (var i = 0; i < len; i++) { |
| cp1 = controlPoints[i * 2]; |
| cp2 = controlPoints[i * 2 + 1]; |
| p = pointList[(i + 1) % len]; |
| ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]); |
| } |
| } else { |
| if (style.smooth === 'spline') { |
| pointList = smoothSpline(pointList, true); |
| } |
| if (!style.lineType || style.lineType == 'solid') { |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| for (var i = 1, l = pointList.length; i < l; i++) { |
| ctx.lineTo(pointList[i][0], pointList[i][1]); |
| } |
| ctx.lineTo(pointList[0][0], pointList[0][1]); |
| } else if (style.lineType == 'dashed' || style.lineType == 'dotted') { |
| var dashLength = style._dashLength || (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1); |
| style._dashLength = dashLength; |
| ctx.moveTo(pointList[0][0], pointList[0][1]); |
| for (var i = 1, l = pointList.length; i < l; i++) { |
| dashedLineTo(ctx, pointList[i - 1][0], pointList[i - 1][1], pointList[i][0], pointList[i][1], dashLength); |
| } |
| dashedLineTo(ctx, pointList[pointList.length - 1][0], pointList[pointList.length - 1][1], pointList[0][0], pointList[0][1], dashLength); |
| } |
| } |
| ctx.closePath(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var minX = Number.MAX_VALUE; |
| var maxX = Number.MIN_VALUE; |
| var minY = Number.MAX_VALUE; |
| var maxY = Number.MIN_VALUE; |
| var pointList = style.pointList; |
| for (var i = 0, l = pointList.length; i < l; i++) { |
| if (pointList[i][0] < minX) { |
| minX = pointList[i][0]; |
| } |
| if (pointList[i][0] > maxX) { |
| maxX = pointList[i][0]; |
| } |
| if (pointList[i][1] < minY) { |
| minY = pointList[i][1]; |
| } |
| if (pointList[i][1] > maxY) { |
| maxY = pointList[i][1]; |
| } |
| } |
| var lineWidth; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } else { |
| lineWidth = 0; |
| } |
| style.__rect = { |
| x: Math.round(minX - lineWidth / 2), |
| y: Math.round(minY - lineWidth / 2), |
| width: maxX - minX + lineWidth, |
| height: maxY - minY + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Polygon, Base); |
| return Polygon; |
| });define('echarts/util/shape/normalIsCover', [], function () { |
| return function (x, y) { |
| var originPos = this.transformCoordToLocal(x, y); |
| x = originPos[0]; |
| y = originPos[1]; |
| return this.isCoverRect(x, y); |
| }; |
| });define('zrender/shape/util/smoothSpline', [ |
| 'require', |
| '../../tool/vector' |
| ], function (require) { |
| var vector = require('../../tool/vector'); |
| function interpolate(p0, p1, p2, p3, t, t2, t3) { |
| var v0 = (p2 - p0) * 0.5; |
| var v1 = (p3 - p1) * 0.5; |
| return (2 * (p1 - p2) + v0 + v1) * t3 + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + v0 * t + p1; |
| } |
| return function (points, isLoop, constraint) { |
| var len = points.length; |
| var ret = []; |
| var distance = 0; |
| for (var i = 1; i < len; i++) { |
| distance += vector.distance(points[i - 1], points[i]); |
| } |
| var segs = distance / 5; |
| segs = segs < len ? len : segs; |
| for (var i = 0; i < segs; i++) { |
| var pos = i / (segs - 1) * (isLoop ? len : len - 1); |
| var idx = Math.floor(pos); |
| var w = pos - idx; |
| var p0; |
| var p1 = points[idx % len]; |
| var p2; |
| var p3; |
| if (!isLoop) { |
| p0 = points[idx === 0 ? idx : idx - 1]; |
| p2 = points[idx > len - 2 ? len - 1 : idx + 1]; |
| p3 = points[idx > len - 3 ? len - 1 : idx + 2]; |
| } else { |
| p0 = points[(idx - 1 + len) % len]; |
| p2 = points[(idx + 1) % len]; |
| p3 = points[(idx + 2) % len]; |
| } |
| var w2 = w * w; |
| var w3 = w * w2; |
| ret.push([ |
| interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3), |
| interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3) |
| ]); |
| } |
| return ret; |
| }; |
| });define('zrender/shape/util/smoothBezier', [ |
| 'require', |
| '../../tool/vector' |
| ], function (require) { |
| var vector = require('../../tool/vector'); |
| return function (points, smooth, isLoop, constraint) { |
| var cps = []; |
| var v = []; |
| var v1 = []; |
| var v2 = []; |
| var prevPoint; |
| var nextPoint; |
| var hasConstraint = !!constraint; |
| var min, max; |
| if (hasConstraint) { |
| min = [ |
| Infinity, |
| Infinity |
| ]; |
| max = [ |
| -Infinity, |
| -Infinity |
| ]; |
| for (var i = 0, len = points.length; i < len; i++) { |
| vector.min(min, min, points[i]); |
| vector.max(max, max, points[i]); |
| } |
| vector.min(min, min, constraint[0]); |
| vector.max(max, max, constraint[1]); |
| } |
| for (var i = 0, len = points.length; i < len; i++) { |
| var point = points[i]; |
| var prevPoint; |
| var nextPoint; |
| if (isLoop) { |
| prevPoint = points[i ? i - 1 : len - 1]; |
| nextPoint = points[(i + 1) % len]; |
| } else { |
| if (i === 0 || i === len - 1) { |
| cps.push(vector.clone(points[i])); |
| continue; |
| } else { |
| prevPoint = points[i - 1]; |
| nextPoint = points[i + 1]; |
| } |
| } |
| vector.sub(v, nextPoint, prevPoint); |
| vector.scale(v, v, smooth); |
| var d0 = vector.distance(point, prevPoint); |
| var d1 = vector.distance(point, nextPoint); |
| var sum = d0 + d1; |
| if (sum !== 0) { |
| d0 /= sum; |
| d1 /= sum; |
| } |
| vector.scale(v1, v, -d0); |
| vector.scale(v2, v, d1); |
| var cp0 = vector.add([], point, v1); |
| var cp1 = vector.add([], point, v2); |
| if (hasConstraint) { |
| vector.max(cp0, cp0, min); |
| vector.min(cp0, cp0, max); |
| vector.max(cp1, cp1, min); |
| vector.min(cp1, cp1, max); |
| } |
| cps.push(cp0); |
| cps.push(cp1); |
| } |
| if (isLoop) { |
| cps.push(vector.clone(cps.shift())); |
| } |
| return cps; |
| }; |
| });define('echarts/util/ecQuery', [ |
| 'require', |
| 'zrender/tool/util' |
| ], function (require) { |
| var zrUtil = require('zrender/tool/util'); |
| function query(optionTarget, optionLocation) { |
| if (typeof optionTarget == 'undefined') { |
| return; |
| } |
| if (!optionLocation) { |
| return optionTarget; |
| } |
| optionLocation = optionLocation.split('.'); |
| var length = optionLocation.length; |
| var curIdx = 0; |
| while (curIdx < length) { |
| optionTarget = optionTarget[optionLocation[curIdx]]; |
| if (typeof optionTarget == 'undefined') { |
| return; |
| } |
| curIdx++; |
| } |
| return optionTarget; |
| } |
| function deepQuery(ctrList, optionLocation) { |
| var finalOption; |
| for (var i = 0, l = ctrList.length; i < l; i++) { |
| finalOption = query(ctrList[i], optionLocation); |
| if (typeof finalOption != 'undefined') { |
| return finalOption; |
| } |
| } |
| } |
| function deepMerge(ctrList, optionLocation) { |
| var finalOption; |
| var len = ctrList.length; |
| while (len--) { |
| var tempOption = query(ctrList[len], optionLocation); |
| if (typeof tempOption != 'undefined') { |
| if (typeof finalOption == 'undefined') { |
| finalOption = zrUtil.clone(tempOption); |
| } else { |
| zrUtil.merge(finalOption, tempOption, true); |
| } |
| } |
| } |
| return finalOption; |
| } |
| return { |
| query: query, |
| deepQuery: deepQuery, |
| deepMerge: deepMerge |
| }; |
| });define('echarts/util/number', [], function () { |
| function _trim(str) { |
| return str.replace(/^\s+/, '').replace(/\s+$/, ''); |
| } |
| function parsePercent(value, maxValue) { |
| if (typeof value === 'string') { |
| if (_trim(value).match(/%$/)) { |
| return parseFloat(value) / 100 * maxValue; |
| } |
| return parseFloat(value); |
| } |
| return value; |
| } |
| function parseCenter(zr, center) { |
| return [ |
| parsePercent(center[0], zr.getWidth()), |
| parsePercent(center[1], zr.getHeight()) |
| ]; |
| } |
| function parseRadius(zr, radius) { |
| if (!(radius instanceof Array)) { |
| radius = [ |
| 0, |
| radius |
| ]; |
| } |
| var zrSize = Math.min(zr.getWidth(), zr.getHeight()) / 2; |
| return [ |
| parsePercent(radius[0], zrSize), |
| parsePercent(radius[1], zrSize) |
| ]; |
| } |
| function addCommas(x) { |
| if (isNaN(x)) { |
| return '-'; |
| } |
| x = (x + '').split('.'); |
| return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + (x.length > 1 ? '.' + x[1] : ''); |
| } |
| function getPrecision(val) { |
| var e = 1; |
| var count = 0; |
| while (Math.round(val * e) / e !== val) { |
| e *= 10; |
| count++; |
| } |
| return count; |
| } |
| return { |
| parsePercent: parsePercent, |
| parseCenter: parseCenter, |
| parseRadius: parseRadius, |
| addCommas: addCommas, |
| getPrecision: getPrecision |
| }; |
| });define('echarts/data/KDTree', [ |
| 'require', |
| './quickSelect' |
| ], function (require) { |
| var quickSelect = require('./quickSelect'); |
| function Node(axis, data) { |
| this.left = null; |
| this.right = null; |
| this.axis = axis; |
| this.data = data; |
| } |
| var KDTree = function (points, dimension) { |
| if (!points.length) { |
| return; |
| } |
| if (!dimension) { |
| dimension = points[0].array.length; |
| } |
| this.dimension = dimension; |
| this.root = this._buildTree(points, 0, points.length - 1, 0); |
| this._stack = []; |
| this._nearstNList = []; |
| }; |
| KDTree.prototype._buildTree = function (points, left, right, axis) { |
| if (right < left) { |
| return null; |
| } |
| var medianIndex = Math.floor((left + right) / 2); |
| medianIndex = quickSelect(points, left, right, medianIndex, function (a, b) { |
| return a.array[axis] - b.array[axis]; |
| }); |
| var median = points[medianIndex]; |
| var node = new Node(axis, median); |
| axis = (axis + 1) % this.dimension; |
| if (right > left) { |
| node.left = this._buildTree(points, left, medianIndex - 1, axis); |
| node.right = this._buildTree(points, medianIndex + 1, right, axis); |
| } |
| return node; |
| }; |
| KDTree.prototype.nearest = function (target, squaredDistance) { |
| var curr = this.root; |
| var stack = this._stack; |
| var idx = 0; |
| var minDist = Infinity; |
| var nearestNode = null; |
| if (curr.data !== target) { |
| minDist = squaredDistance(curr.data, target); |
| nearestNode = curr; |
| } |
| if (target.array[curr.axis] < curr.data.array[curr.axis]) { |
| curr.right && (stack[idx++] = curr.right); |
| curr.left && (stack[idx++] = curr.left); |
| } else { |
| curr.left && (stack[idx++] = curr.left); |
| curr.right && (stack[idx++] = curr.right); |
| } |
| while (idx--) { |
| curr = stack[idx]; |
| var currDist = target.array[curr.axis] - curr.data.array[curr.axis]; |
| var isLeft = currDist < 0; |
| var needsCheckOtherSide = false; |
| currDist = currDist * currDist; |
| if (currDist < minDist) { |
| currDist = squaredDistance(curr.data, target); |
| if (currDist < minDist && curr.data !== target) { |
| minDist = currDist; |
| nearestNode = curr; |
| } |
| needsCheckOtherSide = true; |
| } |
| if (isLeft) { |
| if (needsCheckOtherSide) { |
| curr.right && (stack[idx++] = curr.right); |
| } |
| curr.left && (stack[idx++] = curr.left); |
| } else { |
| if (needsCheckOtherSide) { |
| curr.left && (stack[idx++] = curr.left); |
| } |
| curr.right && (stack[idx++] = curr.right); |
| } |
| } |
| return nearestNode.data; |
| }; |
| KDTree.prototype._addNearest = function (found, dist, node) { |
| var nearestNList = this._nearstNList; |
| for (var i = found - 1; i > 0; i--) { |
| if (dist >= nearestNList[i - 1].dist) { |
| break; |
| } else { |
| nearestNList[i].dist = nearestNList[i - 1].dist; |
| nearestNList[i].node = nearestNList[i - 1].node; |
| } |
| } |
| nearestNList[i].dist = dist; |
| nearestNList[i].node = node; |
| }; |
| KDTree.prototype.nearestN = function (target, N, squaredDistance, output) { |
| if (N <= 0) { |
| output.length = 0; |
| return output; |
| } |
| var curr = this.root; |
| var stack = this._stack; |
| var idx = 0; |
| var nearestNList = this._nearstNList; |
| for (var i = 0; i < N; i++) { |
| if (!nearestNList[i]) { |
| nearestNList[i] = {}; |
| } |
| nearestNList[i].dist = 0; |
| nearestNList[i].node = null; |
| } |
| var currDist = squaredDistance(curr.data, target); |
| var found = 0; |
| if (curr.data !== target) { |
| found++; |
| this._addNearest(found, currDist, curr); |
| } |
| if (target.array[curr.axis] < curr.data.array[curr.axis]) { |
| curr.right && (stack[idx++] = curr.right); |
| curr.left && (stack[idx++] = curr.left); |
| } else { |
| curr.left && (stack[idx++] = curr.left); |
| curr.right && (stack[idx++] = curr.right); |
| } |
| while (idx--) { |
| curr = stack[idx]; |
| var currDist = target.array[curr.axis] - curr.data.array[curr.axis]; |
| var isLeft = currDist < 0; |
| var needsCheckOtherSide = false; |
| currDist = currDist * currDist; |
| if (found < N || currDist < nearestNList[found - 1].dist) { |
| currDist = squaredDistance(curr.data, target); |
| if ((found < N || currDist < nearestNList[found - 1].dist) && curr.data !== target) { |
| if (found < N) { |
| found++; |
| } |
| this._addNearest(found, currDist, curr); |
| } |
| needsCheckOtherSide = true; |
| } |
| if (isLeft) { |
| if (needsCheckOtherSide) { |
| curr.right && (stack[idx++] = curr.right); |
| } |
| curr.left && (stack[idx++] = curr.left); |
| } else { |
| if (needsCheckOtherSide) { |
| curr.left && (stack[idx++] = curr.left); |
| } |
| curr.right && (stack[idx++] = curr.right); |
| } |
| } |
| for (var i = 0; i < found; i++) { |
| output[i] = nearestNList[i].node.data; |
| } |
| output.length = found; |
| return output; |
| }; |
| return KDTree; |
| });define('echarts/data/quickSelect', ['require'], function (require) { |
| function defaultCompareFunc(a, b) { |
| return a - b; |
| } |
| function swapElement(list, idx0, idx1) { |
| var tmp = list[idx0]; |
| list[idx0] = list[idx1]; |
| list[idx1] = tmp; |
| } |
| function select(list, left, right, nth, compareFunc) { |
| var pivotIdx = left; |
| while (right > left) { |
| var pivotIdx = Math.round((right + left) / 2); |
| var pivotValue = list[pivotIdx]; |
| swapElement(list, pivotIdx, right); |
| pivotIdx = left; |
| for (var i = left; i <= right - 1; i++) { |
| if (compareFunc(pivotValue, list[i]) >= 0) { |
| swapElement(list, i, pivotIdx); |
| pivotIdx++; |
| } |
| } |
| swapElement(list, right, pivotIdx); |
| if (pivotIdx === nth) { |
| return pivotIdx; |
| } else if (pivotIdx < nth) { |
| left = pivotIdx + 1; |
| } else { |
| right = pivotIdx - 1; |
| } |
| } |
| return left; |
| } |
| function quickSelect(list, left, right, nth, compareFunc) { |
| if (arguments.length <= 3) { |
| nth = left; |
| if (arguments.length == 2) { |
| compareFunc = defaultCompareFunc; |
| } else { |
| compareFunc = right; |
| } |
| left = 0; |
| right = list.length - 1; |
| } |
| return select(list, left, right, nth, compareFunc); |
| } |
| return quickSelect; |
| });define('echarts/component/dataView', [ |
| 'require', |
| './base', |
| '../config', |
| 'zrender/tool/util', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var ecConfig = require('../config'); |
| var zrUtil = require('zrender/tool/util'); |
| function DataView(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.dom = myChart.dom; |
| this._tDom = document.createElement('div'); |
| this._textArea = document.createElement('textArea'); |
| this._buttonRefresh = document.createElement('button'); |
| this._buttonRefresh.setAttribute('type', 'button'); |
| this._buttonClose = document.createElement('button'); |
| this._buttonClose.setAttribute('type', 'button'); |
| this._hasShow = false; |
| this._zrHeight = zr.getHeight(); |
| this._zrWidth = zr.getWidth(); |
| this._tDom.className = 'echarts-dataview'; |
| this.hide(); |
| this.dom.firstChild.appendChild(this._tDom); |
| if (window.addEventListener) { |
| this._tDom.addEventListener('click', this._stop); |
| this._tDom.addEventListener('mousewheel', this._stop); |
| this._tDom.addEventListener('mousemove', this._stop); |
| this._tDom.addEventListener('mousedown', this._stop); |
| this._tDom.addEventListener('mouseup', this._stop); |
| this._tDom.addEventListener('touchstart', this._stop); |
| this._tDom.addEventListener('touchmove', this._stop); |
| this._tDom.addEventListener('touchend', this._stop); |
| } else { |
| this._tDom.attachEvent('onclick', this._stop); |
| this._tDom.attachEvent('onmousewheel', this._stop); |
| this._tDom.attachEvent('onmousemove', this._stop); |
| this._tDom.attachEvent('onmousedown', this._stop); |
| this._tDom.attachEvent('onmouseup', this._stop); |
| } |
| } |
| DataView.prototype = { |
| type: ecConfig.COMPONENT_TYPE_DATAVIEW, |
| _lang: [ |
| 'Data View', |
| 'close', |
| 'refresh' |
| ], |
| _gCssText: 'position:absolute;' + 'display:block;' + 'overflow:hidden;' + 'transition:height 0.8s,background-color 1s;' + '-moz-transition:height 0.8s,background-color 1s;' + '-webkit-transition:height 0.8s,background-color 1s;' + '-o-transition:height 0.8s,background-color 1s;' + 'z-index:1;' + 'left:0;' + 'top:0;', |
| hide: function () { |
| this._sizeCssText = 'width:' + this._zrWidth + 'px;' + 'height:' + 0 + 'px;' + 'background-color:#f0ffff;'; |
| this._tDom.style.cssText = this._gCssText + this._sizeCssText; |
| }, |
| show: function (newOption) { |
| this._hasShow = true; |
| var lang = this.query(this.option, 'toolbox.feature.dataView.lang') || this._lang; |
| this.option = newOption; |
| this._tDom.innerHTML = '<p style="padding:8px 0;margin:0 0 10px 0;' + 'border-bottom:1px solid #eee">' + (lang[0] || this._lang[0]) + '</p>'; |
| var customContent = this.query(this.option, 'toolbox.feature.dataView.optionToContent'); |
| if (typeof customContent != 'function') { |
| this._textArea.value = this._optionToContent(); |
| } else { |
| this._textArea = document.createElement('div'); |
| this._textArea.innerHTML = customContent(this.option); |
| } |
| this._textArea.style.cssText = 'display:block;margin:0 0 8px 0;padding:4px 6px;overflow:auto;' + 'width:100%;' + 'height:' + (this._zrHeight - 100) + 'px;'; |
| this._tDom.appendChild(this._textArea); |
| this._buttonClose.style.cssText = 'float:right;padding:1px 6px;'; |
| this._buttonClose.innerHTML = lang[1] || this._lang[1]; |
| var self = this; |
| this._buttonClose.onclick = function () { |
| self.hide(); |
| }; |
| this._tDom.appendChild(this._buttonClose); |
| if (this.query(this.option, 'toolbox.feature.dataView.readOnly') === false) { |
| this._buttonRefresh.style.cssText = 'float:right;margin-right:10px;padding:1px 6px;'; |
| this._buttonRefresh.innerHTML = lang[2] || this._lang[2]; |
| this._buttonRefresh.onclick = function () { |
| self._save(); |
| }; |
| this._textArea.readOnly = false; |
| this._textArea.style.cursor = 'default'; |
| } else { |
| this._buttonRefresh.style.cssText = 'display:none'; |
| this._textArea.readOnly = true; |
| this._textArea.style.cursor = 'text'; |
| } |
| this._tDom.appendChild(this._buttonRefresh); |
| this._sizeCssText = 'width:' + this._zrWidth + 'px;' + 'height:' + this._zrHeight + 'px;' + 'background-color:#fff;'; |
| this._tDom.style.cssText = this._gCssText + this._sizeCssText; |
| }, |
| _optionToContent: function () { |
| var i; |
| var j; |
| var k; |
| var len; |
| var data; |
| var valueList; |
| var axisList = []; |
| var content = ''; |
| if (this.option.xAxis) { |
| if (this.option.xAxis instanceof Array) { |
| axisList = this.option.xAxis; |
| } else { |
| axisList = [this.option.xAxis]; |
| } |
| for (i = 0, len = axisList.length; i < len; i++) { |
| if ((axisList[i].type || 'category') == 'category') { |
| valueList = []; |
| for (j = 0, k = axisList[i].data.length; j < k; j++) { |
| valueList.push(this.getDataFromOption(axisList[i].data[j])); |
| } |
| content += valueList.join(', ') + '\n\n'; |
| } |
| } |
| } |
| if (this.option.yAxis) { |
| if (this.option.yAxis instanceof Array) { |
| axisList = this.option.yAxis; |
| } else { |
| axisList = [this.option.yAxis]; |
| } |
| for (i = 0, len = axisList.length; i < len; i++) { |
| if (axisList[i].type == 'category') { |
| valueList = []; |
| for (j = 0, k = axisList[i].data.length; j < k; j++) { |
| valueList.push(this.getDataFromOption(axisList[i].data[j])); |
| } |
| content += valueList.join(', ') + '\n\n'; |
| } |
| } |
| } |
| var series = this.option.series; |
| var itemName; |
| for (i = 0, len = series.length; i < len; i++) { |
| valueList = []; |
| for (j = 0, k = series[i].data.length; j < k; j++) { |
| data = series[i].data[j]; |
| if (series[i].type == ecConfig.CHART_TYPE_PIE || series[i].type == ecConfig.CHART_TYPE_MAP) { |
| itemName = (data.name || '-') + ':'; |
| } else { |
| itemName = ''; |
| } |
| if (series[i].type == ecConfig.CHART_TYPE_SCATTER) { |
| data = this.getDataFromOption(data).join(', '); |
| } |
| valueList.push(itemName + this.getDataFromOption(data)); |
| } |
| content += (series[i].name || '-') + ' : \n'; |
| content += valueList.join(series[i].type == ecConfig.CHART_TYPE_SCATTER ? '\n' : ', '); |
| content += '\n\n'; |
| } |
| return content; |
| }, |
| _save: function () { |
| var customContent = this.query(this.option, 'toolbox.feature.dataView.contentToOption'); |
| if (typeof customContent != 'function') { |
| var text = this._textArea.value.split('\n'); |
| var content = []; |
| for (var i = 0, l = text.length; i < l; i++) { |
| text[i] = this._trim(text[i]); |
| if (text[i] !== '') { |
| content.push(text[i]); |
| } |
| } |
| this._contentToOption(content); |
| } else { |
| customContent(this._textArea, this.option); |
| } |
| this.hide(); |
| var self = this; |
| setTimeout(function () { |
| self.messageCenter && self.messageCenter.dispatch(ecConfig.EVENT.DATA_VIEW_CHANGED, null, { option: self.option }, self.myChart); |
| }, self.canvasSupported ? 800 : 100); |
| }, |
| _contentToOption: function (content) { |
| var i; |
| var j; |
| var k; |
| var len; |
| var data; |
| var axisList = []; |
| var contentIdx = 0; |
| var contentValueList; |
| var value; |
| if (this.option.xAxis) { |
| if (this.option.xAxis instanceof Array) { |
| axisList = this.option.xAxis; |
| } else { |
| axisList = [this.option.xAxis]; |
| } |
| for (i = 0, len = axisList.length; i < len; i++) { |
| if ((axisList[i].type || 'category') == 'category') { |
| contentValueList = content[contentIdx].split(','); |
| for (j = 0, k = axisList[i].data.length; j < k; j++) { |
| value = this._trim(contentValueList[j] || ''); |
| data = axisList[i].data[j]; |
| if (typeof axisList[i].data[j].value != 'undefined') { |
| axisList[i].data[j].value = value; |
| } else { |
| axisList[i].data[j] = value; |
| } |
| } |
| contentIdx++; |
| } |
| } |
| } |
| if (this.option.yAxis) { |
| if (this.option.yAxis instanceof Array) { |
| axisList = this.option.yAxis; |
| } else { |
| axisList = [this.option.yAxis]; |
| } |
| for (i = 0, len = axisList.length; i < len; i++) { |
| if (axisList[i].type == 'category') { |
| contentValueList = content[contentIdx].split(','); |
| for (j = 0, k = axisList[i].data.length; j < k; j++) { |
| value = this._trim(contentValueList[j] || ''); |
| data = axisList[i].data[j]; |
| if (typeof axisList[i].data[j].value != 'undefined') { |
| axisList[i].data[j].value = value; |
| } else { |
| axisList[i].data[j] = value; |
| } |
| } |
| contentIdx++; |
| } |
| } |
| } |
| var series = this.option.series; |
| for (i = 0, len = series.length; i < len; i++) { |
| contentIdx++; |
| if (series[i].type == ecConfig.CHART_TYPE_SCATTER) { |
| for (var j = 0, k = series[i].data.length; j < k; j++) { |
| contentValueList = content[contentIdx]; |
| value = contentValueList.replace(' ', '').split(','); |
| if (typeof series[i].data[j].value != 'undefined') { |
| series[i].data[j].value = value; |
| } else { |
| series[i].data[j] = value; |
| } |
| contentIdx++; |
| } |
| } else { |
| contentValueList = content[contentIdx].split(','); |
| for (var j = 0, k = series[i].data.length; j < k; j++) { |
| value = (contentValueList[j] || '').replace(/.*:/, ''); |
| value = this._trim(value); |
| value = value != '-' && value !== '' ? value - 0 : '-'; |
| if (typeof series[i].data[j].value != 'undefined') { |
| series[i].data[j].value = value; |
| } else { |
| series[i].data[j] = value; |
| } |
| } |
| contentIdx++; |
| } |
| } |
| }, |
| _trim: function (str) { |
| var trimer = new RegExp('(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+$)', 'g'); |
| return str.replace(trimer, ''); |
| }, |
| _stop: function (e) { |
| e = e || window.event; |
| if (e.stopPropagation) { |
| e.stopPropagation(); |
| } else { |
| e.cancelBubble = true; |
| } |
| }, |
| resize: function () { |
| this._zrHeight = this.zr.getHeight(); |
| this._zrWidth = this.zr.getWidth(); |
| if (this._tDom.offsetHeight > 10) { |
| this._sizeCssText = 'width:' + this._zrWidth + 'px;' + 'height:' + this._zrHeight + 'px;' + 'background-color:#fff;'; |
| this._tDom.style.cssText = this._gCssText + this._sizeCssText; |
| this._textArea.style.cssText = 'display:block;margin:0 0 8px 0;' + 'padding:4px 6px;overflow:auto;' + 'width:100%;' + 'height:' + (this._zrHeight - 100) + 'px;'; |
| } |
| }, |
| dispose: function () { |
| if (window.removeEventListener) { |
| this._tDom.removeEventListener('click', this._stop); |
| this._tDom.removeEventListener('mousewheel', this._stop); |
| this._tDom.removeEventListener('mousemove', this._stop); |
| this._tDom.removeEventListener('mousedown', this._stop); |
| this._tDom.removeEventListener('mouseup', this._stop); |
| this._tDom.removeEventListener('touchstart', this._stop); |
| this._tDom.removeEventListener('touchmove', this._stop); |
| this._tDom.removeEventListener('touchend', this._stop); |
| } else { |
| this._tDom.detachEvent('onclick', this._stop); |
| this._tDom.detachEvent('onmousewheel', this._stop); |
| this._tDom.detachEvent('onmousemove', this._stop); |
| this._tDom.detachEvent('onmousedown', this._stop); |
| this._tDom.detachEvent('onmouseup', this._stop); |
| } |
| this._buttonRefresh.onclick = null; |
| this._buttonClose.onclick = null; |
| if (this._hasShow) { |
| this._tDom.removeChild(this._textArea); |
| this._tDom.removeChild(this._buttonRefresh); |
| this._tDom.removeChild(this._buttonClose); |
| } |
| this._textArea = null; |
| this._buttonRefresh = null; |
| this._buttonClose = null; |
| this.dom.firstChild.removeChild(this._tDom); |
| this._tDom = null; |
| } |
| }; |
| zrUtil.inherits(DataView, Base); |
| require('../component').define('dataView', DataView); |
| return DataView; |
| });define('echarts/util/shape/Cross', [ |
| 'require', |
| 'zrender/shape/Base', |
| 'zrender/shape/Line', |
| 'zrender/tool/util', |
| './normalIsCover' |
| ], function (require) { |
| var Base = require('zrender/shape/Base'); |
| var LineShape = require('zrender/shape/Line'); |
| var zrUtil = require('zrender/tool/util'); |
| function Cross(options) { |
| Base.call(this, options); |
| } |
| Cross.prototype = { |
| type: 'cross', |
| buildPath: function (ctx, style) { |
| var rect = style.rect; |
| style.xStart = rect.x; |
| style.xEnd = rect.x + rect.width; |
| style.yStart = style.yEnd = style.y; |
| LineShape.prototype.buildPath(ctx, style); |
| style.xStart = style.xEnd = style.x; |
| style.yStart = rect.y; |
| style.yEnd = rect.y + rect.height; |
| LineShape.prototype.buildPath(ctx, style); |
| }, |
| getRect: function (style) { |
| return style.rect; |
| }, |
| isCover: require('./normalIsCover') |
| }; |
| zrUtil.inherits(Cross, Base); |
| return Cross; |
| });define('zrender/shape/Sector', [ |
| 'require', |
| '../tool/math', |
| '../tool/computeBoundingBox', |
| '../tool/vector', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var math = require('../tool/math'); |
| var computeBoundingBox = require('../tool/computeBoundingBox'); |
| var vec2 = require('../tool/vector'); |
| var Base = require('./Base'); |
| var min0 = vec2.create(); |
| var min1 = vec2.create(); |
| var max0 = vec2.create(); |
| var max1 = vec2.create(); |
| var Sector = function (options) { |
| Base.call(this, options); |
| }; |
| Sector.prototype = { |
| type: 'sector', |
| buildPath: function (ctx, style) { |
| var x = style.x; |
| var y = style.y; |
| var r0 = style.r0 || 0; |
| var r = style.r; |
| var startAngle = style.startAngle; |
| var endAngle = style.endAngle; |
| var clockWise = style.clockWise || false; |
| startAngle = math.degreeToRadian(startAngle); |
| endAngle = math.degreeToRadian(endAngle); |
| if (!clockWise) { |
| startAngle = -startAngle; |
| endAngle = -endAngle; |
| } |
| var unitX = math.cos(startAngle); |
| var unitY = math.sin(startAngle); |
| ctx.moveTo(unitX * r0 + x, unitY * r0 + y); |
| ctx.lineTo(unitX * r + x, unitY * r + y); |
| ctx.arc(x, y, r, startAngle, endAngle, !clockWise); |
| ctx.lineTo(math.cos(endAngle) * r0 + x, math.sin(endAngle) * r0 + y); |
| if (r0 !== 0) { |
| ctx.arc(x, y, r0, endAngle, startAngle, clockWise); |
| } |
| ctx.closePath(); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var x = style.x; |
| var y = style.y; |
| var r0 = style.r0 || 0; |
| var r = style.r; |
| var startAngle = math.degreeToRadian(style.startAngle); |
| var endAngle = math.degreeToRadian(style.endAngle); |
| var clockWise = style.clockWise; |
| if (!clockWise) { |
| startAngle = -startAngle; |
| endAngle = -endAngle; |
| } |
| if (r0 > 1) { |
| computeBoundingBox.arc(x, y, r0, startAngle, endAngle, !clockWise, min0, max0); |
| } else { |
| min0[0] = max0[0] = x; |
| min0[1] = max0[1] = y; |
| } |
| computeBoundingBox.arc(x, y, r, startAngle, endAngle, !clockWise, min1, max1); |
| vec2.min(min0, min0, min1); |
| vec2.max(max0, max0, max1); |
| style.__rect = { |
| x: min0[0], |
| y: min0[1], |
| width: max0[0] - min0[0], |
| height: max0[1] - min0[1] |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Sector, Base); |
| return Sector; |
| });define('echarts/util/shape/Candle', [ |
| 'require', |
| 'zrender/shape/Base', |
| 'zrender/tool/util', |
| './normalIsCover' |
| ], function (require) { |
| var Base = require('zrender/shape/Base'); |
| var zrUtil = require('zrender/tool/util'); |
| function Candle(options) { |
| Base.call(this, options); |
| } |
| Candle.prototype = { |
| type: 'candle', |
| _numberOrder: function (a, b) { |
| return b - a; |
| }, |
| buildPath: function (ctx, style) { |
| var yList = zrUtil.clone(style.y).sort(this._numberOrder); |
| ctx.moveTo(style.x, yList[3]); |
| ctx.lineTo(style.x, yList[2]); |
| ctx.moveTo(style.x - style.width / 2, yList[2]); |
| ctx.rect(style.x - style.width / 2, yList[2], style.width, yList[1] - yList[2]); |
| ctx.moveTo(style.x, yList[1]); |
| ctx.lineTo(style.x, yList[0]); |
| }, |
| getRect: function (style) { |
| if (!style.__rect) { |
| var lineWidth = 0; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } |
| var yList = zrUtil.clone(style.y).sort(this._numberOrder); |
| style.__rect = { |
| x: Math.round(style.x - style.width / 2 - lineWidth / 2), |
| y: Math.round(yList[3] - lineWidth / 2), |
| width: style.width + lineWidth, |
| height: yList[0] - yList[3] + lineWidth |
| }; |
| } |
| return style.__rect; |
| }, |
| isCover: require('./normalIsCover') |
| }; |
| zrUtil.inherits(Candle, Base); |
| return Candle; |
| });define('zrender/tool/computeBoundingBox', [ |
| 'require', |
| './vector', |
| './curve' |
| ], function (require) { |
| var vec2 = require('./vector'); |
| var curve = require('./curve'); |
| function computeBoundingBox(points, min, max) { |
| if (points.length === 0) { |
| return; |
| } |
| var left = points[0][0]; |
| var right = points[0][0]; |
| var top = points[0][1]; |
| var bottom = points[0][1]; |
| for (var i = 1; i < points.length; i++) { |
| var p = points[i]; |
| if (p[0] < left) { |
| left = p[0]; |
| } |
| if (p[0] > right) { |
| right = p[0]; |
| } |
| if (p[1] < top) { |
| top = p[1]; |
| } |
| if (p[1] > bottom) { |
| bottom = p[1]; |
| } |
| } |
| min[0] = left; |
| min[1] = top; |
| max[0] = right; |
| max[1] = bottom; |
| } |
| function computeCubeBezierBoundingBox(p0, p1, p2, p3, min, max) { |
| var xDim = []; |
| curve.cubicExtrema(p0[0], p1[0], p2[0], p3[0], xDim); |
| for (var i = 0; i < xDim.length; i++) { |
| xDim[i] = curve.cubicAt(p0[0], p1[0], p2[0], p3[0], xDim[i]); |
| } |
| var yDim = []; |
| curve.cubicExtrema(p0[1], p1[1], p2[1], p3[1], yDim); |
| for (var i = 0; i < yDim.length; i++) { |
| yDim[i] = curve.cubicAt(p0[1], p1[1], p2[1], p3[1], yDim[i]); |
| } |
| xDim.push(p0[0], p3[0]); |
| yDim.push(p0[1], p3[1]); |
| var left = Math.min.apply(null, xDim); |
| var right = Math.max.apply(null, xDim); |
| var top = Math.min.apply(null, yDim); |
| var bottom = Math.max.apply(null, yDim); |
| min[0] = left; |
| min[1] = top; |
| max[0] = right; |
| max[1] = bottom; |
| } |
| function computeQuadraticBezierBoundingBox(p0, p1, p2, min, max) { |
| var t1 = curve.quadraticExtremum(p0[0], p1[0], p2[0]); |
| var t2 = curve.quadraticExtremum(p0[1], p1[1], p2[1]); |
| t1 = Math.max(Math.min(t1, 1), 0); |
| t2 = Math.max(Math.min(t2, 1), 0); |
| var ct1 = 1 - t1; |
| var ct2 = 1 - t2; |
| var x1 = ct1 * ct1 * p0[0] + 2 * ct1 * t1 * p1[0] + t1 * t1 * p2[0]; |
| var y1 = ct1 * ct1 * p0[1] + 2 * ct1 * t1 * p1[1] + t1 * t1 * p2[1]; |
| var x2 = ct2 * ct2 * p0[0] + 2 * ct2 * t2 * p1[0] + t2 * t2 * p2[0]; |
| var y2 = ct2 * ct2 * p0[1] + 2 * ct2 * t2 * p1[1] + t2 * t2 * p2[1]; |
| min[0] = Math.min(p0[0], p2[0], x1, x2); |
| min[1] = Math.min(p0[1], p2[1], y1, y2); |
| max[0] = Math.max(p0[0], p2[0], x1, x2); |
| max[1] = Math.max(p0[1], p2[1], y1, y2); |
| } |
| var start = vec2.create(); |
| var end = vec2.create(); |
| var extremity = vec2.create(); |
| var computeArcBoundingBox = function (x, y, r, startAngle, endAngle, anticlockwise, min, max) { |
| if (Math.abs(startAngle - endAngle) >= Math.PI * 2) { |
| min[0] = x - r; |
| min[1] = y - r; |
| max[0] = x + r; |
| max[1] = y + r; |
| return; |
| } |
| start[0] = Math.cos(startAngle) * r + x; |
| start[1] = Math.sin(startAngle) * r + y; |
| end[0] = Math.cos(endAngle) * r + x; |
| end[1] = Math.sin(endAngle) * r + y; |
| vec2.min(min, start, end); |
| vec2.max(max, start, end); |
| startAngle = startAngle % (Math.PI * 2); |
| if (startAngle < 0) { |
| startAngle = startAngle + Math.PI * 2; |
| } |
| endAngle = endAngle % (Math.PI * 2); |
| if (endAngle < 0) { |
| endAngle = endAngle + Math.PI * 2; |
| } |
| if (startAngle > endAngle && !anticlockwise) { |
| endAngle += Math.PI * 2; |
| } else if (startAngle < endAngle && anticlockwise) { |
| startAngle += Math.PI * 2; |
| } |
| if (anticlockwise) { |
| var tmp = endAngle; |
| endAngle = startAngle; |
| startAngle = tmp; |
| } |
| for (var angle = 0; angle < endAngle; angle += Math.PI / 2) { |
| if (angle > startAngle) { |
| extremity[0] = Math.cos(angle) * r + x; |
| extremity[1] = Math.sin(angle) * r + y; |
| vec2.min(min, extremity, min); |
| vec2.max(max, extremity, max); |
| } |
| } |
| }; |
| computeBoundingBox.cubeBezier = computeCubeBezierBoundingBox; |
| computeBoundingBox.quadraticBezier = computeQuadraticBezierBoundingBox; |
| computeBoundingBox.arc = computeArcBoundingBox; |
| return computeBoundingBox; |
| });define('echarts/util/shape/Chain', [ |
| 'require', |
| 'zrender/shape/Base', |
| './Icon', |
| 'zrender/shape/util/dashedLineTo', |
| 'zrender/tool/util', |
| 'zrender/tool/matrix' |
| ], function (require) { |
| var Base = require('zrender/shape/Base'); |
| var IconShape = require('./Icon'); |
| var dashedLineTo = require('zrender/shape/util/dashedLineTo'); |
| var zrUtil = require('zrender/tool/util'); |
| var matrix = require('zrender/tool/matrix'); |
| function Chain(options) { |
| Base.call(this, options); |
| } |
| Chain.prototype = { |
| type: 'chain', |
| brush: function (ctx, isHighlight) { |
| var style = this.style; |
| if (isHighlight) { |
| style = this.getHighlightStyle(style, this.highlightStyle || {}); |
| } |
| ctx.save(); |
| this.setContext(ctx, style); |
| this.setTransform(ctx); |
| ctx.save(); |
| ctx.beginPath(); |
| this.buildLinePath(ctx, style); |
| ctx.stroke(); |
| ctx.restore(); |
| this.brushSymbol(ctx, style); |
| ctx.restore(); |
| return; |
| }, |
| buildLinePath: function (ctx, style) { |
| var x = style.x; |
| var y = style.y + 5; |
| var width = style.width; |
| var height = style.height / 2 - 10; |
| ctx.moveTo(x, y); |
| ctx.lineTo(x, y + height); |
| ctx.moveTo(x + width, y); |
| ctx.lineTo(x + width, y + height); |
| ctx.moveTo(x, y + height / 2); |
| if (!style.lineType || style.lineType == 'solid') { |
| ctx.lineTo(x + width, y + height / 2); |
| } else if (style.lineType == 'dashed' || style.lineType == 'dotted') { |
| var dashLength = (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1); |
| dashedLineTo(ctx, x, y + height / 2, x + width, y + height / 2, dashLength); |
| } |
| }, |
| brushSymbol: function (ctx, style) { |
| var y = style.y + style.height / 4; |
| ctx.save(); |
| var chainPoint = style.chainPoint; |
| var curPoint; |
| for (var idx = 0, l = chainPoint.length; idx < l; idx++) { |
| curPoint = chainPoint[idx]; |
| if (curPoint.symbol != 'none') { |
| ctx.beginPath(); |
| var symbolSize = curPoint.symbolSize; |
| IconShape.prototype.buildPath(ctx, { |
| iconType: curPoint.symbol, |
| x: curPoint.x - symbolSize, |
| y: y - symbolSize, |
| width: symbolSize * 2, |
| height: symbolSize * 2, |
| n: curPoint.n |
| }); |
| ctx.fillStyle = curPoint.isEmpty ? '#fff' : style.strokeColor; |
| ctx.closePath(); |
| ctx.fill(); |
| ctx.stroke(); |
| } |
| if (curPoint.showLabel) { |
| ctx.font = curPoint.textFont; |
| ctx.fillStyle = curPoint.textColor; |
| ctx.textAlign = curPoint.textAlign; |
| ctx.textBaseline = curPoint.textBaseline; |
| if (curPoint.rotation) { |
| ctx.save(); |
| this._updateTextTransform(ctx, curPoint.rotation); |
| ctx.fillText(curPoint.name, curPoint.textX, curPoint.textY); |
| ctx.restore(); |
| } else { |
| ctx.fillText(curPoint.name, curPoint.textX, curPoint.textY); |
| } |
| } |
| } |
| ctx.restore(); |
| }, |
| _updateTextTransform: function (ctx, rotation) { |
| var _transform = matrix.create(); |
| matrix.identity(_transform); |
| if (rotation[0] !== 0) { |
| var originX = rotation[1] || 0; |
| var originY = rotation[2] || 0; |
| if (originX || originY) { |
| matrix.translate(_transform, _transform, [ |
| -originX, |
| -originY |
| ]); |
| } |
| matrix.rotate(_transform, _transform, rotation[0]); |
| if (originX || originY) { |
| matrix.translate(_transform, _transform, [ |
| originX, |
| originY |
| ]); |
| } |
| } |
| ctx.transform.apply(ctx, _transform); |
| }, |
| isCover: function (x, y) { |
| var rect = this.style; |
| if (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height) { |
| return true; |
| } else { |
| return false; |
| } |
| } |
| }; |
| zrUtil.inherits(Chain, Base); |
| return Chain; |
| });define('zrender/shape/Ring', [ |
| 'require', |
| './Base', |
| '../tool/util' |
| ], function (require) { |
| var Base = require('./Base'); |
| var Ring = function (options) { |
| Base.call(this, options); |
| }; |
| Ring.prototype = { |
| type: 'ring', |
| buildPath: function (ctx, style) { |
| ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, false); |
| ctx.moveTo(style.x + style.r0, style.y); |
| ctx.arc(style.x, style.y, style.r0, 0, Math.PI * 2, true); |
| return; |
| }, |
| getRect: function (style) { |
| if (style.__rect) { |
| return style.__rect; |
| } |
| var lineWidth; |
| if (style.brushType == 'stroke' || style.brushType == 'fill') { |
| lineWidth = style.lineWidth || 1; |
| } else { |
| lineWidth = 0; |
| } |
| style.__rect = { |
| x: Math.round(style.x - style.r - lineWidth / 2), |
| y: Math.round(style.y - style.r - lineWidth / 2), |
| width: style.r * 2 + lineWidth, |
| height: style.r * 2 + lineWidth |
| }; |
| return style.__rect; |
| } |
| }; |
| require('../tool/util').inherits(Ring, Base); |
| return Ring; |
| });define('echarts/component/axis', [ |
| 'require', |
| './base', |
| 'zrender/shape/Line', |
| '../config', |
| '../util/ecData', |
| 'zrender/tool/util', |
| 'zrender/tool/color', |
| './categoryAxis', |
| './valueAxis', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var LineShape = require('zrender/shape/Line'); |
| var ecConfig = require('../config'); |
| var ecData = require('../util/ecData'); |
| var zrUtil = require('zrender/tool/util'); |
| var zrColor = require('zrender/tool/color'); |
| function Axis(ecTheme, messageCenter, zr, option, myChart, axisType) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.axisType = axisType; |
| this._axisList = []; |
| this.refresh(option); |
| } |
| Axis.prototype = { |
| type: ecConfig.COMPONENT_TYPE_AXIS, |
| axisBase: { |
| _buildAxisLine: function () { |
| var lineWidth = this.option.axisLine.lineStyle.width; |
| var halfLineWidth = lineWidth / 2; |
| var axShape = { |
| _axisShape: 'axisLine', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 3, |
| hoverable: false |
| }; |
| var grid = this.grid; |
| switch (this.option.position) { |
| case 'left': |
| axShape.style = { |
| xStart: grid.getX() - halfLineWidth, |
| yStart: grid.getYend(), |
| xEnd: grid.getX() - halfLineWidth, |
| yEnd: grid.getY(), |
| lineCap: 'round' |
| }; |
| break; |
| case 'right': |
| axShape.style = { |
| xStart: grid.getXend() + halfLineWidth, |
| yStart: grid.getYend(), |
| xEnd: grid.getXend() + halfLineWidth, |
| yEnd: grid.getY(), |
| lineCap: 'round' |
| }; |
| break; |
| case 'bottom': |
| axShape.style = { |
| xStart: grid.getX(), |
| yStart: grid.getYend() + halfLineWidth, |
| xEnd: grid.getXend(), |
| yEnd: grid.getYend() + halfLineWidth, |
| lineCap: 'round' |
| }; |
| break; |
| case 'top': |
| axShape.style = { |
| xStart: grid.getX(), |
| yStart: grid.getY() - halfLineWidth, |
| xEnd: grid.getXend(), |
| yEnd: grid.getY() - halfLineWidth, |
| lineCap: 'round' |
| }; |
| break; |
| } |
| var style = axShape.style; |
| if (this.option.name !== '') { |
| style.text = this.option.name; |
| style.textPosition = this.option.nameLocation; |
| style.textFont = this.getFont(this.option.nameTextStyle); |
| if (this.option.nameTextStyle.align) { |
| style.textAlign = this.option.nameTextStyle.align; |
| } |
| if (this.option.nameTextStyle.baseline) { |
| style.textBaseline = this.option.nameTextStyle.baseline; |
| } |
| if (this.option.nameTextStyle.color) { |
| style.textColor = this.option.nameTextStyle.color; |
| } |
| } |
| style.strokeColor = this.option.axisLine.lineStyle.color; |
| style.lineWidth = lineWidth; |
| if (this.isHorizontal()) { |
| style.yStart = style.yEnd = this.subPixelOptimize(style.yEnd, lineWidth); |
| } else { |
| style.xStart = style.xEnd = this.subPixelOptimize(style.xEnd, lineWidth); |
| } |
| style.lineType = this.option.axisLine.lineStyle.type; |
| axShape = new LineShape(axShape); |
| this.shapeList.push(axShape); |
| }, |
| _axisLabelClickable: function (clickable, axShape) { |
| if (clickable) { |
| ecData.pack(axShape, undefined, -1, undefined, -1, axShape.style.text); |
| axShape.hoverable = true; |
| axShape.clickable = true; |
| axShape.highlightStyle = { |
| color: zrColor.lift(axShape.style.color, 1), |
| brushType: 'fill' |
| }; |
| return axShape; |
| } else { |
| return axShape; |
| } |
| }, |
| refixAxisShape: function (zeroX, zeroY) { |
| if (!this.option.axisLine.onZero) { |
| return; |
| } |
| var tickLength; |
| if (this.isHorizontal() && zeroY != null) { |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i]._axisShape === 'axisLine') { |
| this.shapeList[i].style.yStart = this.shapeList[i].style.yEnd = this.subPixelOptimize(zeroY, this.shapeList[i].stylelineWidth); |
| this.zr.modShape(this.shapeList[i].id); |
| } else if (this.shapeList[i]._axisShape === 'axisTick') { |
| tickLength = this.shapeList[i].style.yEnd - this.shapeList[i].style.yStart; |
| this.shapeList[i].style.yStart = zeroY - tickLength; |
| this.shapeList[i].style.yEnd = zeroY; |
| this.zr.modShape(this.shapeList[i].id); |
| } |
| } |
| } |
| if (!this.isHorizontal() && zeroX != null) { |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| if (this.shapeList[i]._axisShape === 'axisLine') { |
| this.shapeList[i].style.xStart = this.shapeList[i].style.xEnd = this.subPixelOptimize(zeroX, this.shapeList[i].stylelineWidth); |
| this.zr.modShape(this.shapeList[i].id); |
| } else if (this.shapeList[i]._axisShape === 'axisTick') { |
| tickLength = this.shapeList[i].style.xEnd - this.shapeList[i].style.xStart; |
| this.shapeList[i].style.xStart = zeroX; |
| this.shapeList[i].style.xEnd = zeroX + tickLength; |
| this.zr.modShape(this.shapeList[i].id); |
| } |
| } |
| } |
| }, |
| getPosition: function () { |
| return this.option.position; |
| }, |
| isHorizontal: function () { |
| return this.option.position === 'bottom' || this.option.position === 'top'; |
| } |
| }, |
| reformOption: function (opt) { |
| if (!opt || opt instanceof Array && opt.length === 0) { |
| opt = [{ type: ecConfig.COMPONENT_TYPE_AXIS_VALUE }]; |
| } else if (!(opt instanceof Array)) { |
| opt = [opt]; |
| } |
| if (opt.length > 2) { |
| opt = [ |
| opt[0], |
| opt[1] |
| ]; |
| } |
| if (this.axisType === 'xAxis') { |
| if (!opt[0].position || opt[0].position != 'bottom' && opt[0].position != 'top') { |
| opt[0].position = 'bottom'; |
| } |
| if (opt.length > 1) { |
| opt[1].position = opt[0].position === 'bottom' ? 'top' : 'bottom'; |
| } |
| for (var i = 0, l = opt.length; i < l; i++) { |
| opt[i].type = opt[i].type || 'category'; |
| opt[i].xAxisIndex = i; |
| opt[i].yAxisIndex = -1; |
| } |
| } else { |
| if (!opt[0].position || opt[0].position != 'left' && opt[0].position != 'right') { |
| opt[0].position = 'left'; |
| } |
| if (opt.length > 1) { |
| opt[1].position = opt[0].position === 'left' ? 'right' : 'left'; |
| } |
| for (var i = 0, l = opt.length; i < l; i++) { |
| opt[i].type = opt[i].type || 'value'; |
| opt[i].xAxisIndex = -1; |
| opt[i].yAxisIndex = i; |
| } |
| } |
| return opt; |
| }, |
| refresh: function (newOption) { |
| var axisOption; |
| if (newOption) { |
| this.option = newOption; |
| if (this.axisType === 'xAxis') { |
| this.option.xAxis = this.reformOption(newOption.xAxis); |
| axisOption = this.option.xAxis; |
| } else { |
| this.option.yAxis = this.reformOption(newOption.yAxis); |
| axisOption = this.option.yAxis; |
| } |
| this.series = newOption.series; |
| } |
| var CategoryAxis = require('./categoryAxis'); |
| var ValueAxis = require('./valueAxis'); |
| var len = Math.max(axisOption && axisOption.length || 0, this._axisList.length); |
| for (var i = 0; i < len; i++) { |
| if (this._axisList[i] && newOption && (!axisOption[i] || this._axisList[i].type != axisOption[i].type)) { |
| this._axisList[i].dispose && this._axisList[i].dispose(); |
| this._axisList[i] = false; |
| } |
| if (this._axisList[i]) { |
| this._axisList[i].refresh && this._axisList[i].refresh(axisOption ? axisOption[i] : false, this.series); |
| } else if (axisOption && axisOption[i]) { |
| this._axisList[i] = axisOption[i].type === 'category' ? new CategoryAxis(this.ecTheme, this.messageCenter, this.zr, axisOption[i], this.myChart, this.axisBase) : new ValueAxis(this.ecTheme, this.messageCenter, this.zr, axisOption[i], this.myChart, this.axisBase, this.series); |
| } |
| } |
| }, |
| getAxis: function (idx) { |
| return this._axisList[idx]; |
| }, |
| getAxisCount: function () { |
| return this._axisList.length; |
| }, |
| clear: function () { |
| for (var i = 0, l = this._axisList.length; i < l; i++) { |
| this._axisList[i].dispose && this._axisList[i].dispose(); |
| } |
| this._axisList = []; |
| } |
| }; |
| zrUtil.inherits(Axis, Base); |
| require('../component').define('axis', Axis); |
| return Axis; |
| });define('echarts/component/grid', [ |
| 'require', |
| './base', |
| 'zrender/shape/Rectangle', |
| '../config', |
| 'zrender/tool/util', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var ecConfig = require('../config'); |
| ecConfig.grid = { |
| zlevel: 0, |
| z: 0, |
| x: 80, |
| y: 60, |
| x2: 80, |
| y2: 60, |
| backgroundColor: 'rgba(0,0,0,0)', |
| borderWidth: 1, |
| borderColor: '#ccc' |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| function Grid(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.refresh(option); |
| } |
| Grid.prototype = { |
| type: ecConfig.COMPONENT_TYPE_GRID, |
| getX: function () { |
| return this._x; |
| }, |
| getY: function () { |
| return this._y; |
| }, |
| getWidth: function () { |
| return this._width; |
| }, |
| getHeight: function () { |
| return this._height; |
| }, |
| getXend: function () { |
| return this._x + this._width; |
| }, |
| getYend: function () { |
| return this._y + this._height; |
| }, |
| getArea: function () { |
| return { |
| x: this._x, |
| y: this._y, |
| width: this._width, |
| height: this._height |
| }; |
| }, |
| getBbox: function () { |
| return [ |
| [ |
| this._x, |
| this._y |
| ], |
| [ |
| this.getXend(), |
| this.getYend() |
| ] |
| ]; |
| }, |
| refixAxisShape: function (component) { |
| var zeroX; |
| var zeroY; |
| var axisList = component.xAxis._axisList.concat(component.yAxis ? component.yAxis._axisList : []); |
| var len = axisList.length; |
| var axis; |
| while (len--) { |
| axis = axisList[len]; |
| if (axis.type == ecConfig.COMPONENT_TYPE_AXIS_VALUE && axis._min < 0 && axis._max >= 0) { |
| axis.isHorizontal() ? zeroX = axis.getCoord(0) : zeroY = axis.getCoord(0); |
| } |
| } |
| if (typeof zeroX != 'undefined' || typeof zeroY != 'undefined') { |
| len = axisList.length; |
| while (len--) { |
| axisList[len].refixAxisShape(zeroX, zeroY); |
| } |
| } |
| }, |
| refresh: function (newOption) { |
| if (newOption || this._zrWidth != this.zr.getWidth() || this._zrHeight != this.zr.getHeight()) { |
| this.clear(); |
| this.option = newOption || this.option; |
| this.option.grid = this.reformOption(this.option.grid); |
| var gridOption = this.option.grid; |
| this._zrWidth = this.zr.getWidth(); |
| this._zrHeight = this.zr.getHeight(); |
| this._x = this.parsePercent(gridOption.x, this._zrWidth); |
| this._y = this.parsePercent(gridOption.y, this._zrHeight); |
| var x2 = this.parsePercent(gridOption.x2, this._zrWidth); |
| var y2 = this.parsePercent(gridOption.y2, this._zrHeight); |
| if (typeof gridOption.width == 'undefined') { |
| this._width = this._zrWidth - this._x - x2; |
| } else { |
| this._width = this.parsePercent(gridOption.width, this._zrWidth); |
| } |
| this._width = this._width <= 0 ? 10 : this._width; |
| if (typeof gridOption.height == 'undefined') { |
| this._height = this._zrHeight - this._y - y2; |
| } else { |
| this._height = this.parsePercent(gridOption.height, this._zrHeight); |
| } |
| this._height = this._height <= 0 ? 10 : this._height; |
| this._x = this.subPixelOptimize(this._x, gridOption.borderWidth); |
| this._y = this.subPixelOptimize(this._y, gridOption.borderWidth); |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._x, |
| y: this._y, |
| width: this._width, |
| height: this._height, |
| brushType: gridOption.borderWidth > 0 ? 'both' : 'fill', |
| color: gridOption.backgroundColor, |
| strokeColor: gridOption.borderColor, |
| lineWidth: gridOption.borderWidth |
| } |
| })); |
| this.zr.addShape(this.shapeList[0]); |
| } |
| } |
| }; |
| zrUtil.inherits(Grid, Base); |
| require('../component').define('grid', Grid); |
| return Grid; |
| });define('echarts/component/dataZoom', [ |
| 'require', |
| './base', |
| 'zrender/shape/Rectangle', |
| 'zrender/shape/Polygon', |
| '../util/shape/Icon', |
| '../config', |
| '../util/date', |
| 'zrender/tool/util', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var PolygonShape = require('zrender/shape/Polygon'); |
| var IconShape = require('../util/shape/Icon'); |
| var ecConfig = require('../config'); |
| ecConfig.dataZoom = { |
| zlevel: 0, |
| z: 4, |
| show: false, |
| orient: 'horizontal', |
| backgroundColor: 'rgba(0,0,0,0)', |
| dataBackgroundColor: '#eee', |
| fillerColor: 'rgba(144,197,237,0.2)', |
| handleColor: 'rgba(70,130,180,0.8)', |
| handleSize: 8, |
| showDetail: true, |
| realtime: true |
| }; |
| var ecDate = require('../util/date'); |
| var zrUtil = require('zrender/tool/util'); |
| function DataZoom(ecTheme, messageCenter, zr, option, myChart) { |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| var self = this; |
| self._ondrift = function (dx, dy) { |
| return self.__ondrift(this, dx, dy); |
| }; |
| self._ondragend = function () { |
| return self.__ondragend(); |
| }; |
| this._fillerSize = 30; |
| this._isSilence = false; |
| this._zoom = {}; |
| this.option.dataZoom = this.reformOption(this.option.dataZoom); |
| this.zoomOption = this.option.dataZoom; |
| this._handleSize = this.zoomOption.handleSize; |
| if (!this.myChart.canvasSupported) { |
| this.zoomOption.realtime = false; |
| } |
| this._location = this._getLocation(); |
| this._zoom = this._getZoom(); |
| this._backupData(); |
| if (this.option.dataZoom.show) { |
| this._buildShape(); |
| } |
| this._syncData(); |
| } |
| DataZoom.prototype = { |
| type: ecConfig.COMPONENT_TYPE_DATAZOOM, |
| _buildShape: function () { |
| this._buildBackground(); |
| this._buildFiller(); |
| this._buildHandle(); |
| this._buildFrame(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| this._syncFrameShape(); |
| }, |
| _getLocation: function () { |
| var x; |
| var y; |
| var width; |
| var height; |
| var grid = this.component.grid; |
| if (this.zoomOption.orient == 'horizontal') { |
| width = this.zoomOption.width || grid.getWidth(); |
| height = this.zoomOption.height || this._fillerSize; |
| x = this.zoomOption.x != null ? this.zoomOption.x : grid.getX(); |
| y = this.zoomOption.y != null ? this.zoomOption.y : this.zr.getHeight() - height - 2; |
| } else { |
| width = this.zoomOption.width || this._fillerSize; |
| height = this.zoomOption.height || grid.getHeight(); |
| x = this.zoomOption.x != null ? this.zoomOption.x : 2; |
| y = this.zoomOption.y != null ? this.zoomOption.y : grid.getY(); |
| } |
| return { |
| x: x, |
| y: y, |
| width: width, |
| height: height |
| }; |
| }, |
| _getZoom: function () { |
| var series = this.option.series; |
| var xAxis = this.option.xAxis; |
| if (xAxis && !(xAxis instanceof Array)) { |
| xAxis = [xAxis]; |
| this.option.xAxis = xAxis; |
| } |
| var yAxis = this.option.yAxis; |
| if (yAxis && !(yAxis instanceof Array)) { |
| yAxis = [yAxis]; |
| this.option.yAxis = yAxis; |
| } |
| var zoomSeriesIndex = []; |
| var xAxisIndex; |
| var yAxisIndex; |
| var zOptIdx = this.zoomOption.xAxisIndex; |
| if (xAxis && zOptIdx == null) { |
| xAxisIndex = []; |
| for (var i = 0, l = xAxis.length; i < l; i++) { |
| if (xAxis[i].type == 'category' || xAxis[i].type == null) { |
| xAxisIndex.push(i); |
| } |
| } |
| } else { |
| if (zOptIdx instanceof Array) { |
| xAxisIndex = zOptIdx; |
| } else if (zOptIdx != null) { |
| xAxisIndex = [zOptIdx]; |
| } else { |
| xAxisIndex = []; |
| } |
| } |
| zOptIdx = this.zoomOption.yAxisIndex; |
| if (yAxis && zOptIdx == null) { |
| yAxisIndex = []; |
| for (var i = 0, l = yAxis.length; i < l; i++) { |
| if (yAxis[i].type == 'category') { |
| yAxisIndex.push(i); |
| } |
| } |
| } else { |
| if (zOptIdx instanceof Array) { |
| yAxisIndex = zOptIdx; |
| } else if (zOptIdx != null) { |
| yAxisIndex = [zOptIdx]; |
| } else { |
| yAxisIndex = []; |
| } |
| } |
| var serie; |
| for (var i = 0, l = series.length; i < l; i++) { |
| serie = series[i]; |
| if (serie.type != ecConfig.CHART_TYPE_LINE && serie.type != ecConfig.CHART_TYPE_BAR && serie.type != ecConfig.CHART_TYPE_SCATTER && serie.type != ecConfig.CHART_TYPE_K) { |
| continue; |
| } |
| for (var j = 0, k = xAxisIndex.length; j < k; j++) { |
| if (xAxisIndex[j] == (serie.xAxisIndex || 0)) { |
| zoomSeriesIndex.push(i); |
| break; |
| } |
| } |
| for (var j = 0, k = yAxisIndex.length; j < k; j++) { |
| if (yAxisIndex[j] == (serie.yAxisIndex || 0)) { |
| zoomSeriesIndex.push(i); |
| break; |
| } |
| } |
| if (this.zoomOption.xAxisIndex == null && this.zoomOption.yAxisIndex == null && serie.data && this.getDataFromOption(serie.data[0]) instanceof Array && (serie.type == ecConfig.CHART_TYPE_SCATTER || serie.type == ecConfig.CHART_TYPE_LINE || serie.type == ecConfig.CHART_TYPE_BAR)) { |
| zoomSeriesIndex.push(i); |
| } |
| } |
| var start = this._zoom.start != null ? this._zoom.start : this.zoomOption.start != null ? this.zoomOption.start : 0; |
| var end = this._zoom.end != null ? this._zoom.end : this.zoomOption.end != null ? this.zoomOption.end : 100; |
| if (start > end) { |
| start = start + end; |
| end = start - end; |
| start = start - end; |
| } |
| var size = Math.round((end - start) / 100 * (this.zoomOption.orient == 'horizontal' ? this._location.width : this._location.height)); |
| return { |
| start: start, |
| end: end, |
| start2: 0, |
| end2: 100, |
| size: size, |
| xAxisIndex: xAxisIndex, |
| yAxisIndex: yAxisIndex, |
| seriesIndex: zoomSeriesIndex, |
| scatterMap: this._zoom.scatterMap || {} |
| }; |
| }, |
| _backupData: function () { |
| this._originalData = { |
| xAxis: {}, |
| yAxis: {}, |
| series: {} |
| }; |
| var xAxis = this.option.xAxis; |
| var xAxisIndex = this._zoom.xAxisIndex; |
| for (var i = 0, l = xAxisIndex.length; i < l; i++) { |
| this._originalData.xAxis[xAxisIndex[i]] = xAxis[xAxisIndex[i]].data; |
| } |
| var yAxis = this.option.yAxis; |
| var yAxisIndex = this._zoom.yAxisIndex; |
| for (var i = 0, l = yAxisIndex.length; i < l; i++) { |
| this._originalData.yAxis[yAxisIndex[i]] = yAxis[yAxisIndex[i]].data; |
| } |
| var series = this.option.series; |
| var seriesIndex = this._zoom.seriesIndex; |
| var serie; |
| for (var i = 0, l = seriesIndex.length; i < l; i++) { |
| serie = series[seriesIndex[i]]; |
| this._originalData.series[seriesIndex[i]] = serie.data; |
| if (serie.data && this.getDataFromOption(serie.data[0]) instanceof Array && (serie.type == ecConfig.CHART_TYPE_SCATTER || serie.type == ecConfig.CHART_TYPE_LINE || serie.type == ecConfig.CHART_TYPE_BAR)) { |
| this._backupScale(); |
| this._calculScatterMap(seriesIndex[i]); |
| } |
| } |
| }, |
| _calculScatterMap: function (seriesIndex) { |
| this._zoom.scatterMap = this._zoom.scatterMap || {}; |
| this._zoom.scatterMap[seriesIndex] = this._zoom.scatterMap[seriesIndex] || {}; |
| var componentLibrary = require('../component'); |
| var Axis = componentLibrary.get('axis'); |
| var axisOption = zrUtil.clone(this.option.xAxis); |
| if (axisOption[0].type == 'category') { |
| axisOption[0].type = 'value'; |
| } |
| if (axisOption[1] && axisOption[1].type == 'category') { |
| axisOption[1].type = 'value'; |
| } |
| var vAxis = new Axis(this.ecTheme, null, false, { |
| xAxis: axisOption, |
| series: this.option.series |
| }, this, 'xAxis'); |
| var axisIndex = this.option.series[seriesIndex].xAxisIndex || 0; |
| this._zoom.scatterMap[seriesIndex].x = vAxis.getAxis(axisIndex).getExtremum(); |
| vAxis.dispose(); |
| axisOption = zrUtil.clone(this.option.yAxis); |
| if (axisOption[0].type == 'category') { |
| axisOption[0].type = 'value'; |
| } |
| if (axisOption[1] && axisOption[1].type == 'category') { |
| axisOption[1].type = 'value'; |
| } |
| vAxis = new Axis(this.ecTheme, null, false, { |
| yAxis: axisOption, |
| series: this.option.series |
| }, this, 'yAxis'); |
| axisIndex = this.option.series[seriesIndex].yAxisIndex || 0; |
| this._zoom.scatterMap[seriesIndex].y = vAxis.getAxis(axisIndex).getExtremum(); |
| vAxis.dispose(); |
| }, |
| _buildBackground: function () { |
| var width = this._location.width; |
| var height = this._location.height; |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this._location.x, |
| y: this._location.y, |
| width: width, |
| height: height, |
| color: this.zoomOption.backgroundColor |
| } |
| })); |
| var maxLength = 0; |
| var xAxis = this._originalData.xAxis; |
| var xAxisIndex = this._zoom.xAxisIndex; |
| for (var i = 0, l = xAxisIndex.length; i < l; i++) { |
| maxLength = Math.max(maxLength, xAxis[xAxisIndex[i]].length); |
| } |
| var yAxis = this._originalData.yAxis; |
| var yAxisIndex = this._zoom.yAxisIndex; |
| for (var i = 0, l = yAxisIndex.length; i < l; i++) { |
| maxLength = Math.max(maxLength, yAxis[yAxisIndex[i]].length); |
| } |
| var seriesIndex = this._zoom.seriesIndex[0]; |
| var data = this._originalData.series[seriesIndex]; |
| var maxValue = Number.MIN_VALUE; |
| var minValue = Number.MAX_VALUE; |
| var value; |
| for (var i = 0, l = data.length; i < l; i++) { |
| value = this.getDataFromOption(data[i], 0); |
| if (this.option.series[seriesIndex].type == ecConfig.CHART_TYPE_K) { |
| value = value[1]; |
| } |
| if (isNaN(value)) { |
| value = 0; |
| } |
| maxValue = Math.max(maxValue, value); |
| minValue = Math.min(minValue, value); |
| } |
| var valueRange = maxValue - minValue; |
| var pointList = []; |
| var x = width / (maxLength - (maxLength > 1 ? 1 : 0)); |
| var y = height / (maxLength - (maxLength > 1 ? 1 : 0)); |
| var step = 1; |
| if (this.zoomOption.orient == 'horizontal' && x < 1) { |
| step = Math.floor(maxLength * 3 / width); |
| } else if (this.zoomOption.orient == 'vertical' && y < 1) { |
| step = Math.floor(maxLength * 3 / height); |
| } |
| for (var i = 0, l = maxLength; i < l; i += step) { |
| value = this.getDataFromOption(data[i], 0); |
| if (this.option.series[seriesIndex].type == ecConfig.CHART_TYPE_K) { |
| value = value[1]; |
| } |
| if (isNaN(value)) { |
| value = 0; |
| } |
| if (this.zoomOption.orient == 'horizontal') { |
| pointList.push([ |
| this._location.x + x * i, |
| this._location.y + height - 1 - Math.round((value - minValue) / valueRange * (height - 10)) |
| ]); |
| } else { |
| pointList.push([ |
| this._location.x + 1 + Math.round((value - minValue) / valueRange * (width - 10)), |
| this._location.y + y * (l - i - 1) |
| ]); |
| } |
| } |
| if (this.zoomOption.orient == 'horizontal') { |
| pointList.push([ |
| this._location.x + width, |
| this._location.y + height |
| ]); |
| pointList.push([ |
| this._location.x, |
| this._location.y + height |
| ]); |
| } else { |
| pointList.push([ |
| this._location.x, |
| this._location.y |
| ]); |
| pointList.push([ |
| this._location.x, |
| this._location.y + height |
| ]); |
| } |
| this.shapeList.push(new PolygonShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| pointList: pointList, |
| color: this.zoomOption.dataBackgroundColor |
| }, |
| hoverable: false |
| })); |
| }, |
| _buildFiller: function () { |
| this._fillerShae = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| draggable: true, |
| ondrift: this._ondrift, |
| ondragend: this._ondragend, |
| _type: 'filler' |
| }; |
| if (this.zoomOption.orient == 'horizontal') { |
| this._fillerShae.style = { |
| x: this._location.x + Math.round(this._zoom.start / 100 * this._location.width) + this._handleSize, |
| y: this._location.y, |
| width: this._zoom.size - this._handleSize * 2, |
| height: this._location.height, |
| color: this.zoomOption.fillerColor, |
| text: ':::', |
| textPosition: 'inside' |
| }; |
| } else { |
| this._fillerShae.style = { |
| x: this._location.x, |
| y: this._location.y + Math.round(this._zoom.start / 100 * this._location.height) + this._handleSize, |
| width: this._location.width, |
| height: this._zoom.size - this._handleSize * 2, |
| color: this.zoomOption.fillerColor, |
| text: '::', |
| textPosition: 'inside' |
| }; |
| } |
| this._fillerShae.highlightStyle = { |
| brushType: 'fill', |
| color: 'rgba(0,0,0,0)' |
| }; |
| this._fillerShae = new RectangleShape(this._fillerShae); |
| this.shapeList.push(this._fillerShae); |
| }, |
| _buildHandle: function () { |
| var detail = this.zoomOption.showDetail ? this._getDetail() : { |
| start: '', |
| end: '' |
| }; |
| this._startShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| draggable: true, |
| style: { |
| iconType: 'rectangle', |
| x: this._location.x, |
| y: this._location.y, |
| width: this._handleSize, |
| height: this._handleSize, |
| color: this.zoomOption.handleColor, |
| text: '=', |
| textPosition: 'inside' |
| }, |
| highlightStyle: { |
| text: detail.start, |
| brushType: 'fill', |
| textPosition: 'left' |
| }, |
| ondrift: this._ondrift, |
| ondragend: this._ondragend |
| }; |
| if (this.zoomOption.orient == 'horizontal') { |
| this._startShape.style.height = this._location.height; |
| this._endShape = zrUtil.clone(this._startShape); |
| this._startShape.style.x = this._fillerShae.style.x - this._handleSize, this._endShape.style.x = this._fillerShae.style.x + this._fillerShae.style.width; |
| this._endShape.highlightStyle.text = detail.end; |
| this._endShape.highlightStyle.textPosition = 'right'; |
| } else { |
| this._startShape.style.width = this._location.width; |
| this._endShape = zrUtil.clone(this._startShape); |
| this._startShape.style.y = this._fillerShae.style.y + this._fillerShae.style.height; |
| this._startShape.highlightStyle.textPosition = 'bottom'; |
| this._endShape.style.y = this._fillerShae.style.y - this._handleSize; |
| this._endShape.highlightStyle.text = detail.end; |
| this._endShape.highlightStyle.textPosition = 'top'; |
| } |
| this._startShape = new IconShape(this._startShape); |
| this._endShape = new IconShape(this._endShape); |
| this.shapeList.push(this._startShape); |
| this.shapeList.push(this._endShape); |
| }, |
| _buildFrame: function () { |
| var x = this.subPixelOptimize(this._location.x, 1); |
| var y = this.subPixelOptimize(this._location.y, 1); |
| this._startFrameShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: x, |
| y: y, |
| width: this._location.width - (x > this._location.x ? 1 : 0), |
| height: this._location.height - (y > this._location.y ? 1 : 0), |
| lineWidth: 1, |
| brushType: 'stroke', |
| strokeColor: this.zoomOption.handleColor |
| } |
| }; |
| this._endFrameShape = zrUtil.clone(this._startFrameShape); |
| this._startFrameShape = new RectangleShape(this._startFrameShape); |
| this._endFrameShape = new RectangleShape(this._endFrameShape); |
| this.shapeList.push(this._startFrameShape); |
| this.shapeList.push(this._endFrameShape); |
| return; |
| }, |
| _syncHandleShape: function () { |
| if (this.zoomOption.orient == 'horizontal') { |
| this._startShape.style.x = this._fillerShae.style.x - this._handleSize; |
| this._endShape.style.x = this._fillerShae.style.x + this._fillerShae.style.width; |
| this._zoom.start = (this._startShape.style.x - this._location.x) / this._location.width * 100; |
| this._zoom.end = (this._endShape.style.x + this._handleSize - this._location.x) / this._location.width * 100; |
| } else { |
| this._startShape.style.y = this._fillerShae.style.y + this._fillerShae.style.height; |
| this._endShape.style.y = this._fillerShae.style.y - this._handleSize; |
| this._zoom.start = (this._location.y + this._location.height - this._startShape.style.y) / this._location.height * 100; |
| this._zoom.end = (this._location.y + this._location.height - this._endShape.style.y - this._handleSize) / this._location.height * 100; |
| } |
| this.zr.modShape(this._startShape.id); |
| this.zr.modShape(this._endShape.id); |
| this._syncFrameShape(); |
| this.zr.refreshNextFrame(); |
| }, |
| _syncFillerShape: function () { |
| var a; |
| var b; |
| if (this.zoomOption.orient == 'horizontal') { |
| a = this._startShape.style.x; |
| b = this._endShape.style.x; |
| this._fillerShae.style.x = Math.min(a, b) + this._handleSize; |
| this._fillerShae.style.width = Math.abs(a - b) - this._handleSize; |
| this._zoom.start = (Math.min(a, b) - this._location.x) / this._location.width * 100; |
| this._zoom.end = (Math.max(a, b) + this._handleSize - this._location.x) / this._location.width * 100; |
| } else { |
| a = this._startShape.style.y; |
| b = this._endShape.style.y; |
| this._fillerShae.style.y = Math.min(a, b) + this._handleSize; |
| this._fillerShae.style.height = Math.abs(a - b) - this._handleSize; |
| this._zoom.start = (this._location.y + this._location.height - Math.max(a, b)) / this._location.height * 100; |
| this._zoom.end = (this._location.y + this._location.height - Math.min(a, b) - this._handleSize) / this._location.height * 100; |
| } |
| this.zr.modShape(this._fillerShae.id); |
| this._syncFrameShape(); |
| this.zr.refreshNextFrame(); |
| }, |
| _syncFrameShape: function () { |
| if (this.zoomOption.orient == 'horizontal') { |
| this._startFrameShape.style.width = this._fillerShae.style.x - this._location.x; |
| this._endFrameShape.style.x = this._fillerShae.style.x + this._fillerShae.style.width; |
| this._endFrameShape.style.width = this._location.x + this._location.width - this._endFrameShape.style.x; |
| } else { |
| this._startFrameShape.style.y = this._fillerShae.style.y + this._fillerShae.style.height; |
| this._startFrameShape.style.height = this._location.y + this._location.height - this._startFrameShape.style.y; |
| this._endFrameShape.style.height = this._fillerShae.style.y - this._location.y; |
| } |
| this.zr.modShape(this._startFrameShape.id); |
| this.zr.modShape(this._endFrameShape.id); |
| }, |
| _syncShape: function () { |
| if (!this.zoomOption.show) { |
| return; |
| } |
| if (this.zoomOption.orient == 'horizontal') { |
| this._startShape.style.x = this._location.x + this._zoom.start / 100 * this._location.width; |
| this._endShape.style.x = this._location.x + this._zoom.end / 100 * this._location.width - this._handleSize; |
| this._fillerShae.style.x = this._startShape.style.x + this._handleSize; |
| this._fillerShae.style.width = this._endShape.style.x - this._startShape.style.x - this._handleSize; |
| } else { |
| this._startShape.style.y = this._location.y + this._location.height - this._zoom.start / 100 * this._location.height; |
| this._endShape.style.y = this._location.y + this._location.height - this._zoom.end / 100 * this._location.height - this._handleSize; |
| this._fillerShae.style.y = this._endShape.style.y + this._handleSize; |
| this._fillerShae.style.height = this._startShape.style.y - this._endShape.style.y - this._handleSize; |
| } |
| this.zr.modShape(this._startShape.id); |
| this.zr.modShape(this._endShape.id); |
| this.zr.modShape(this._fillerShae.id); |
| this._syncFrameShape(); |
| this.zr.refresh(); |
| }, |
| _syncData: function (dispatchNow) { |
| var target; |
| var start; |
| var end; |
| var length; |
| var data; |
| for (var key in this._originalData) { |
| target = this._originalData[key]; |
| for (var idx in target) { |
| data = target[idx]; |
| if (data == null) { |
| continue; |
| } |
| length = data.length; |
| start = Math.floor(this._zoom.start / 100 * length); |
| end = Math.ceil(this._zoom.end / 100 * length); |
| if (!(this.getDataFromOption(data[0]) instanceof Array) || this.option[key][idx].type == ecConfig.CHART_TYPE_K) { |
| this.option[key][idx].data = data.slice(start, end); |
| } else { |
| this._setScale(); |
| this.option[key][idx].data = this._synScatterData(idx, data); |
| } |
| } |
| } |
| if (!this._isSilence && (this.zoomOption.realtime || dispatchNow)) { |
| this.messageCenter.dispatch(ecConfig.EVENT.DATA_ZOOM, null, { zoom: this._zoom }, this.myChart); |
| } |
| }, |
| _synScatterData: function (seriesIndex, data) { |
| if (this._zoom.start === 0 && this._zoom.end == 100 && this._zoom.start2 === 0 && this._zoom.end2 == 100) { |
| return data; |
| } |
| var newData = []; |
| var scale = this._zoom.scatterMap[seriesIndex]; |
| var total; |
| var xStart; |
| var xEnd; |
| var yStart; |
| var yEnd; |
| if (this.zoomOption.orient == 'horizontal') { |
| total = scale.x.max - scale.x.min; |
| xStart = this._zoom.start / 100 * total + scale.x.min; |
| xEnd = this._zoom.end / 100 * total + scale.x.min; |
| total = scale.y.max - scale.y.min; |
| yStart = this._zoom.start2 / 100 * total + scale.y.min; |
| yEnd = this._zoom.end2 / 100 * total + scale.y.min; |
| } else { |
| total = scale.x.max - scale.x.min; |
| xStart = this._zoom.start2 / 100 * total + scale.x.min; |
| xEnd = this._zoom.end2 / 100 * total + scale.x.min; |
| total = scale.y.max - scale.y.min; |
| yStart = this._zoom.start / 100 * total + scale.y.min; |
| yEnd = this._zoom.end / 100 * total + scale.y.min; |
| } |
| var dataMappingMethods; |
| if (dataMappingMethods = scale.x.dataMappingMethods) { |
| xStart = dataMappingMethods.coord2Value(xStart); |
| xEnd = dataMappingMethods.coord2Value(xEnd); |
| } |
| if (dataMappingMethods = scale.y.dataMappingMethods) { |
| yStart = dataMappingMethods.coord2Value(yStart); |
| yEnd = dataMappingMethods.coord2Value(yEnd); |
| } |
| var value; |
| for (var i = 0, l = data.length; i < l; i++) { |
| value = data[i].value || data[i]; |
| if (value[0] >= xStart && value[0] <= xEnd && value[1] >= yStart && value[1] <= yEnd) { |
| newData.push(data[i]); |
| } |
| } |
| return newData; |
| }, |
| _setScale: function () { |
| var needScale = this._zoom.start !== 0 || this._zoom.end !== 100 || this._zoom.start2 !== 0 || this._zoom.end2 !== 100; |
| var axis = { |
| xAxis: this.option.xAxis, |
| yAxis: this.option.yAxis |
| }; |
| for (var key in axis) { |
| for (var i = 0, l = axis[key].length; i < l; i++) { |
| axis[key][i].scale = needScale || axis[key][i]._scale; |
| } |
| } |
| }, |
| _backupScale: function () { |
| var axis = { |
| xAxis: this.option.xAxis, |
| yAxis: this.option.yAxis |
| }; |
| for (var key in axis) { |
| for (var i = 0, l = axis[key].length; i < l; i++) { |
| axis[key][i]._scale = axis[key][i].scale; |
| } |
| } |
| }, |
| _getDetail: function () { |
| var key = [ |
| 'xAxis', |
| 'yAxis' |
| ]; |
| for (var i = 0, l = key.length; i < l; i++) { |
| var target = this._originalData[key[i]]; |
| for (var idx in target) { |
| var data = target[idx]; |
| if (data == null) { |
| continue; |
| } |
| var length = data.length; |
| var start = Math.floor(this._zoom.start / 100 * length); |
| var end = Math.ceil(this._zoom.end / 100 * length); |
| end -= end > 0 ? 1 : 0; |
| return { |
| start: this.getDataFromOption(data[start]), |
| end: this.getDataFromOption(data[end]) |
| }; |
| } |
| } |
| key = this.zoomOption.orient == 'horizontal' ? 'xAxis' : 'yAxis'; |
| var seriesIndex = this._zoom.seriesIndex[0]; |
| var axisIndex = this.option.series[seriesIndex][key + 'Index'] || 0; |
| var axisType = this.option[key][axisIndex].type; |
| var min = this._zoom.scatterMap[seriesIndex][key.charAt(0)].min; |
| var max = this._zoom.scatterMap[seriesIndex][key.charAt(0)].max; |
| var gap = max - min; |
| if (axisType == 'value') { |
| return { |
| start: min + gap * this._zoom.start / 100, |
| end: min + gap * this._zoom.end / 100 |
| }; |
| } else if (axisType == 'time') { |
| max = min + gap * this._zoom.end / 100; |
| min = min + gap * this._zoom.start / 100; |
| var formatter = ecDate.getAutoFormatter(min, max).formatter; |
| return { |
| start: ecDate.format(formatter, min), |
| end: ecDate.format(formatter, max) |
| }; |
| } |
| return { |
| start: '', |
| end: '' |
| }; |
| }, |
| __ondrift: function (shape, dx, dy) { |
| if (this.zoomOption.zoomLock) { |
| shape = this._fillerShae; |
| } |
| var detailSize = shape._type == 'filler' ? this._handleSize : 0; |
| if (this.zoomOption.orient == 'horizontal') { |
| if (shape.style.x + dx - detailSize <= this._location.x) { |
| shape.style.x = this._location.x + detailSize; |
| } else if (shape.style.x + dx + shape.style.width + detailSize >= this._location.x + this._location.width) { |
| shape.style.x = this._location.x + this._location.width - shape.style.width - detailSize; |
| } else { |
| shape.style.x += dx; |
| } |
| } else { |
| if (shape.style.y + dy - detailSize <= this._location.y) { |
| shape.style.y = this._location.y + detailSize; |
| } else if (shape.style.y + dy + shape.style.height + detailSize >= this._location.y + this._location.height) { |
| shape.style.y = this._location.y + this._location.height - shape.style.height - detailSize; |
| } else { |
| shape.style.y += dy; |
| } |
| } |
| if (shape._type == 'filler') { |
| this._syncHandleShape(); |
| } else { |
| this._syncFillerShape(); |
| } |
| if (this.zoomOption.realtime) { |
| this._syncData(); |
| } |
| if (this.zoomOption.showDetail) { |
| var detail = this._getDetail(); |
| this._startShape.style.text = this._startShape.highlightStyle.text = detail.start; |
| this._endShape.style.text = this._endShape.highlightStyle.text = detail.end; |
| this._startShape.style.textPosition = this._startShape.highlightStyle.textPosition; |
| this._endShape.style.textPosition = this._endShape.highlightStyle.textPosition; |
| } |
| return true; |
| }, |
| __ondragend: function () { |
| if (this.zoomOption.showDetail) { |
| this._startShape.style.text = this._endShape.style.text = '='; |
| this._startShape.style.textPosition = this._endShape.style.textPosition = 'inside'; |
| this.zr.modShape(this._startShape.id); |
| this.zr.modShape(this._endShape.id); |
| this.zr.refreshNextFrame(); |
| } |
| this.isDragend = true; |
| }, |
| ondragend: function (param, status) { |
| if (!this.isDragend || !param.target) { |
| return; |
| } |
| !this.zoomOption.realtime && this._syncData(); |
| status.dragOut = true; |
| status.dragIn = true; |
| if (!this._isSilence && !this.zoomOption.realtime) { |
| this.messageCenter.dispatch(ecConfig.EVENT.DATA_ZOOM, null, { zoom: this._zoom }, this.myChart); |
| } |
| status.needRefresh = false; |
| this.isDragend = false; |
| return; |
| }, |
| ondataZoom: function (param, status) { |
| status.needRefresh = true; |
| return; |
| }, |
| absoluteZoom: function (param) { |
| this._zoom.start = param.start; |
| this._zoom.end = param.end; |
| this._zoom.start2 = param.start2; |
| this._zoom.end2 = param.end2; |
| this._syncShape(); |
| this._syncData(true); |
| return; |
| }, |
| rectZoom: function (param) { |
| if (!param) { |
| this._zoom.start = this._zoom.start2 = 0; |
| this._zoom.end = this._zoom.end2 = 100; |
| this._syncShape(); |
| this._syncData(true); |
| return this._zoom; |
| } |
| var gridArea = this.component.grid.getArea(); |
| var rect = { |
| x: param.x, |
| y: param.y, |
| width: param.width, |
| height: param.height |
| }; |
| if (rect.width < 0) { |
| rect.x += rect.width; |
| rect.width = -rect.width; |
| } |
| if (rect.height < 0) { |
| rect.y += rect.height; |
| rect.height = -rect.height; |
| } |
| if (rect.x > gridArea.x + gridArea.width || rect.y > gridArea.y + gridArea.height) { |
| return false; |
| } |
| if (rect.x < gridArea.x) { |
| rect.x = gridArea.x; |
| } |
| if (rect.x + rect.width > gridArea.x + gridArea.width) { |
| rect.width = gridArea.x + gridArea.width - rect.x; |
| } |
| if (rect.y + rect.height > gridArea.y + gridArea.height) { |
| rect.height = gridArea.y + gridArea.height - rect.y; |
| } |
| var total; |
| var sdx = (rect.x - gridArea.x) / gridArea.width; |
| var edx = 1 - (rect.x + rect.width - gridArea.x) / gridArea.width; |
| var sdy = 1 - (rect.y + rect.height - gridArea.y) / gridArea.height; |
| var edy = (rect.y - gridArea.y) / gridArea.height; |
| if (this.zoomOption.orient == 'horizontal') { |
| total = this._zoom.end - this._zoom.start; |
| this._zoom.start += total * sdx; |
| this._zoom.end -= total * edx; |
| total = this._zoom.end2 - this._zoom.start2; |
| this._zoom.start2 += total * sdy; |
| this._zoom.end2 -= total * edy; |
| } else { |
| total = this._zoom.end - this._zoom.start; |
| this._zoom.start += total * sdy; |
| this._zoom.end -= total * edy; |
| total = this._zoom.end2 - this._zoom.start2; |
| this._zoom.start2 += total * sdx; |
| this._zoom.end2 -= total * edx; |
| } |
| this._syncShape(); |
| this._syncData(true); |
| return this._zoom; |
| }, |
| syncBackupData: function (curOption) { |
| var start; |
| var target = this._originalData['series']; |
| var curSeries = curOption.series; |
| var curData; |
| for (var i = 0, l = curSeries.length; i < l; i++) { |
| curData = curSeries[i].data || curSeries[i].eventList; |
| if (target[i]) { |
| start = Math.floor(this._zoom.start / 100 * target[i].length); |
| } else { |
| start = 0; |
| } |
| for (var j = 0, k = curData.length; j < k; j++) { |
| if (target[i]) { |
| target[i][j + start] = curData[j]; |
| } |
| } |
| } |
| }, |
| syncOption: function (magicOption) { |
| this.silence(true); |
| this.option = magicOption; |
| this.option.dataZoom = this.reformOption(this.option.dataZoom); |
| this.zoomOption = this.option.dataZoom; |
| if (!this.myChart.canvasSupported) { |
| this.zoomOption.realtime = false; |
| } |
| this.clear(); |
| this._location = this._getLocation(); |
| this._zoom = this._getZoom(); |
| this._backupData(); |
| if (this.option.dataZoom && this.option.dataZoom.show) { |
| this._buildShape(); |
| } |
| this._syncData(); |
| this.silence(false); |
| }, |
| silence: function (s) { |
| this._isSilence = s; |
| }, |
| getRealDataIndex: function (sIdx, dIdx) { |
| if (!this._originalData || this._zoom.start === 0 && this._zoom.end == 100) { |
| return dIdx; |
| } |
| var sreies = this._originalData.series; |
| if (sreies[sIdx]) { |
| return Math.floor(this._zoom.start / 100 * sreies[sIdx].length) + dIdx; |
| } |
| return -1; |
| }, |
| resize: function () { |
| this.clear(); |
| this._location = this._getLocation(); |
| this._zoom = this._getZoom(); |
| if (this.option.dataZoom.show) { |
| this._buildShape(); |
| } |
| } |
| }; |
| zrUtil.inherits(DataZoom, Base); |
| require('../component').define('dataZoom', DataZoom); |
| return DataZoom; |
| });define('echarts/component/categoryAxis', [ |
| 'require', |
| './base', |
| 'zrender/shape/Text', |
| 'zrender/shape/Line', |
| 'zrender/shape/Rectangle', |
| '../config', |
| 'zrender/tool/util', |
| 'zrender/tool/area', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var TextShape = require('zrender/shape/Text'); |
| var LineShape = require('zrender/shape/Line'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var ecConfig = require('../config'); |
| ecConfig.categoryAxis = { |
| zlevel: 0, |
| z: 0, |
| show: true, |
| position: 'bottom', |
| name: '', |
| nameLocation: 'end', |
| nameTextStyle: {}, |
| boundaryGap: true, |
| axisLine: { |
| show: true, |
| onZero: true, |
| lineStyle: { |
| color: '#48b', |
| width: 2, |
| type: 'solid' |
| } |
| }, |
| axisTick: { |
| show: true, |
| interval: 'auto', |
| inside: false, |
| length: 5, |
| lineStyle: { |
| color: '#333', |
| width: 1 |
| } |
| }, |
| axisLabel: { |
| show: true, |
| interval: 'auto', |
| rotate: 0, |
| margin: 8, |
| textStyle: { color: '#333' } |
| }, |
| splitLine: { |
| show: true, |
| lineStyle: { |
| color: ['#ccc'], |
| width: 1, |
| type: 'solid' |
| } |
| }, |
| splitArea: { |
| show: false, |
| areaStyle: { |
| color: [ |
| 'rgba(250,250,250,0.3)', |
| 'rgba(200,200,200,0.3)' |
| ] |
| } |
| } |
| }; |
| var zrUtil = require('zrender/tool/util'); |
| var zrArea = require('zrender/tool/area'); |
| function CategoryAxis(ecTheme, messageCenter, zr, option, myChart, axisBase) { |
| if (option.data.length < 1) { |
| console.error('option.data.length < 1.'); |
| return; |
| } |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.grid = this.component.grid; |
| for (var method in axisBase) { |
| this[method] = axisBase[method]; |
| } |
| this.refresh(option); |
| } |
| CategoryAxis.prototype = { |
| type: ecConfig.COMPONENT_TYPE_AXIS_CATEGORY, |
| _getReformedLabel: function (idx) { |
| var data = this.getDataFromOption(this.option.data[idx]); |
| var formatter = this.option.data[idx].formatter || this.option.axisLabel.formatter; |
| if (formatter) { |
| if (typeof formatter == 'function') { |
| data = formatter.call(this.myChart, data); |
| } else if (typeof formatter == 'string') { |
| data = formatter.replace('{value}', data); |
| } |
| } |
| return data; |
| }, |
| _getInterval: function () { |
| var interval = this.option.axisLabel.interval; |
| if (interval == 'auto') { |
| var fontSize = this.option.axisLabel.textStyle.fontSize; |
| var data = this.option.data; |
| var dataLength = this.option.data.length; |
| if (this.isHorizontal()) { |
| if (dataLength > 3) { |
| var gap = this.getGap(); |
| var isEnough = false; |
| var labelSpace; |
| var labelSize; |
| var step = Math.floor(0.5 / gap); |
| step = step < 1 ? 1 : step; |
| interval = Math.floor(15 / gap); |
| while (!isEnough && interval < dataLength) { |
| interval += step; |
| isEnough = true; |
| labelSpace = Math.floor(gap * interval); |
| for (var i = Math.floor((dataLength - 1) / interval) * interval; i >= 0; i -= interval) { |
| if (this.option.axisLabel.rotate !== 0) { |
| labelSize = fontSize; |
| } else if (data[i].textStyle) { |
| labelSize = zrArea.getTextWidth(this._getReformedLabel(i), this.getFont(zrUtil.merge(data[i].textStyle, this.option.axisLabel.textStyle))); |
| } else { |
| var label = this._getReformedLabel(i) + ''; |
| var wLen = (label.match(/\w/g) || '').length; |
| var oLen = label.length - wLen; |
| labelSize = wLen * fontSize * 2 / 3 + oLen * fontSize; |
| } |
| if (labelSpace < labelSize) { |
| isEnough = false; |
| break; |
| } |
| } |
| } |
| } else { |
| interval = 1; |
| } |
| } else { |
| if (dataLength > 3) { |
| var gap = this.getGap(); |
| interval = Math.floor(11 / gap); |
| while (gap * interval - 6 < fontSize && interval < dataLength) { |
| interval++; |
| } |
| } else { |
| interval = 1; |
| } |
| } |
| } else { |
| interval = typeof interval == 'function' ? 1 : interval - 0 + 1; |
| } |
| return interval; |
| }, |
| _buildShape: function () { |
| this._interval = this._getInterval(); |
| if (!this.option.show) { |
| return; |
| } |
| this.option.splitArea.show && this._buildSplitArea(); |
| this.option.splitLine.show && this._buildSplitLine(); |
| this.option.axisLine.show && this._buildAxisLine(); |
| this.option.axisTick.show && this._buildAxisTick(); |
| this.option.axisLabel.show && this._buildAxisLabel(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| }, |
| _buildAxisTick: function () { |
| var axShape; |
| var data = this.option.data; |
| var dataLength = this.option.data.length; |
| var tickOption = this.option.axisTick; |
| var length = tickOption.length; |
| var color = tickOption.lineStyle.color; |
| var lineWidth = tickOption.lineStyle.width; |
| var intervalFunction = typeof tickOption.interval == 'function' ? tickOption.interval : tickOption.interval == 'auto' ? typeof this.option.axisLabel.interval == 'function' ? this.option.axisLabel.interval : false : false; |
| var interval = intervalFunction ? 1 : tickOption.interval == 'auto' ? this._interval : tickOption.interval - 0 + 1; |
| var onGap = tickOption.onGap; |
| var optGap = onGap ? this.getGap() / 2 : typeof onGap == 'undefined' ? this.option.boundaryGap ? this.getGap() / 2 : 0 : 0; |
| var startIndex = optGap > 0 ? -interval : 0; |
| if (this.isHorizontal()) { |
| var yPosition = this.option.position == 'bottom' ? tickOption.inside ? this.grid.getYend() - length - 1 : this.grid.getYend() + 1 : tickOption.inside ? this.grid.getY() + 1 : this.grid.getY() - length - 1; |
| var x; |
| for (var i = startIndex; i < dataLength; i += interval) { |
| if (intervalFunction && !intervalFunction(i, data[i])) { |
| continue; |
| } |
| x = this.subPixelOptimize(this.getCoordByIndex(i) + (i >= 0 ? optGap : 0), lineWidth); |
| axShape = { |
| _axisShape: 'axisTick', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: x, |
| yStart: yPosition, |
| xEnd: x, |
| yEnd: yPosition + length, |
| strokeColor: color, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } else { |
| var xPosition = this.option.position == 'left' ? tickOption.inside ? this.grid.getX() + 1 : this.grid.getX() - length - 1 : tickOption.inside ? this.grid.getXend() - length - 1 : this.grid.getXend() + 1; |
| var y; |
| for (var i = startIndex; i < dataLength; i += interval) { |
| if (intervalFunction && !intervalFunction(i, data[i])) { |
| continue; |
| } |
| y = this.subPixelOptimize(this.getCoordByIndex(i) - (i >= 0 ? optGap : 0), lineWidth); |
| axShape = { |
| _axisShape: 'axisTick', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: xPosition, |
| yStart: y, |
| xEnd: xPosition + length, |
| yEnd: y, |
| strokeColor: color, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } |
| }, |
| _buildAxisLabel: function () { |
| var axShape; |
| var data = this.option.data; |
| var dataLength = this.option.data.length; |
| var labelOption = this.option.axisLabel; |
| var rotate = labelOption.rotate; |
| var margin = labelOption.margin; |
| var clickable = labelOption.clickable; |
| var textStyle = labelOption.textStyle; |
| var intervalFunction = typeof labelOption.interval == 'function' ? labelOption.interval : false; |
| var dataTextStyle; |
| if (this.isHorizontal()) { |
| var yPosition; |
| var baseLine; |
| if (this.option.position == 'bottom') { |
| yPosition = this.grid.getYend() + margin; |
| baseLine = 'top'; |
| } else { |
| yPosition = this.grid.getY() - margin; |
| baseLine = 'bottom'; |
| } |
| for (var i = 0; i < dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i]) || this._getReformedLabel(i) === '') { |
| continue; |
| } |
| dataTextStyle = zrUtil.merge(data[i].textStyle || {}, textStyle); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 3, |
| hoverable: false, |
| style: { |
| x: this.getCoordByIndex(i), |
| y: yPosition, |
| color: dataTextStyle.color, |
| text: this._getReformedLabel(i), |
| textFont: this.getFont(dataTextStyle), |
| textAlign: dataTextStyle.align || 'center', |
| textBaseline: dataTextStyle.baseline || baseLine |
| } |
| }; |
| if (rotate) { |
| axShape.style.textAlign = rotate > 0 ? this.option.position == 'bottom' ? 'right' : 'left' : this.option.position == 'bottom' ? 'left' : 'right'; |
| axShape.rotation = [ |
| rotate * Math.PI / 180, |
| axShape.style.x, |
| axShape.style.y |
| ]; |
| } |
| this.shapeList.push(new TextShape(this._axisLabelClickable(clickable, axShape))); |
| } |
| } else { |
| var xPosition; |
| var align; |
| if (this.option.position == 'left') { |
| xPosition = this.grid.getX() - margin; |
| align = 'right'; |
| } else { |
| xPosition = this.grid.getXend() + margin; |
| align = 'left'; |
| } |
| for (var i = 0; i < dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i]) || this._getReformedLabel(i) === '') { |
| continue; |
| } |
| dataTextStyle = zrUtil.merge(data[i].textStyle || {}, textStyle); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 3, |
| hoverable: false, |
| style: { |
| x: xPosition, |
| y: this.getCoordByIndex(i), |
| color: dataTextStyle.color, |
| text: this._getReformedLabel(i), |
| textFont: this.getFont(dataTextStyle), |
| textAlign: dataTextStyle.align || align, |
| textBaseline: dataTextStyle.baseline || i === 0 && this.option.name !== '' ? 'bottom' : i == dataLength - 1 && this.option.name !== '' ? 'top' : 'middle' |
| } |
| }; |
| if (rotate) { |
| axShape.rotation = [ |
| rotate * Math.PI / 180, |
| axShape.style.x, |
| axShape.style.y |
| ]; |
| } |
| this.shapeList.push(new TextShape(this._axisLabelClickable(clickable, axShape))); |
| } |
| } |
| }, |
| _buildSplitLine: function () { |
| var axShape; |
| var data = this.option.data; |
| var dataLength = this.option.data.length; |
| var sLineOption = this.option.splitLine; |
| var lineType = sLineOption.lineStyle.type; |
| var lineWidth = sLineOption.lineStyle.width; |
| var color = sLineOption.lineStyle.color; |
| color = color instanceof Array ? color : [color]; |
| var colorLength = color.length; |
| var intervalFunction = typeof this.option.axisLabel.interval == 'function' ? this.option.axisLabel.interval : false; |
| var onGap = sLineOption.onGap; |
| var optGap = onGap ? this.getGap() / 2 : typeof onGap == 'undefined' ? this.option.boundaryGap ? this.getGap() / 2 : 0 : 0; |
| dataLength -= onGap || typeof onGap == 'undefined' && this.option.boundaryGap ? 1 : 0; |
| if (this.isHorizontal()) { |
| var sy = this.grid.getY(); |
| var ey = this.grid.getYend(); |
| var x; |
| for (var i = 0; i < dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i])) { |
| continue; |
| } |
| x = this.subPixelOptimize(this.getCoordByIndex(i) + optGap, lineWidth); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: x, |
| yStart: sy, |
| xEnd: x, |
| yEnd: ey, |
| strokeColor: color[i / this._interval % colorLength], |
| lineType: lineType, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } else { |
| var sx = this.grid.getX(); |
| var ex = this.grid.getXend(); |
| var y; |
| for (var i = 0; i < dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i])) { |
| continue; |
| } |
| y = this.subPixelOptimize(this.getCoordByIndex(i) - optGap, lineWidth); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: sx, |
| yStart: y, |
| xEnd: ex, |
| yEnd: y, |
| strokeColor: color[i / this._interval % colorLength], |
| lineType: lineType, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } |
| }, |
| _buildSplitArea: function () { |
| var axShape; |
| var data = this.option.data; |
| var sAreaOption = this.option.splitArea; |
| var color = sAreaOption.areaStyle.color; |
| if (!(color instanceof Array)) { |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this.grid.getX(), |
| y: this.grid.getY(), |
| width: this.grid.getWidth(), |
| height: this.grid.getHeight(), |
| color: color |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| } else { |
| var colorLength = color.length; |
| var dataLength = this.option.data.length; |
| var intervalFunction = typeof this.option.axisLabel.interval == 'function' ? this.option.axisLabel.interval : false; |
| var onGap = sAreaOption.onGap; |
| var optGap = onGap ? this.getGap() / 2 : typeof onGap == 'undefined' ? this.option.boundaryGap ? this.getGap() / 2 : 0 : 0; |
| if (this.isHorizontal()) { |
| var y = this.grid.getY(); |
| var height = this.grid.getHeight(); |
| var lastX = this.grid.getX(); |
| var curX; |
| for (var i = 0; i <= dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i]) && i < dataLength) { |
| continue; |
| } |
| curX = i < dataLength ? this.getCoordByIndex(i) + optGap : this.grid.getXend(); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: lastX, |
| y: y, |
| width: curX - lastX, |
| height: height, |
| color: color[i / this._interval % colorLength] |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| lastX = curX; |
| } |
| } else { |
| var x = this.grid.getX(); |
| var width = this.grid.getWidth(); |
| var lastYend = this.grid.getYend(); |
| var curY; |
| for (var i = 0; i <= dataLength; i += this._interval) { |
| if (intervalFunction && !intervalFunction(i, data[i]) && i < dataLength) { |
| continue; |
| } |
| curY = i < dataLength ? this.getCoordByIndex(i) - optGap : this.grid.getY(); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: x, |
| y: curY, |
| width: width, |
| height: lastYend - curY, |
| color: color[i / this._interval % colorLength] |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| lastYend = curY; |
| } |
| } |
| } |
| }, |
| refresh: function (newOption) { |
| if (newOption) { |
| this.option = this.reformOption(newOption); |
| this.option.axisLabel.textStyle = this.getTextStyle(this.option.axisLabel.textStyle); |
| } |
| this.clear(); |
| this._buildShape(); |
| }, |
| getGap: function () { |
| var dataLength = this.option.data.length; |
| var total = this.isHorizontal() ? this.grid.getWidth() : this.grid.getHeight(); |
| if (this.option.boundaryGap) { |
| return total / dataLength; |
| } else { |
| return total / (dataLength > 1 ? dataLength - 1 : 1); |
| } |
| }, |
| getCoord: function (value) { |
| var data = this.option.data; |
| var dataLength = data.length; |
| var gap = this.getGap(); |
| var position = this.option.boundaryGap ? gap / 2 : 0; |
| for (var i = 0; i < dataLength; i++) { |
| if (this.getDataFromOption(data[i]) == value) { |
| if (this.isHorizontal()) { |
| position = this.grid.getX() + position; |
| } else { |
| position = this.grid.getYend() - position; |
| } |
| return position; |
| } |
| position += gap; |
| } |
| }, |
| getCoordByIndex: function (dataIndex) { |
| if (dataIndex < 0) { |
| if (this.isHorizontal()) { |
| return this.grid.getX(); |
| } else { |
| return this.grid.getYend(); |
| } |
| } else if (dataIndex > this.option.data.length - 1) { |
| if (this.isHorizontal()) { |
| return this.grid.getXend(); |
| } else { |
| return this.grid.getY(); |
| } |
| } else { |
| var gap = this.getGap(); |
| var position = this.option.boundaryGap ? gap / 2 : 0; |
| position += dataIndex * gap; |
| if (this.isHorizontal()) { |
| position = this.grid.getX() + position; |
| } else { |
| position = this.grid.getYend() - position; |
| } |
| return position; |
| } |
| }, |
| getNameByIndex: function (dataIndex) { |
| return this.getDataFromOption(this.option.data[dataIndex]); |
| }, |
| getIndexByName: function (name) { |
| var data = this.option.data; |
| var dataLength = data.length; |
| for (var i = 0; i < dataLength; i++) { |
| if (this.getDataFromOption(data[i]) == name) { |
| return i; |
| } |
| } |
| return -1; |
| }, |
| getValueFromCoord: function () { |
| return ''; |
| }, |
| isMainAxis: function (dataIndex) { |
| return dataIndex % this._interval === 0; |
| } |
| }; |
| zrUtil.inherits(CategoryAxis, Base); |
| require('../component').define('categoryAxis', CategoryAxis); |
| return CategoryAxis; |
| });define('echarts/component/valueAxis', [ |
| 'require', |
| './base', |
| 'zrender/shape/Text', |
| 'zrender/shape/Line', |
| 'zrender/shape/Rectangle', |
| '../config', |
| '../util/date', |
| 'zrender/tool/util', |
| '../util/smartSteps', |
| '../util/accMath', |
| '../util/smartLogSteps', |
| '../component' |
| ], function (require) { |
| var Base = require('./base'); |
| var TextShape = require('zrender/shape/Text'); |
| var LineShape = require('zrender/shape/Line'); |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var ecConfig = require('../config'); |
| ecConfig.valueAxis = { |
| zlevel: 0, |
| z: 0, |
| show: true, |
| position: 'left', |
| name: '', |
| nameLocation: 'end', |
| nameTextStyle: {}, |
| boundaryGap: [ |
| 0, |
| 0 |
| ], |
| axisLine: { |
| show: true, |
| onZero: true, |
| lineStyle: { |
| color: '#48b', |
| width: 2, |
| type: 'solid' |
| } |
| }, |
| axisTick: { |
| show: false, |
| inside: false, |
| length: 5, |
| lineStyle: { |
| color: '#333', |
| width: 1 |
| } |
| }, |
| axisLabel: { |
| show: true, |
| rotate: 0, |
| margin: 8, |
| textStyle: { color: '#333' } |
| }, |
| splitLine: { |
| show: true, |
| lineStyle: { |
| color: ['#ccc'], |
| width: 1, |
| type: 'solid' |
| } |
| }, |
| splitArea: { |
| show: false, |
| areaStyle: { |
| color: [ |
| 'rgba(250,250,250,0.3)', |
| 'rgba(200,200,200,0.3)' |
| ] |
| } |
| } |
| }; |
| var ecDate = require('../util/date'); |
| var zrUtil = require('zrender/tool/util'); |
| function ValueAxis(ecTheme, messageCenter, zr, option, myChart, axisBase, series) { |
| if (!series || series.length === 0) { |
| console.err('option.series.length == 0.'); |
| return; |
| } |
| Base.call(this, ecTheme, messageCenter, zr, option, myChart); |
| this.series = series; |
| this.grid = this.component.grid; |
| for (var method in axisBase) { |
| this[method] = axisBase[method]; |
| } |
| this.refresh(option, series); |
| } |
| ValueAxis.prototype = { |
| type: ecConfig.COMPONENT_TYPE_AXIS_VALUE, |
| _buildShape: function () { |
| this._hasData = false; |
| this._calculateValue(); |
| if (!this._hasData || !this.option.show) { |
| return; |
| } |
| this.option.splitArea.show && this._buildSplitArea(); |
| this.option.splitLine.show && this._buildSplitLine(); |
| this.option.axisLine.show && this._buildAxisLine(); |
| this.option.axisTick.show && this._buildAxisTick(); |
| this.option.axisLabel.show && this._buildAxisLabel(); |
| for (var i = 0, l = this.shapeList.length; i < l; i++) { |
| this.zr.addShape(this.shapeList[i]); |
| } |
| }, |
| _buildAxisTick: function () { |
| var axShape; |
| var data = this._valueList; |
| var dataLength = this._valueList.length; |
| var tickOption = this.option.axisTick; |
| var length = tickOption.length; |
| var color = tickOption.lineStyle.color; |
| var lineWidth = tickOption.lineStyle.width; |
| if (this.isHorizontal()) { |
| var yPosition = this.option.position === 'bottom' ? tickOption.inside ? this.grid.getYend() - length - 1 : this.grid.getYend() + 1 : tickOption.inside ? this.grid.getY() + 1 : this.grid.getY() - length - 1; |
| var x; |
| for (var i = 0; i < dataLength; i++) { |
| x = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); |
| axShape = { |
| _axisShape: 'axisTick', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: x, |
| yStart: yPosition, |
| xEnd: x, |
| yEnd: yPosition + length, |
| strokeColor: color, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } else { |
| var xPosition = this.option.position === 'left' ? tickOption.inside ? this.grid.getX() + 1 : this.grid.getX() - length - 1 : tickOption.inside ? this.grid.getXend() - length - 1 : this.grid.getXend() + 1; |
| var y; |
| for (var i = 0; i < dataLength; i++) { |
| y = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); |
| axShape = { |
| _axisShape: 'axisTick', |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: xPosition, |
| yStart: y, |
| xEnd: xPosition + length, |
| yEnd: y, |
| strokeColor: color, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } |
| }, |
| _buildAxisLabel: function () { |
| var axShape; |
| var data = this._valueList; |
| var dataLength = this._valueList.length; |
| var rotate = this.option.axisLabel.rotate; |
| var margin = this.option.axisLabel.margin; |
| var clickable = this.option.axisLabel.clickable; |
| var textStyle = this.option.axisLabel.textStyle; |
| if (this.isHorizontal()) { |
| var yPosition; |
| var baseLine; |
| if (this.option.position === 'bottom') { |
| yPosition = this.grid.getYend() + margin; |
| baseLine = 'top'; |
| } else { |
| yPosition = this.grid.getY() - margin; |
| baseLine = 'bottom'; |
| } |
| for (var i = 0; i < dataLength; i++) { |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 3, |
| hoverable: false, |
| style: { |
| x: this.getCoord(data[i]), |
| y: yPosition, |
| color: typeof textStyle.color === 'function' ? textStyle.color(data[i]) : textStyle.color, |
| text: this._valueLabel[i], |
| textFont: this.getFont(textStyle), |
| textAlign: textStyle.align || 'center', |
| textBaseline: textStyle.baseline || baseLine |
| } |
| }; |
| if (rotate) { |
| axShape.style.textAlign = rotate > 0 ? this.option.position === 'bottom' ? 'right' : 'left' : this.option.position === 'bottom' ? 'left' : 'right'; |
| axShape.rotation = [ |
| rotate * Math.PI / 180, |
| axShape.style.x, |
| axShape.style.y |
| ]; |
| } |
| this.shapeList.push(new TextShape(this._axisLabelClickable(clickable, axShape))); |
| } |
| } else { |
| var xPosition; |
| var align; |
| if (this.option.position === 'left') { |
| xPosition = this.grid.getX() - margin; |
| align = 'right'; |
| } else { |
| xPosition = this.grid.getXend() + margin; |
| align = 'left'; |
| } |
| for (var i = 0; i < dataLength; i++) { |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase() + 3, |
| hoverable: false, |
| style: { |
| x: xPosition, |
| y: this.getCoord(data[i]), |
| color: typeof textStyle.color === 'function' ? textStyle.color(data[i]) : textStyle.color, |
| text: this._valueLabel[i], |
| textFont: this.getFont(textStyle), |
| textAlign: textStyle.align || align, |
| textBaseline: textStyle.baseline || (i === 0 && this.option.name !== '' ? 'bottom' : i === dataLength - 1 && this.option.name !== '' ? 'top' : 'middle') |
| } |
| }; |
| if (rotate) { |
| axShape.rotation = [ |
| rotate * Math.PI / 180, |
| axShape.style.x, |
| axShape.style.y |
| ]; |
| } |
| this.shapeList.push(new TextShape(this._axisLabelClickable(clickable, axShape))); |
| } |
| } |
| }, |
| _buildSplitLine: function () { |
| var axShape; |
| var data = this._valueList; |
| var dataLength = this._valueList.length; |
| var sLineOption = this.option.splitLine; |
| var lineType = sLineOption.lineStyle.type; |
| var lineWidth = sLineOption.lineStyle.width; |
| var color = sLineOption.lineStyle.color; |
| color = color instanceof Array ? color : [color]; |
| var colorLength = color.length; |
| if (this.isHorizontal()) { |
| var sy = this.grid.getY(); |
| var ey = this.grid.getYend(); |
| var x; |
| for (var i = 0; i < dataLength; i++) { |
| x = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: x, |
| yStart: sy, |
| xEnd: x, |
| yEnd: ey, |
| strokeColor: color[i % colorLength], |
| lineType: lineType, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } else { |
| var sx = this.grid.getX(); |
| var ex = this.grid.getXend(); |
| var y; |
| for (var i = 0; i < dataLength; i++) { |
| y = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| xStart: sx, |
| yStart: y, |
| xEnd: ex, |
| yEnd: y, |
| strokeColor: color[i % colorLength], |
| lineType: lineType, |
| lineWidth: lineWidth |
| } |
| }; |
| this.shapeList.push(new LineShape(axShape)); |
| } |
| } |
| }, |
| _buildSplitArea: function () { |
| var axShape; |
| var color = this.option.splitArea.areaStyle.color; |
| if (!(color instanceof Array)) { |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: this.grid.getX(), |
| y: this.grid.getY(), |
| width: this.grid.getWidth(), |
| height: this.grid.getHeight(), |
| color: color |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| } else { |
| var colorLength = color.length; |
| var data = this._valueList; |
| var dataLength = this._valueList.length; |
| if (this.isHorizontal()) { |
| var y = this.grid.getY(); |
| var height = this.grid.getHeight(); |
| var lastX = this.grid.getX(); |
| var curX; |
| for (var i = 0; i <= dataLength; i++) { |
| curX = i < dataLength ? this.getCoord(data[i]) : this.grid.getXend(); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: lastX, |
| y: y, |
| width: curX - lastX, |
| height: height, |
| color: color[i % colorLength] |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| lastX = curX; |
| } |
| } else { |
| var x = this.grid.getX(); |
| var width = this.grid.getWidth(); |
| var lastYend = this.grid.getYend(); |
| var curY; |
| for (var i = 0; i <= dataLength; i++) { |
| curY = i < dataLength ? this.getCoord(data[i]) : this.grid.getY(); |
| axShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable: false, |
| style: { |
| x: x, |
| y: curY, |
| width: width, |
| height: lastYend - curY, |
| color: color[i % colorLength] |
| } |
| }; |
| this.shapeList.push(new RectangleShape(axShape)); |
| lastYend = curY; |
| } |
| } |
| } |
| }, |
| _calculateValue: function () { |
| if (isNaN(this.option.min - 0) || isNaN(this.option.max - 0)) { |
| var data = {}; |
| var xIdx; |
| var yIdx; |
| var legend = this.component.legend; |
| for (var i = 0, l = this.series.length; i < l; i++) { |
| if (this.series[i].type != ecConfig.CHART_TYPE_LINE && this.series[i].type != ecConfig.CHART_TYPE_BAR && this.series[i].type != ecConfig.CHART_TYPE_SCATTER && this.series[i].type != ecConfig.CHART_TYPE_K && this.series[i].type != ecConfig.CHART_TYPE_EVENTRIVER) { |
| continue; |
| } |
| if (legend && !legend.isSelected(this.series[i].name)) { |
| continue; |
| } |
| xIdx = this.series[i].xAxisIndex || 0; |
| yIdx = this.series[i].yAxisIndex || 0; |
| if (this.option.xAxisIndex != xIdx && this.option.yAxisIndex != yIdx) { |
| continue; |
| } |
| this._calculSum(data, i); |
| } |
| var oriData; |
| for (var i in data) { |
| oriData = data[i]; |
| for (var j = 0, k = oriData.length; j < k; j++) { |
| if (!isNaN(oriData[j])) { |
| this._hasData = true; |
| this._min = oriData[j]; |
| this._max = oriData[j]; |
| break; |
| } |
| } |
| if (this._hasData) { |
| break; |
| } |
| } |
| for (var i in data) { |
| oriData = data[i]; |
| for (var j = 0, k = oriData.length; j < k; j++) { |
| if (!isNaN(oriData[j])) { |
| this._min = Math.min(this._min, oriData[j]); |
| this._max = Math.max(this._max, oriData[j]); |
| } |
| } |
| } |
| var boundaryGap = this.option.type !== 'log' ? this.option.boundaryGap : [ |
| 0, |
| 0 |
| ]; |
| var gap = Math.abs(this._max - this._min); |
| this._min = isNaN(this.option.min - 0) ? this._min - Math.abs(gap * boundaryGap[0]) : this.option.min - 0; |
| this._max = isNaN(this.option.max - 0) ? this._max + Math.abs(gap * boundaryGap[1]) : this.option.max - 0; |
| if (this._min === this._max) { |
| if (this._max === 0) { |
| this._max = 1; |
| } else if (this._max > 0) { |
| this._min = this._max / this.option.splitNumber != null ? this.option.splitNumber : 5; |
| } else { |
| this._max = this._max / this.option.splitNumber != null ? this.option.splitNumber : 5; |
| } |
| } |
| if (this.option.type === 'time') { |
| this._reformTimeValue(); |
| } else if (this.option.type === 'log') { |
| this._reformLogValue(); |
| } else { |
| this._reformValue(this.option.scale); |
| } |
| } else { |
| this._hasData = true; |
| this._min = this.option.min - 0; |
| this._max = this.option.max - 0; |
| if (this.option.type === 'time') { |
| this._reformTimeValue(); |
| } else if (this.option.type === 'log') { |
| this._reformLogValue(); |
| } else { |
| this._customerValue(); |
| } |
| } |
| }, |
| _calculSum: function (data, i) { |
| var key = this.series[i].name || 'kener'; |
| var value; |
| var oriData; |
| if (!this.series[i].stack) { |
| data[key] = data[key] || []; |
| if (this.series[i].type != ecConfig.CHART_TYPE_EVENTRIVER) { |
| oriData = this.series[i].data; |
| for (var j = 0, k = oriData.length; j < k; j++) { |
| value = this.getDataFromOption(oriData[j]); |
| if (this.series[i].type === ecConfig.CHART_TYPE_K) { |
| data[key].push(value[0]); |
| data[key].push(value[1]); |
| data[key].push(value[2]); |
| data[key].push(value[3]); |
| } else if (value instanceof Array) { |
| if (this.option.xAxisIndex != -1) { |
| data[key].push(this.option.type != 'time' ? value[0] : ecDate.getNewDate(value[0])); |
| } |
| if (this.option.yAxisIndex != -1) { |
| data[key].push(this.option.type != 'time' ? value[1] : ecDate.getNewDate(value[1])); |
| } |
| } else { |
| data[key].push(value); |
| } |
| } |
| } else { |
| oriData = this.series[i].data; |
| for (var j = 0, k = oriData.length; j < k; j++) { |
| var evolution = oriData[j].evolution; |
| for (var m = 0, n = evolution.length; m < n; m++) { |
| data[key].push(ecDate.getNewDate(evolution[m].time)); |
| } |
| } |
| } |
| } else { |
| var keyP = '__Magic_Key_Positive__' + this.series[i].stack; |
| var keyN = '__Magic_Key_Negative__' + this.series[i].stack; |
| data[keyP] = data[keyP] || []; |
| data[keyN] = data[keyN] || []; |
| data[key] = data[key] || []; |
| oriData = this.series[i].data; |
| for (var j = 0, k = oriData.length; j < k; j++) { |
| value = this.getDataFromOption(oriData[j]); |
| if (value === '-') { |
| continue; |
| } |
| value = value - 0; |
| if (value >= 0) { |
| if (data[keyP][j] != null) { |
| data[keyP][j] += value; |
| } else { |
| data[keyP][j] = value; |
| } |
| } else { |
| if (data[keyN][j] != null) { |
| data[keyN][j] += value; |
| } else { |
| data[keyN][j] = value; |
| } |
| } |
| if (this.option.scale) { |
| data[key].push(value); |
| } |
| } |
| } |
| }, |
| _reformValue: function (scale) { |
| var smartSteps = require('../util/smartSteps'); |
| var splitNumber = this.option.splitNumber; |
| if (!scale && this._min >= 0 && this._max >= 0) { |
| this._min = 0; |
| } |
| if (!scale && this._min <= 0 && this._max <= 0) { |
| this._max = 0; |
| } |
| var stepOpt = smartSteps(this._min, this._max, splitNumber); |
| splitNumber = splitNumber != null ? splitNumber : stepOpt.secs; |
| this._min = stepOpt.min; |
| this._max = stepOpt.max; |
| this._valueList = stepOpt.pnts; |
| this._reformLabelData(); |
| }, |
| _reformTimeValue: function () { |
| var splitNumber = this.option.splitNumber != null ? this.option.splitNumber : 5; |
| var curValue = ecDate.getAutoFormatter(this._min, this._max, splitNumber); |
| var formatter = curValue.formatter; |
| var gapValue = curValue.gapValue; |
| this._valueList = [ecDate.getNewDate(this._min)]; |
| var startGap; |
| switch (formatter) { |
| case 'week': |
| startGap = ecDate.nextMonday(this._min); |
| break; |
| case 'month': |
| startGap = ecDate.nextNthOnMonth(this._min, 1); |
| break; |
| case 'quarter': |
| startGap = ecDate.nextNthOnQuarterYear(this._min, 1); |
| break; |
| case 'half-year': |
| startGap = ecDate.nextNthOnHalfYear(this._min, 1); |
| break; |
| case 'year': |
| startGap = ecDate.nextNthOnYear(this._min, 1); |
| break; |
| default: |
| if (gapValue <= 3600000 * 2) { |
| startGap = (Math.floor(this._min / gapValue) + 1) * gapValue; |
| } else { |
| startGap = ecDate.getNewDate(this._min - -gapValue); |
| startGap.setHours(Math.round(startGap.getHours() / 6) * 6); |
| startGap.setMinutes(0); |
| startGap.setSeconds(0); |
| } |
| break; |
| } |
| if (startGap - this._min < gapValue / 2) { |
| startGap -= -gapValue; |
| } |
| curValue = ecDate.getNewDate(startGap); |
| splitNumber *= 1.5; |
| while (splitNumber-- >= 0) { |
| if (formatter == 'month' || formatter == 'quarter' || formatter == 'half-year' || formatter == 'year') { |
| curValue.setDate(1); |
| } |
| if (this._max - curValue < gapValue / 2) { |
| break; |
| } |
| this._valueList.push(curValue); |
| curValue = ecDate.getNewDate(curValue - -gapValue); |
| } |
| this._valueList.push(ecDate.getNewDate(this._max)); |
| this._reformLabelData(function (formatterStr) { |
| return function (value) { |
| return ecDate.format(formatterStr, value); |
| }; |
| }(formatter)); |
| }, |
| _customerValue: function () { |
| var accMath = require('../util/accMath'); |
| var splitNumber = this.option.splitNumber != null ? this.option.splitNumber : 5; |
| var splitGap = (this._max - this._min) / splitNumber; |
| this._valueList = []; |
| for (var i = 0; i <= splitNumber; i++) { |
| this._valueList.push(accMath.accAdd(this._min, accMath.accMul(splitGap, i))); |
| } |
| this._reformLabelData(); |
| }, |
| _reformLogValue: function () { |
| var thisOption = this.option; |
| var result = require('../util/smartLogSteps')({ |
| dataMin: this._min, |
| dataMax: this._max, |
| logPositive: thisOption.logPositive, |
| logLabelBase: thisOption.logLabelBase, |
| splitNumber: thisOption.splitNumber |
| }); |
| this._min = result.dataMin; |
| this._max = result.dataMax; |
| this._valueList = result.tickList; |
| this._dataMappingMethods = result.dataMappingMethods; |
| this._reformLabelData(result.labelFormatter); |
| }, |
| _reformLabelData: function (innerFormatter) { |
| this._valueLabel = []; |
| var formatter = this.option.axisLabel.formatter; |
| if (formatter) { |
| for (var i = 0, l = this._valueList.length; i < l; i++) { |
| if (typeof formatter === 'function') { |
| this._valueLabel.push(innerFormatter ? formatter.call(this.myChart, this._valueList[i], innerFormatter) : formatter.call(this.myChart, this._valueList[i])); |
| } else if (typeof formatter === 'string') { |
| this._valueLabel.push(innerFormatter ? ecDate.format(formatter, this._valueList[i]) : formatter.replace('{value}', this._valueList[i])); |
| } |
| } |
| } else { |
| for (var i = 0, l = this._valueList.length; i < l; i++) { |
| this._valueLabel.push(innerFormatter ? innerFormatter(this._valueList[i]) : this.numAddCommas(this._valueList[i])); |
| } |
| } |
| }, |
| getExtremum: function () { |
| this._calculateValue(); |
| var dataMappingMethods = this._dataMappingMethods; |
| return { |
| min: this._min, |
| max: this._max, |
| dataMappingMethods: dataMappingMethods ? zrUtil.merge({}, dataMappingMethods) : null |
| }; |
| }, |
| refresh: function (newOption, newSeries) { |
| if (newOption) { |
| this.option = this.reformOption(newOption); |
| this.option.axisLabel.textStyle = zrUtil.merge(this.option.axisLabel.textStyle || {}, this.ecTheme.textStyle); |
| this.series = newSeries; |
| } |
| if (this.zr) { |
| this.clear(); |
| this._buildShape(); |
| } |
| }, |
| getCoord: function (value) { |
| if (this._dataMappingMethods) { |
| value = this._dataMappingMethods.value2Coord(value); |
| } |
| value = value < this._min ? this._min : value; |
| value = value > this._max ? this._max : value; |
| var result; |
| if (!this.isHorizontal()) { |
| result = this.grid.getYend() - (value - this._min) / (this._max - this._min) * this.grid.getHeight(); |
| } else { |
| result = this.grid.getX() + (value - this._min) / (this._max - this._min) * this.grid.getWidth(); |
| } |
| return result; |
| }, |
| getCoordSize: function (value) { |
| if (!this.isHorizontal()) { |
| return Math.abs(value / (this._max - this._min) * this.grid.getHeight()); |
| } else { |
| return Math.abs(value / (this._max - this._min) * this.grid.getWidth()); |
| } |
| }, |
| getValueFromCoord: function (coord) { |
| var result; |
| if (!this.isHorizontal()) { |
| coord = coord < this.grid.getY() ? this.grid.getY() : coord; |
| coord = coord > this.grid.getYend() ? this.grid.getYend() : coord; |
| result = this._max - (coord - this.grid.getY()) / this.grid.getHeight() * (this._max - this._min); |
| } else { |
| coord = coord < this.grid.getX() ? this.grid.getX() : coord; |
| coord = coord > this.grid.getXend() ? this.grid.getXend() : coord; |
| result = this._min + (coord - this.grid.getX()) / this.grid.getWidth() * (this._max - this._min); |
| } |
| if (this._dataMappingMethods) { |
| result = this._dataMappingMethods.coord2Value(result); |
| } |
| return result.toFixed(2) - 0; |
| }, |
| isMaindAxis: function (value) { |
| for (var i = 0, l = this._valueList.length; i < l; i++) { |
| if (this._valueList[i] === value) { |
| return true; |
| } |
| } |
| return false; |
| } |
| }; |
| zrUtil.inherits(ValueAxis, Base); |
| require('../component').define('valueAxis', ValueAxis); |
| return ValueAxis; |
| });define('echarts/util/date', [], function () { |
| var _timeGap = [ |
| { |
| formatter: 'hh : mm : ss', |
| value: 1000 |
| }, |
| { |
| formatter: 'hh : mm : ss', |
| value: 1000 * 5 |
| }, |
| { |
| formatter: 'hh : mm : ss', |
| value: 1000 * 10 |
| }, |
| { |
| formatter: 'hh : mm : ss', |
| value: 1000 * 15 |
| }, |
| { |
| formatter: 'hh : mm : ss', |
| value: 1000 * 30 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 60000 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 60000 * 5 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 60000 * 10 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 60000 * 15 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 60000 * 30 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 3600000 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 3600000 * 2 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 3600000 * 6 |
| }, |
| { |
| formatter: 'hh : mm\nMM - dd', |
| value: 3600000 * 12 |
| }, |
| { |
| formatter: 'MM - dd\nyyyy', |
| value: 3600000 * 24 |
| }, |
| { |
| formatter: 'week', |
| value: 3600000 * 24 * 7 |
| }, |
| { |
| formatter: 'month', |
| value: 3600000 * 24 * 31 |
| }, |
| { |
| formatter: 'quarter', |
| value: 3600000 * 24 * 380 / 4 |
| }, |
| { |
| formatter: 'half-year', |
| value: 3600000 * 24 * 380 / 2 |
| }, |
| { |
| formatter: 'year', |
| value: 3600000 * 24 * 380 |
| } |
| ]; |
| function getAutoFormatter(min, max, splitNumber) { |
| splitNumber = splitNumber > 1 ? splitNumber : 2; |
| var curValue; |
| var totalGap; |
| var formatter; |
| var gapValue; |
| for (var i = 0, l = _timeGap.length; i < l; i++) { |
| curValue = _timeGap[i].value; |
| totalGap = Math.ceil(max / curValue) * curValue - Math.floor(min / curValue) * curValue; |
| if (Math.round(totalGap / curValue) <= splitNumber * 1.2) { |
| formatter = _timeGap[i].formatter; |
| gapValue = _timeGap[i].value; |
| break; |
| } |
| } |
| if (formatter == null) { |
| formatter = 'year'; |
| curValue = 3600000 * 24 * 367; |
| totalGap = Math.ceil(max / curValue) * curValue - Math.floor(min / curValue) * curValue; |
| gapValue = Math.round(totalGap / (splitNumber - 1) / curValue) * curValue; |
| } |
| return { |
| formatter: formatter, |
| gapValue: gapValue |
| }; |
| } |
| function s2d(v) { |
| return v < 10 ? '0' + v : v; |
| } |
| function format(formatter, value) { |
| if (formatter == 'week' || formatter == 'month' || formatter == 'quarter' || formatter == 'half-year' || formatter == 'year') { |
| formatter = 'MM - dd\nyyyy'; |
| } |
| var date = getNewDate(value); |
| var y = date.getFullYear(); |
| var M = date.getMonth() + 1; |
| var d = date.getDate(); |
| var h = date.getHours(); |
| var m = date.getMinutes(); |
| var s = date.getSeconds(); |
| formatter = formatter.replace('MM', s2d(M)); |
| formatter = formatter.toLowerCase(); |
| formatter = formatter.replace('yyyy', y); |
| formatter = formatter.replace('yy', y % 100); |
| formatter = formatter.replace('dd', s2d(d)); |
| formatter = formatter.replace('d', d); |
| formatter = formatter.replace('hh', s2d(h)); |
| formatter = formatter.replace('h', h); |
| formatter = formatter.replace('mm', s2d(m)); |
| formatter = formatter.replace('m', m); |
| formatter = formatter.replace('ss', s2d(s)); |
| formatter = formatter.replace('s', s); |
| return formatter; |
| } |
| function nextMonday(value) { |
| value = getNewDate(value); |
| value.setDate(value.getDate() + 8 - value.getDay()); |
| return value; |
| } |
| function nextNthPerNmonth(value, nth, nmon) { |
| value = getNewDate(value); |
| value.setMonth(Math.ceil((value.getMonth() + 1) / nmon) * nmon); |
| value.setDate(nth); |
| return value; |
| } |
| function nextNthOnMonth(value, nth) { |
| return nextNthPerNmonth(value, nth, 1); |
| } |
| function nextNthOnQuarterYear(value, nth) { |
| return nextNthPerNmonth(value, nth, 3); |
| } |
| function nextNthOnHalfYear(value, nth) { |
| return nextNthPerNmonth(value, nth, 6); |
| } |
| function nextNthOnYear(value, nth) { |
| return nextNthPerNmonth(value, nth, 12); |
| } |
| function getNewDate(value) { |
| return value instanceof Date ? value : new Date(typeof value == 'string' ? value.replace(/-/g, '/') : value); |
| } |
| return { |
| getAutoFormatter: getAutoFormatter, |
| getNewDate: getNewDate, |
| format: format, |
| nextMonday: nextMonday, |
| nextNthPerNmonth: nextNthPerNmonth, |
| nextNthOnMonth: nextNthOnMonth, |
| nextNthOnQuarterYear: nextNthOnQuarterYear, |
| nextNthOnHalfYear: nextNthOnHalfYear, |
| nextNthOnYear: nextNthOnYear |
| }; |
| });define('echarts/util/smartSteps', [], function () { |
| var mySteps = [ |
| 10, |
| 20, |
| 25, |
| 50 |
| ]; |
| var mySections = [ |
| 4, |
| 5, |
| 6 |
| ]; |
| var custOpts; |
| var custSteps; |
| var custSecs; |
| var minLocked; |
| var maxLocked; |
| var MT = Math; |
| var MATH_ROUND = MT.round; |
| var MATH_FLOOR = MT.floor; |
| var MATH_CEIL = MT.ceil; |
| var MATH_ABS = MT.abs; |
| function MATH_LOG(n) { |
| return MT.log(MATH_ABS(n)) / MT.LN10; |
| } |
| function MATH_POW(n) { |
| return MT.pow(10, n); |
| } |
| function MATH_ISINT(n) { |
| return n === MATH_FLOOR(n); |
| } |
| function smartSteps(min, max, section, opts) { |
| custOpts = opts || {}; |
| custSteps = custOpts.steps || mySteps; |
| custSecs = custOpts.secs || mySections; |
| section = MATH_ROUND(+section || 0) % 99; |
| min = +min || 0; |
| max = +max || 0; |
| minLocked = maxLocked = 0; |
| if ('min' in custOpts) { |
| min = +custOpts.min || 0; |
| minLocked = 1; |
| } |
| if ('max' in custOpts) { |
| max = +custOpts.max || 0; |
| maxLocked = 1; |
| } |
| if (min > max) { |
| max = [ |
| min, |
| min = max |
| ][0]; |
| } |
| var span = max - min; |
| if (minLocked && maxLocked) { |
| return bothLocked(min, max, section); |
| } |
| if (span < (section || 5)) { |
| if (MATH_ISINT(min) && MATH_ISINT(max)) { |
| return forInteger(min, max, section); |
| } else if (span === 0) { |
| return forSpan0(min, max, section); |
| } |
| } |
| return coreCalc(min, max, section); |
| } |
| function makeResult(newMin, newMax, section, expon) { |
| expon = expon || 0; |
| var expStep = expNum((newMax - newMin) / section, -1); |
| var expMin = expNum(newMin, -1, 1); |
| var expMax = expNum(newMax, -1); |
| var minExp = MT.min(expStep.e, expMin.e, expMax.e); |
| if (expMin.c === 0) { |
| minExp = MT.min(expStep.e, expMax.e); |
| } else if (expMax.c === 0) { |
| minExp = MT.min(expStep.e, expMin.e); |
| } |
| expFixTo(expStep, { |
| c: 0, |
| e: minExp |
| }); |
| expFixTo(expMin, expStep, 1); |
| expFixTo(expMax, expStep); |
| expon += minExp; |
| newMin = expMin.c; |
| newMax = expMax.c; |
| var step = (newMax - newMin) / section; |
| var zoom = MATH_POW(expon); |
| var fixTo = 0; |
| var points = []; |
| for (var i = section + 1; i--;) { |
| points[i] = (newMin + step * i) * zoom; |
| } |
| if (expon < 0) { |
| fixTo = decimals(zoom); |
| step = +(step * zoom).toFixed(fixTo); |
| newMin = +(newMin * zoom).toFixed(fixTo); |
| newMax = +(newMax * zoom).toFixed(fixTo); |
| for (var i = points.length; i--;) { |
| points[i] = points[i].toFixed(fixTo); |
| +points[i] === 0 && (points[i] = '0'); |
| } |
| } else { |
| newMin *= zoom; |
| newMax *= zoom; |
| step *= zoom; |
| } |
| custSecs = 0; |
| custSteps = 0; |
| custOpts = 0; |
| return { |
| min: newMin, |
| max: newMax, |
| secs: section, |
| step: step, |
| fix: fixTo, |
| exp: expon, |
| pnts: points |
| }; |
| } |
| function expNum(num, digit, byFloor) { |
| digit = MATH_ROUND(digit % 10) || 2; |
| if (digit < 0) { |
| if (MATH_ISINT(num)) { |
| digit = ('' + MATH_ABS(num)).replace(/0+$/, '').length || 1; |
| } else { |
| num = num.toFixed(15).replace(/0+$/, ''); |
| digit = num.replace('.', '').replace(/^[-0]+/, '').length; |
| num = +num; |
| } |
| } |
| var expon = MATH_FLOOR(MATH_LOG(num)) - digit + 1; |
| var cNum = +(num * MATH_POW(-expon)).toFixed(15) || 0; |
| cNum = byFloor ? MATH_FLOOR(cNum) : MATH_CEIL(cNum); |
| !cNum && (expon = 0); |
| if (('' + MATH_ABS(cNum)).length > digit) { |
| expon += 1; |
| cNum /= 10; |
| } |
| return { |
| c: cNum, |
| e: expon |
| }; |
| } |
| function expFixTo(expnum1, expnum2, byFloor) { |
| var deltaExp = expnum2.e - expnum1.e; |
| if (deltaExp) { |
| expnum1.e += deltaExp; |
| expnum1.c *= MATH_POW(-deltaExp); |
| expnum1.c = byFloor ? MATH_FLOOR(expnum1.c) : MATH_CEIL(expnum1.c); |
| } |
| } |
| function expFixMin(expnum1, expnum2, byFloor) { |
| if (expnum1.e < expnum2.e) { |
| expFixTo(expnum2, expnum1, byFloor); |
| } else { |
| expFixTo(expnum1, expnum2, byFloor); |
| } |
| } |
| function getCeil(num, rounds) { |
| rounds = rounds || mySteps; |
| num = expNum(num); |
| var cNum = num.c; |
| var i = 0; |
| while (cNum > rounds[i]) { |
| i++; |
| } |
| if (!rounds[i]) { |
| cNum /= 10; |
| num.e += 1; |
| i = 0; |
| while (cNum > rounds[i]) { |
| i++; |
| } |
| } |
| num.c = rounds[i]; |
| return num; |
| } |
| function coreCalc(min, max, section) { |
| var step; |
| var secs = section || +custSecs.slice(-1); |
| var expStep = getCeil((max - min) / secs, custSteps); |
| var expSpan = expNum(max - min); |
| var expMin = expNum(min, -1, 1); |
| var expMax = expNum(max, -1); |
| expFixTo(expSpan, expStep); |
| expFixTo(expMin, expStep, 1); |
| expFixTo(expMax, expStep); |
| if (!section) { |
| secs = look4sections(expMin, expMax); |
| } else { |
| step = look4step(expMin, expMax, secs); |
| } |
| if (MATH_ISINT(min) && MATH_ISINT(max) && min * max >= 0) { |
| if (max - min < secs) { |
| return forInteger(min, max, secs); |
| } |
| secs = tryForInt(min, max, section, expMin, expMax, secs); |
| } |
| var arrMM = cross0(min, max, expMin.c, expMax.c); |
| expMin.c = arrMM[0]; |
| expMax.c = arrMM[1]; |
| if (minLocked || maxLocked) { |
| singleLocked(min, max, expMin, expMax); |
| } |
| return makeResult(expMin.c, expMax.c, secs, expMax.e); |
| } |
| function look4sections(expMin, expMax) { |
| var section; |
| var tmpStep, tmpMin, tmpMax; |
| var reference = []; |
| for (var i = custSecs.length; i--;) { |
| section = custSecs[i]; |
| tmpStep = getCeil((expMax.c - expMin.c) / section, custSteps); |
| tmpStep = tmpStep.c * MATH_POW(tmpStep.e); |
| tmpMin = MATH_FLOOR(expMin.c / tmpStep) * tmpStep; |
| tmpMax = MATH_CEIL(expMax.c / tmpStep) * tmpStep; |
| reference[i] = { |
| min: tmpMin, |
| max: tmpMax, |
| step: tmpStep, |
| span: tmpMax - tmpMin |
| }; |
| } |
| reference.sort(function (a, b) { |
| var delta = a.span - b.span; |
| if (delta === 0) { |
| delta = a.step - b.step; |
| } |
| return delta; |
| }); |
| reference = reference[0]; |
| section = reference.span / reference.step; |
| expMin.c = reference.min; |
| expMax.c = reference.max; |
| return section < 3 ? section * 2 : section; |
| } |
| function look4step(expMin, expMax, secs) { |
| var span; |
| var tmpMax; |
| var tmpMin = expMax.c; |
| var tmpStep = (expMax.c - expMin.c) / secs - 1; |
| while (tmpMin > expMin.c) { |
| tmpStep = getCeil(tmpStep + 1, custSteps); |
| tmpStep = tmpStep.c * MATH_POW(tmpStep.e); |
| span = tmpStep * secs; |
| tmpMax = MATH_CEIL(expMax.c / tmpStep) * tmpStep; |
| tmpMin = tmpMax - span; |
| } |
| var deltaMin = expMin.c - tmpMin; |
| var deltaMax = tmpMax - expMax.c; |
| var deltaDelta = deltaMin - deltaMax; |
| if (deltaDelta > tmpStep * 1.1) { |
| deltaDelta = MATH_ROUND(deltaDelta / tmpStep / 2) * tmpStep; |
| tmpMin += deltaDelta; |
| tmpMax += deltaDelta; |
| } |
| expMin.c = tmpMin; |
| expMax.c = tmpMax; |
| return tmpStep; |
| } |
| function tryForInt(min, max, section, expMin, expMax, secs) { |
| var span = expMax.c - expMin.c; |
| var step = span / secs * MATH_POW(expMax.e); |
| if (!MATH_ISINT(step)) { |
| step = MATH_FLOOR(step); |
| span = step * secs; |
| if (span < max - min) { |
| step += 1; |
| span = step * secs; |
| if (!section && step * (secs - 1) >= max - min) { |
| secs -= 1; |
| span = step * secs; |
| } |
| } |
| if (span >= max - min) { |
| var delta = span - (max - min); |
| expMin.c = MATH_ROUND(min - delta / 2); |
| expMax.c = MATH_ROUND(max + delta / 2); |
| expMin.e = 0; |
| expMax.e = 0; |
| } |
| } |
| return secs; |
| } |
| function forInteger(min, max, section) { |
| section = section || 5; |
| if (minLocked) { |
| max = min + section; |
| } else if (maxLocked) { |
| min = max - section; |
| } else { |
| var delta = section - (max - min); |
| var newMin = MATH_ROUND(min - delta / 2); |
| var newMax = MATH_ROUND(max + delta / 2); |
| var arrMM = cross0(min, max, newMin, newMax); |
| min = arrMM[0]; |
| max = arrMM[1]; |
| } |
| return makeResult(min, max, section); |
| } |
| function forSpan0(min, max, section) { |
| section = section || 5; |
| var delta = MT.min(MATH_ABS(max / section), section) / 2.1; |
| if (minLocked) { |
| max = min + delta; |
| } else if (maxLocked) { |
| min = max - delta; |
| } else { |
| min = min - delta; |
| max = max + delta; |
| } |
| return coreCalc(min, max, section); |
| } |
| function cross0(min, max, newMin, newMax) { |
| if (min >= 0 && newMin < 0) { |
| newMax -= newMin; |
| newMin = 0; |
| } else if (max <= 0 && newMax > 0) { |
| newMin -= newMax; |
| newMax = 0; |
| } |
| return [ |
| newMin, |
| newMax |
| ]; |
| } |
| function decimals(num) { |
| num = (+num).toFixed(15).split('.'); |
| return num.pop().replace(/0+$/, '').length; |
| } |
| function singleLocked(min, max, emin, emax) { |
| if (minLocked) { |
| var expMin = expNum(min, 4, 1); |
| if (emin.e - expMin.e > 6) { |
| expMin = { |
| c: 0, |
| e: emin.e |
| }; |
| } |
| expFixMin(emin, expMin); |
| expFixMin(emax, expMin); |
| emax.c += expMin.c - emin.c; |
| emin.c = expMin.c; |
| } else if (maxLocked) { |
| var expMax = expNum(max, 4); |
| if (emax.e - expMax.e > 6) { |
| expMax = { |
| c: 0, |
| e: emax.e |
| }; |
| } |
| expFixMin(emin, expMax); |
| expFixMin(emax, expMax); |
| emin.c += expMax.c - emax.c; |
| emax.c = expMax.c; |
| } |
| } |
| function bothLocked(min, max, section) { |
| var trySecs = section ? [section] : custSecs; |
| var span = max - min; |
| if (span === 0) { |
| max = expNum(max, 3); |
| section = trySecs[0]; |
| max.c = MATH_ROUND(max.c + section / 2); |
| return makeResult(max.c - section, max.c, section, max.e); |
| } |
| if (MATH_ABS(max / span) < 0.000001) { |
| max = 0; |
| } |
| if (MATH_ABS(min / span) < 0.000001) { |
| min = 0; |
| } |
| var step, deltaSpan, score; |
| var scoreS = [ |
| [ |
| 5, |
| 10 |
| ], |
| [ |
| 10, |
| 2 |
| ], |
| [ |
| 50, |
| 10 |
| ], |
| [ |
| 100, |
| 2 |
| ] |
| ]; |
| var reference = []; |
| var debugLog = []; |
| var expSpan = expNum(max - min, 3); |
| var expMin = expNum(min, -1, 1); |
| var expMax = expNum(max, -1); |
| expFixTo(expMin, expSpan, 1); |
| expFixTo(expMax, expSpan); |
| span = expMax.c - expMin.c; |
| expSpan.c = span; |
| for (var i = trySecs.length; i--;) { |
| section = trySecs[i]; |
| step = MATH_CEIL(span / section); |
| deltaSpan = step * section - span; |
| score = (deltaSpan + 3) * 3; |
| score += (section - trySecs[0] + 2) * 2; |
| if (section % 5 === 0) { |
| score -= 10; |
| } |
| for (var j = scoreS.length; j--;) { |
| if (step % scoreS[j][0] === 0) { |
| score /= scoreS[j][1]; |
| } |
| } |
| debugLog[i] = [ |
| section, |
| step, |
| deltaSpan, |
| score |
| ].join(); |
| reference[i] = { |
| secs: section, |
| step: step, |
| delta: deltaSpan, |
| score: score |
| }; |
| } |
| reference.sort(function (a, b) { |
| return a.score - b.score; |
| }); |
| reference = reference[0]; |
| expMin.c = MATH_ROUND(expMin.c - reference.delta / 2); |
| expMax.c = MATH_ROUND(expMax.c + reference.delta / 2); |
| return makeResult(expMin.c, expMax.c, reference.secs, expSpan.e); |
| } |
| return smartSteps; |
| });define('echarts/util/smartLogSteps', [ |
| 'require', |
| './number' |
| ], function (require) { |
| var number = require('./number'); |
| var Mt = Math; |
| var mathLog = Mt.log; |
| var mathPow = Mt.pow; |
| var mathAbs = Mt.abs; |
| var mathCeil = Mt.ceil; |
| var mathFloor = Mt.floor; |
| var LOG_BASE = Mt.E; |
| var LN10 = Mt.LN10; |
| var LN2 = Mt.LN2; |
| var LN2D10 = LN2 / LN10; |
| var EPSILON = 1e-9; |
| var DEFAULT_SPLIT_NUMBER = 5; |
| var MIN_BASE_10_SPLIT_NUMBER = 2; |
| var SUPERSCRIPTS = { |
| '0': '⁰', |
| '1': '¹', |
| '2': '²', |
| '3': '³', |
| '4': '⁴', |
| '5': '⁵', |
| '6': '⁶', |
| '7': '⁷', |
| '8': '⁸', |
| '9': '⁹', |
| '-': '⁻' |
| }; |
| var logPositive; |
| var logLabelBase; |
| var logLabelMode; |
| var lnBase; |
| var custOpts; |
| var splitNumber; |
| var logMappingOffset; |
| var absMin; |
| var absMax; |
| var tickList; |
| function smartLogSteps(opts) { |
| clearStaticVariables(); |
| custOpts = opts || {}; |
| reformSetting(); |
| makeTicksList(); |
| return [ |
| makeResult(), |
| clearStaticVariables() |
| ][0]; |
| } |
| function clearStaticVariables() { |
| logPositive = custOpts = logMappingOffset = lnBase = absMin = absMax = splitNumber = tickList = logLabelBase = logLabelMode = null; |
| } |
| function reformSetting() { |
| logLabelBase = custOpts.logLabelBase; |
| if (logLabelBase == null) { |
| logLabelMode = 'plain'; |
| logLabelBase = 10; |
| lnBase = LN10; |
| } else { |
| logLabelBase = +logLabelBase; |
| if (logLabelBase < 1) { |
| logLabelBase = 10; |
| } |
| logLabelMode = 'exponent'; |
| lnBase = mathLog(logLabelBase); |
| } |
| splitNumber = custOpts.splitNumber; |
| splitNumber == null && (splitNumber = DEFAULT_SPLIT_NUMBER); |
| var dataMin = parseFloat(custOpts.dataMin); |
| var dataMax = parseFloat(custOpts.dataMax); |
| if (!isFinite(dataMin) && !isFinite(dataMax)) { |
| dataMin = dataMax = 1; |
| } else if (!isFinite(dataMin)) { |
| dataMin = dataMax; |
| } else if (!isFinite(dataMax)) { |
| dataMax = dataMin; |
| } else if (dataMin > dataMax) { |
| dataMax = [ |
| dataMin, |
| dataMin = dataMax |
| ][0]; |
| } |
| logPositive = custOpts.logPositive; |
| if (logPositive == null) { |
| logPositive = dataMax > 0 || dataMin === 0; |
| } |
| absMin = logPositive ? dataMin : -dataMax; |
| absMax = logPositive ? dataMax : -dataMin; |
| absMin < EPSILON && (absMin = EPSILON); |
| absMax < EPSILON && (absMax = EPSILON); |
| } |
| function makeTicksList() { |
| tickList = []; |
| var maxDataLog = fixAccurate(mathLog(absMax) / lnBase); |
| var minDataLog = fixAccurate(mathLog(absMin) / lnBase); |
| var maxExpon = mathCeil(maxDataLog); |
| var minExpon = mathFloor(minDataLog); |
| var spanExpon = maxExpon - minExpon; |
| var spanDataLog = maxDataLog - minDataLog; |
| if (logLabelMode === 'exponent') { |
| baseAnalysis(); |
| } else { |
| !(spanExpon <= MIN_BASE_10_SPLIT_NUMBER && splitNumber > MIN_BASE_10_SPLIT_NUMBER) ? baseAnalysis() : detailAnalysis(); |
| } |
| function baseAnalysis() { |
| if (spanExpon < splitNumber) { |
| splitNumber = spanExpon; |
| } |
| var stepExpon = mathFloor(fixAccurate(spanExpon / splitNumber)); |
| var splitNumberAdjust = mathCeil(fixAccurate(spanExpon / stepExpon)); |
| var spanExponAdjust = stepExpon * splitNumberAdjust; |
| var halfDiff = (spanExponAdjust - spanDataLog) / 2; |
| var minExponAdjust = mathFloor(fixAccurate(minDataLog - halfDiff)); |
| if (aroundZero(minExponAdjust - minDataLog)) { |
| minExponAdjust -= 1; |
| } |
| logMappingOffset = -minExponAdjust * lnBase; |
| for (var n = minExponAdjust; n - stepExpon <= maxDataLog; n += stepExpon) { |
| tickList.push(mathPow(logLabelBase, n)); |
| } |
| } |
| function detailAnalysis() { |
| var minDecimal = toDecimalFrom4Hex(minExpon, 0); |
| var endDecimal = minDecimal + 2; |
| while (minDecimal < endDecimal && toH(minDecimal + 1) + toK(minDecimal + 1) * LN2D10 < minDataLog) { |
| minDecimal++; |
| } |
| var maxDecimal = toDecimalFrom4Hex(maxExpon, 0); |
| var endDecimal = maxDecimal - 2; |
| while (maxDecimal > endDecimal && toH(maxDecimal - 1) + toK(maxDecimal - 1) * LN2D10 > maxDataLog) { |
| maxDecimal--; |
| } |
| logMappingOffset = -(toH(minDecimal) * LN10 + toK(minDecimal) * LN2); |
| for (var i = minDecimal; i <= maxDecimal; i++) { |
| var h = toH(i); |
| var k = toK(i); |
| tickList.push(mathPow(10, h) * mathPow(2, k)); |
| } |
| } |
| function toDecimalFrom4Hex(h, k) { |
| return h * 3 + k; |
| } |
| function toK(decimal) { |
| return decimal - toH(decimal) * 3; |
| } |
| function toH(decimal) { |
| return mathFloor(fixAccurate(decimal / 3)); |
| } |
| } |
| function makeResult() { |
| var resultTickList = []; |
| for (var i = 0, len = tickList.length; i < len; i++) { |
| resultTickList[i] = (logPositive ? 1 : -1) * tickList[i]; |
| } |
| !logPositive && resultTickList.reverse(); |
| var dataMappingMethods = makeDataMappingMethods(); |
| var value2Coord = dataMappingMethods.value2Coord; |
| var newDataMin = value2Coord(resultTickList[0]); |
| var newDataMax = value2Coord(resultTickList[resultTickList.length - 1]); |
| if (newDataMin === newDataMax) { |
| newDataMin -= 1; |
| newDataMax += 1; |
| } |
| return { |
| dataMin: newDataMin, |
| dataMax: newDataMax, |
| tickList: resultTickList, |
| logPositive: logPositive, |
| labelFormatter: makeLabelFormatter(), |
| dataMappingMethods: dataMappingMethods |
| }; |
| } |
| function makeLabelFormatter() { |
| if (logLabelMode === 'exponent') { |
| var myLogLabelBase = logLabelBase; |
| var myLnBase = lnBase; |
| return function (value) { |
| if (!isFinite(parseFloat(value))) { |
| return ''; |
| } |
| var sign = ''; |
| if (value < 0) { |
| value = -value; |
| sign = '-'; |
| } |
| return sign + myLogLabelBase + makeSuperscriptExponent(mathLog(value) / myLnBase); |
| }; |
| } else { |
| return function (value) { |
| if (!isFinite(parseFloat(value))) { |
| return ''; |
| } |
| return number.addCommas(formatNumber(value)); |
| }; |
| } |
| } |
| function makeDataMappingMethods() { |
| var myLogPositive = logPositive; |
| var myLogMappingOffset = logMappingOffset; |
| return { |
| value2Coord: function (x) { |
| if (x == null || isNaN(x) || !isFinite(x)) { |
| return x; |
| } |
| x = parseFloat(x); |
| if (!isFinite(x)) { |
| x = EPSILON; |
| } else if (myLogPositive && x < EPSILON) { |
| x = EPSILON; |
| } else if (!myLogPositive && x > -EPSILON) { |
| x = -EPSILON; |
| } |
| x = mathAbs(x); |
| return (myLogPositive ? 1 : -1) * (mathLog(x) + myLogMappingOffset); |
| }, |
| coord2Value: function (x) { |
| if (x == null || isNaN(x) || !isFinite(x)) { |
| return x; |
| } |
| x = parseFloat(x); |
| if (!isFinite(x)) { |
| x = EPSILON; |
| } |
| return myLogPositive ? mathPow(LOG_BASE, x - myLogMappingOffset) : -mathPow(LOG_BASE, -x + myLogMappingOffset); |
| } |
| }; |
| } |
| function fixAccurate(result) { |
| return +Number(+result).toFixed(14); |
| } |
| function formatNumber(num) { |
| return Number(num).toFixed(15).replace(/\.?0*$/, ''); |
| } |
| function makeSuperscriptExponent(exponent) { |
| exponent = formatNumber(Math.round(exponent)); |
| var result = []; |
| for (var i = 0, len = exponent.length; i < len; i++) { |
| var cha = exponent.charAt(i); |
| result.push(SUPERSCRIPTS[cha] || ''); |
| } |
| return result.join(''); |
| } |
| function aroundZero(val) { |
| return val > -EPSILON && val < EPSILON; |
| } |
| return smartLogSteps; |
| }); |