liangyancui
/
project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
project/node_modules/echarts-liquidfill/dist/echarts-liquidfill.js

1688 lines
48 KiB
JavaScript
Raw Normal View History

init project
2024-07-14 15:48:34 +08:00
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("echarts"));
else if(typeof define === 'function' && define.amd)
define(["echarts"], factory);
else if(typeof exports === 'object')
exports["echarts-liquidfill"] = factory(require("echarts"));
else
root["echarts-liquidfill"] = factory(root["echarts"]);
})(self, function(__WEBPACK_EXTERNAL_MODULE_echarts_lib_echarts__) {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./index.js":
/*!******************************!*\
!*** ./index.js + 6 modules ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external "echarts"
var external_echarts_ = __webpack_require__("echarts/lib/echarts");
;// CONCATENATED MODULE: ./src/liquidFillSeries.js
external_echarts_.extendSeriesModel({
type: 'series.liquidFill',
optionUpdated: function () {
var option = this.option;
option.gridSize = Math.max(Math.floor(option.gridSize), 4);
},
getInitialData: function (option, ecModel) {
var dimensions = external_echarts_.helper.createDimensions(option.data, {
coordDimensions: ['value']
});
var list = new external_echarts_.List(dimensions, this);
list.initData(option.data);
return list;
},
defaultOption: {
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
center: ['50%', '50%'],
radius: '50%',
amplitude: '8%',
waveLength: '80%',
phase: 'auto',
period: 'auto',
direction: 'right',
shape: 'circle',
waveAnimation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 2000,
animationDurationUpdate: 1000,
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: 'none',
borderColor: '#294D99',
borderWidth: 8,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
backgroundStyle: {
color: '#E3F7FF'
},
itemStyle: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle',
position: 'inside'
},
emphasis: {
itemStyle: {
opacity: 0.8
}
}
}
});
;// CONCATENATED MODULE: ./node_modules/zrender/lib/core/util.js
var BUILTIN_OBJECT = {
'[object Function]': true,
'[object RegExp]': true,
'[object Date]': true,
'[object Error]': true,
'[object CanvasGradient]': true,
'[object CanvasPattern]': true,
'[object Image]': true,
'[object Canvas]': true
};
var TYPED_ARRAY = {
'[object Int8Array]': true,
'[object Uint8Array]': true,
'[object Uint8ClampedArray]': true,
'[object Int16Array]': true,
'[object Uint16Array]': true,
'[object Int32Array]': true,
'[object Uint32Array]': true,
'[object Float32Array]': true,
'[object Float64Array]': true
};
var objToString = Object.prototype.toString;
var arrayProto = Array.prototype;
var nativeForEach = arrayProto.forEach;
var nativeFilter = arrayProto.filter;
var nativeSlice = arrayProto.slice;
var nativeMap = arrayProto.map;
var ctorFunction = function () { }.constructor;
var protoFunction = ctorFunction ? ctorFunction.prototype : null;
var methods = {};
function $override(name, fn) {
methods[name] = fn;
}
var idStart = 0x0907;
function guid() {
return idStart++;
}
function logError() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (typeof console !== 'undefined') {
console.error.apply(console, args);
}
}
function clone(source) {
if (source == null || typeof source !== 'object') {
return source;
}
var result = source;
var typeStr = objToString.call(source);
if (typeStr === '[object Array]') {
if (!isPrimitive(source)) {
result = [];
for (var i = 0, len = source.length; i < len; i++) {
result[i] = clone(source[i]);
}
}
}
else if (TYPED_ARRAY[typeStr]) {
if (!isPrimitive(source)) {
var Ctor = source.constructor;
if (Ctor.from) {
result = Ctor.from(source);
}
else {
result = new Ctor(source.length);
for (var i = 0, len = source.length; i < len; i++) {
result[i] = clone(source[i]);
}
}
}
}
else if (!BUILTIN_OBJECT[typeStr] && !isPrimitive(source) && !isDom(source)) {
result = {};
for (var key in source) {
if (source.hasOwnProperty(key)) {
result[key] = clone(source[key]);
}
}
}
return result;
}
function merge(target, source, overwrite) {
if (!isObject(source) || !isObject(target)) {
return overwrite ? clone(source) : target;
}
for (var key in source) {
if (source.hasOwnProperty(key)) {
var targetProp = target[key];
var sourceProp = source[key];
if (isObject(sourceProp)
&& isObject(targetProp)
&& !isArray(sourceProp)
&& !isArray(targetProp)
&& !isDom(sourceProp)
&& !isDom(targetProp)
&& !isBuiltInObject(sourceProp)
&& !isBuiltInObject(targetProp)
&& !isPrimitive(sourceProp)
&& !isPrimitive(targetProp)) {
merge(targetProp, sourceProp, overwrite);
}
else if (overwrite || !(key in target)) {
target[key] = clone(source[key]);
}
}
}
return target;
}
function mergeAll(targetAndSources, overwrite) {
var result = targetAndSources[0];
for (var i = 1, len = targetAndSources.length; i < len; i++) {
result = merge(result, targetAndSources[i], overwrite);
}
return result;
}
function extend(target, source) {
if (Object.assign) {
Object.assign(target, source);
}
else {
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
function defaults(target, source, overlay) {
var keysArr = keys(source);
for (var i = 0; i < keysArr.length; i++) {
var key = keysArr[i];
if ((overlay ? source[key] != null : target[key] == null)) {
target[key] = source[key];
}
}
return target;
}
var createCanvas = function () {
return methods.createCanvas();
};
methods.createCanvas = function () {
return document.createElement('canvas');
};
function indexOf(array, value) {
if (array) {
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) {
if (clazzPrototype.hasOwnProperty(prop)) {
clazz.prototype[prop] = clazzPrototype[prop];
}
}
clazz.prototype.constructor = clazz;
clazz.superClass = baseClazz;
}
function mixin(target, source, override) {
target = 'prototype' in target ? target.prototype : target;
source = 'prototype' in source ? source.prototype : source;
if (Object.getOwnPropertyNames) {
var keyList = Object.getOwnPropertyNames(source);
for (var i = 0; i < keyList.length; i++) {
var key = keyList[i];
if (key !== 'constructor') {
if ((override ? source[key] != null : target[key] == null)) {
target[key] = source[key];
}
}
}
}
else {
defaults(target, source, override);
}
}
function isArrayLike(data) {
if (!data) {
return false;
}
if (typeof data === 'string') {
return false;
}
return typeof data.length === 'number';
}
function each(arr, cb, context) {
if (!(arr && cb)) {
return;
}
if (arr.forEach && arr.forEach === nativeForEach) {
arr.forEach(cb, context);
}
else if (arr.length === +arr.length) {
for (var i = 0, len = arr.length; i < len; i++) {
cb.call(context, arr[i], i, arr);
}
}
else {
for (var key in arr) {
if (arr.hasOwnProperty(key)) {
cb.call(context, arr[key], key, arr);
}
}
}
}
function map(arr, cb, context) {
if (!arr) {
return [];
}
if (!cb) {
return slice(arr);
}
if (arr.map && arr.map === nativeMap) {
return arr.map(cb, context);
}
else {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
result.push(cb.call(context, arr[i], i, arr));
}
return result;
}
}
function reduce(arr, cb, memo, context) {
if (!(arr && cb)) {
return;
}
for (var i = 0, len = arr.length; i < len; i++) {
memo = cb.call(context, memo, arr[i], i, arr);
}
return memo;
}
function filter(arr, cb, context) {
if (!arr) {
return [];
}
if (!cb) {
return slice(arr);
}
if (arr.filter && arr.filter === nativeFilter) {
return arr.filter(cb, context);
}
else {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (cb.call(context, arr[i], i, arr)) {
result.push(arr[i]);
}
}
return result;
}
}
function find(arr, cb, context) {
if (!(arr && cb)) {
return;
}
for (var i = 0, len = arr.length; i < len; i++) {
if (cb.call(context, arr[i], i, arr)) {
return arr[i];
}
}
}
function keys(obj) {
if (!obj) {
return [];
}
if (Object.keys) {
return Object.keys(obj);
}
var keyList = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keyList.push(key);
}
}
return keyList;
}
function bindPolyfill(func, context) {
var args = [];
for (var _i = 2; _i < arguments.length; _i++) {
args[_i - 2] = arguments[_i];
}
return function () {
return func.apply(context, args.concat(nativeSlice.call(arguments)));
};
}
var bind = (protoFunction && isFunction(protoFunction.bind))
? protoFunction.call.bind(protoFunction.bind)
: bindPolyfill;
function curry(func) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return function () {
return func.apply(this, args.concat(nativeSlice.call(arguments)));
};
}
function isArray(value) {
if (Array.isArray) {
return Array.isArray(value);
}
return objToString.call(value) === '[object Array]';
}
function isFunction(value) {
return typeof value === 'function';
}
function isString(value) {
return typeof value === 'string';
}
function isStringSafe(value) {
return objToString.call(value) === '[object String]';
}
function isNumber(value) {
return typeof value === 'number';
}
function isObject(value) {
var type = typeof value;
return type === 'function' || (!!value && type === 'object');
}
function isBuiltInObject(value) {
return !!BUILTIN_OBJECT[objToString.call(value)];
}
function isTypedArray(value) {
return !!TYPED_ARRAY[objToString.call(value)];
}
function isDom(value) {
return typeof value === 'object'
&& typeof value.nodeType === 'number'
&& typeof value.ownerDocument === 'object';
}
function isGradientObject(value) {
return value.colorStops != null;
}
function isPatternObject(value) {
return value.image != null;
}
function isRegExp(value) {
return objToString.call(value) === '[object RegExp]';
}
function eqNaN(value) {
return value !== value;
}
function retrieve() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
for (var i = 0, len = args.length; i < len; i++) {
if (args[i] != null) {
return args[i];
}
}
}
function retrieve2(value0, value1) {
return value0 != null
? value0
: value1;
}
function retrieve3(value0, value1, value2) {
return value0 != null
? value0
: value1 != null
? value1
: value2;
}
function slice(arr) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return nativeSlice.apply(arr, args);
}
function normalizeCssArray(val) {
if (typeof (val) === 'number') {
return [val, val, val, val];
}
var len = val.length;
if (len === 2) {
return [val[0], val[1], val[0], val[1]];
}
else if (len === 3) {
return [val[0], val[1], val[2], val[1]];
}
return val;
}
function assert(condition, message) {
if (!condition) {
throw new Error(message);
}
}
function trim(str) {
if (str == null) {
return null;
}
else if (typeof str.trim === 'function') {
return str.trim();
}
else {
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
}
var primitiveKey = '__ec_primitive__';
function setAsPrimitive(obj) {
obj[primitiveKey] = true;
}
function isPrimitive(obj) {
return obj[primitiveKey];
}
var HashMap = (function () {
function HashMap(obj) {
this.data = {};
var isArr = isArray(obj);
this.data = {};
var thisMap = this;
(obj instanceof HashMap)
? obj.each(visit)
: (obj && each(obj, visit));
function visit(value, key) {
isArr ? thisMap.set(value, key) : thisMap.set(key, value);
}
}
HashMap.prototype.get = function (key) {
return this.data.hasOwnProperty(key) ? this.data[key] : null;
};
HashMap.prototype.set = function (key, value) {
return (this.data[key] = value);
};
HashMap.prototype.each = function (cb, context) {
for (var key in this.data) {
if (this.data.hasOwnProperty(key)) {
cb.call(context, this.data[key], key);
}
}
};
HashMap.prototype.keys = function () {
return keys(this.data);
};
HashMap.prototype.removeKey = function (key) {
delete this.data[key];
};
return HashMap;
}());
function createHashMap(obj) {
return new HashMap(obj);
}
function concatArray(a, b) {
var newArray = new a.constructor(a.length + b.length);
for (var i = 0; i < a.length; i++) {
newArray[i] = a[i];
}
var offset = a.length;
for (var i = 0; i < b.length; i++) {
newArray[i + offset] = b[i];
}
return newArray;
}
function createObject(proto, properties) {
var obj;
if (Object.create) {
obj = Object.create(proto);
}
else {
var StyleCtor = function () { };
StyleCtor.prototype = proto;
obj = new StyleCtor();
}
if (properties) {
extend(obj, properties);
}
return obj;
}
function hasOwn(own, prop) {
return own.hasOwnProperty(prop);
}
function noop() { }
;// CONCATENATED MODULE: ./node_modules/echarts/lib/util/number.js
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* AUTO-GENERATED FILE. DO NOT MODIFY.
*/
var RADIAN_EPSILON = 1e-4;
function _trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
function linearMap(val, domain, range, clamp) {
var subDomain = domain[1] - domain[0];
var subRange = range[1] - range[0];
if (subDomain === 0) {
return subRange === 0 ? range[0] : (range[0] + range[1]) / 2;
}
if (clamp) {
if (subDomain > 0) {
if (val <= domain[0]) {
return range[0];
} else if (val >= domain[1]) {
return range[1];
}
} else {
if (val >= domain[0]) {
return range[0];
} else if (val <= domain[1]) {
return range[1];
}
}
} else {
if (val === domain[0]) {
return range[0];
}
if (val === domain[1]) {
return range[1];
}
}
return (val - domain[0]) / subDomain * subRange + range[0];
}
function parsePercent(percent, all) {
switch (percent) {
case 'center':
case 'middle':
percent = '50%';
break;
case 'left':
case 'top':
percent = '0%';
break;
case 'right':
case 'bottom':
percent = '100%';
break;
}
if (typeof percent === 'string') {
if (_trim(percent).match(/%$/)) {
return parseFloat(percent) / 100 * all;
}
return parseFloat(percent);
}
return percent == null ? NaN : +percent;
}
function round(x, precision, returnStr) {
if (precision == null) {
precision = 10;
}
precision = Math.min(Math.max(0, precision), 20);
x = (+x).toFixed(precision);
return returnStr ? x : +x;
}
function asc(arr) {
arr.sort(function (a, b) {
return a - b;
});
return arr;
}
function getPrecision(val) {
val = +val;
if (isNaN(val)) {
return 0;
}
var e = 1;
var count = 0;
while (Math.round(val * e) / e !== val) {
e *= 10;
count++;
}
return count;
}
function getPrecisionSafe(val) {
var str = val.toString();
var eIndex = str.indexOf('e');
if (eIndex > 0) {
var precision = +str.slice(eIndex + 1);
return precision < 0 ? -precision : 0;
} else {
var dotIndex = str.indexOf('.');
return dotIndex < 0 ? 0 : str.length - 1 - dotIndex;
}
}
function getPixelPrecision(dataExtent, pixelExtent) {
var log = Math.log;
var LN10 = Math.LN10;
var dataQuantity = Math.floor(log(dataExtent[1] - dataExtent[0]) / LN10);
var sizeQuantity = Math.round(log(Math.abs(pixelExtent[1] - pixelExtent[0])) / LN10);
var precision = Math.min(Math.max(-dataQuantity + sizeQuantity, 0), 20);
return !isFinite(precision) ? 20 : precision;
}
function getPercentWithPrecision(valueList, idx, precision) {
if (!valueList[idx]) {
return 0;
}
var sum = reduce(valueList, function (acc, val) {
return acc + (isNaN(val) ? 0 : val);
}, 0);
if (sum === 0) {
return 0;
}
var digits = Math.pow(10, precision);
var votesPerQuota = map(valueList, function (val) {
return (isNaN(val) ? 0 : val) / sum * digits * 100;
});
var targetSeats = digits * 100;
var seats = map(votesPerQuota, function (votes) {
return Math.floor(votes);
});
var currentSum = reduce(seats, function (acc, val) {
return acc + val;
}, 0);
var remainder = map(votesPerQuota, function (votes, idx) {
return votes - seats[idx];
});
while (currentSum < targetSeats) {
var max = Number.NEGATIVE_INFINITY;
var maxId = null;
for (var i = 0, len = remainder.length; i < len; ++i) {
if (remainder[i] > max) {
max = remainder[i];
maxId = i;
}
}
++seats[maxId];
remainder[maxId] = 0;
++currentSum;
}
return seats[idx] / digits;
}
var MAX_SAFE_INTEGER = 9007199254740991;
function remRadian(radian) {
var pi2 = Math.PI * 2;
return (radian % pi2 + pi2) % pi2;
}
function isRadianAroundZero(val) {
return val > -RADIAN_EPSILON && val < RADIAN_EPSILON;
}
var TIME_REG = /^(?:(\d{4})(?:[-\/](\d{1,2})(?:[-\/](\d{1,2})(?:[T ](\d{1,2})(?::(\d{1,2})(?::(\d{1,2})(?:[.,](\d+))?)?)?(Z|[\+\-]\d\d:?\d\d)?)?)?)?)?$/;
function parseDate(value) {
if (value instanceof Date) {
return value;
} else if (typeof value === 'string') {
var match = TIME_REG.exec(value);
if (!match) {
return new Date(NaN);
}
if (!match[8]) {
return new Date(+match[1], +(match[2] || 1) - 1, +match[3] || 1, +match[4] || 0, +(match[5] || 0), +match[6] || 0, +match[7] || 0);
} else {
var hour = +match[4] || 0;
if (match[8].toUpperCase() !== 'Z') {
hour -= +match[8].slice(0, 3);
}
return new Date(Date.UTC(+match[1], +(match[2] || 1) - 1, +match[3] || 1, hour, +(match[5] || 0), +match[6] || 0, +match[7] || 0));
}
} else if (value == null) {
return new Date(NaN);
}
return new Date(Math.round(value));
}
function quantity(val) {
return Math.pow(10, quantityExponent(val));
}
function quantityExponent(val) {
if (val === 0) {
return 0;
}
var exp = Math.floor(Math.log(val) / Math.LN10);
if (val / Math.pow(10, exp) >= 10) {
exp++;
}
return exp;
}
function nice(val, round) {
var exponent = quantityExponent(val);
var exp10 = Math.pow(10, exponent);
var f = val / exp10;
var nf;
if (round) {
if (f < 1.5) {
nf = 1;
} else if (f < 2.5) {
nf = 2;
} else if (f < 4) {
nf = 3;
} else if (f < 7) {
nf = 5;
} else {
nf = 10;
}
} else {
if (f < 1) {
nf = 1;
} else if (f < 2) {
nf = 2;
} else if (f < 3) {
nf = 3;
} else if (f < 5) {
nf = 5;
} else {
nf = 10;
}
}
val = nf * exp10;
return exponent >= -20 ? +val.toFixed(exponent < 0 ? -exponent : 0) : val;
}
function quantile(ascArr, p) {
var H = (ascArr.length - 1) * p + 1;
var h = Math.floor(H);
var v = +ascArr[h - 1];
var e = H - h;
return e ? v + e * (ascArr[h] - v) : v;
}
function reformIntervals(list) {
list.sort(function (a, b) {
return littleThan(a, b, 0) ? -1 : 1;
});
var curr = -Infinity;
var currClose = 1;
for (var i = 0; i < list.length;) {
var interval = list[i].interval;
var close_1 = list[i].close;
for (var lg = 0; lg < 2; lg++) {
if (interval[lg] <= curr) {
interval[lg] = curr;
close_1[lg] = !lg ? 1 - currClose : 1;
}
curr = interval[lg];
currClose = close_1[lg];
}
if (interval[0] === interval[1] && close_1[0] * close_1[1] !== 1) {
list.splice(i, 1);
} else {
i++;
}
}
return list;
function littleThan(a, b, lg) {
return a.interval[lg] < b.interval[lg] || a.interval[lg] === b.interval[lg] && (a.close[lg] - b.close[lg] === (!lg ? 1 : -1) || !lg && littleThan(a, b, 1));
}
}
function numericToNumber(val) {
var valFloat = parseFloat(val);
return valFloat == val && (valFloat !== 0 || typeof val !== 'string' || val.indexOf('x') <= 0) ? valFloat : NaN;
}
function isNumeric(val) {
return !isNaN(numericToNumber(val));
}
function getRandomIdBase() {
return Math.round(Math.random() * 9);
}
function getGreatestCommonDividor(a, b) {
if (b === 0) {
return a;
}
return getGreatestCommonDividor(b, a % b);
}
function getLeastCommonMultiple(a, b) {
if (a == null) {
return b;
}
if (b == null) {
return a;
}
return a * b / getGreatestCommonDividor(a, b);
}
;// CONCATENATED MODULE: ./src/liquidFillShape.js
/* harmony default export */ const liquidFillShape = (external_echarts_.graphic.extendShape({
type: 'ec-liquid-fill',
shape: {
waveLength: 0,
radius: 0,
radiusY: 0,
cx: 0,
cy: 0,
waterLevel: 0,
amplitude: 0,
phase: 0,
inverse: false
},
buildPath: function (ctx, shape) {
if (shape.radiusY == null) {
shape.radiusY = shape.radius;
}
/**
* We define a sine wave having 4 waves, and make sure at least 8 curves
* is drawn. Otherwise, it may cause blank area for some waves when
* wave length is large enough.
*/
var curves = Math.max(
Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
8
);
// map phase to [-Math.PI * 2, 0]
while (shape.phase < -Math.PI * 2) {
shape.phase += Math.PI * 2;
}
while (shape.phase > 0) {
shape.phase -= Math.PI * 2;
}
var phase = shape.phase / Math.PI / 2 * shape.waveLength;
var left = shape.cx - shape.radius + phase - shape.radius * 2;
/**
* top-left corner as start point
*
* draws this point
* |
* \|/
* ~~~~~~~~
* | |
* +------+
*/
ctx.moveTo(left, shape.waterLevel);
/**
* top wave
*
* ~~~~~~~~ <- draws this sine wave
* | |
* +------+
*/
var waveRight = 0;
for (var c = 0; c < curves; ++c) {
var stage = c % 4;
var pos = getWaterPositions(c * shape.waveLength / 4, stage,
shape.waveLength, shape.amplitude);
ctx.bezierCurveTo(pos[0][0] + left, -pos[0][1] + shape.waterLevel,
pos[1][0] + left, -pos[1][1] + shape.waterLevel,
pos[2][0] + left, -pos[2][1] + shape.waterLevel);
if (c === curves - 1) {
waveRight = pos[2][0];
}
}
if (shape.inverse) {
/**
* top-right corner
* 2. draws this line
* |
* +------+
* 3. draws this line -> | | <- 1. draws this line
* ~~~~~~~~
*/
ctx.lineTo(waveRight + left, shape.cy - shape.radiusY);
ctx.lineTo(left, shape.cy - shape.radiusY);
ctx.lineTo(left, shape.waterLevel);
}
else {
/**
* top-right corner
*
* ~~~~~~~~
* 3. draws this line -> | | <- 1. draws this line
* +------+
* ^
* |
* 2. draws this line
*/
ctx.lineTo(waveRight + left, shape.cy + shape.radiusY);
ctx.lineTo(left, shape.cy + shape.radiusY);
ctx.lineTo(left, shape.waterLevel);
}
ctx.closePath();
}
}));
/**
* Using Bezier curves to fit sine wave.
* There is 4 control points for each curve of wave,
* which is at 1/4 wave length of the sine wave.
*
* The control points for a wave from (a) to (d) are a-b-c-d:
* c *----* d
* b *
* |
* ... a * ..................
*
* whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
*
* @param {number} x x position of the left-most point (a)
* @param {number} stage 0-3, stating which part of the wave it is
* @param {number} waveLength wave length of the sine wave
* @param {number} amplitude wave amplitude
*/
function getWaterPositions(x, stage, waveLength, amplitude) {
if (stage === 0) {
return [
[x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2],
[x + 1 / 2 * waveLength / Math.PI, amplitude],
[x + waveLength / 4, amplitude]
];
}
else if (stage === 1) {
return [
[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
amplitude],
[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
amplitude / 2],
[x + waveLength / 4, 0]
]
}
else if (stage === 2) {
return [
[x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2],
[x + 1 / 2 * waveLength / Math.PI, -amplitude],
[x + waveLength / 4, -amplitude]
]
}
else {
return [
[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
-amplitude],
[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
-amplitude / 2],
[x + waveLength / 4, 0]
]
}
}
;// CONCATENATED MODULE: ./src/liquidFillView.js
var liquidFillView_parsePercent = parsePercent;
function isPathSymbol(symbol) {
return symbol && symbol.indexOf('path://') === 0
}
external_echarts_.extendChartView({
type: 'liquidFill',
render: function (seriesModel, ecModel, api) {
var self = this;
var group = this.group;
group.removeAll();
var data = seriesModel.getData();
var itemModel = data.getItemModel(0);
var center = itemModel.get('center');
var radius = itemModel.get('radius');
var width = api.getWidth();
var height = api.getHeight();
var size = Math.min(width, height);
// itemStyle
var outlineDistance = 0;
var outlineBorderWidth = 0;
var showOutline = seriesModel.get('outline.show');
if (showOutline) {
outlineDistance = seriesModel.get('outline.borderDistance');
outlineBorderWidth = liquidFillView_parsePercent(
seriesModel.get('outline.itemStyle.borderWidth'), size
);
}
var cx = liquidFillView_parsePercent(center[0], width);
var cy = liquidFillView_parsePercent(center[1], height);
var outterRadius;
var innerRadius;
var paddingRadius;
var isFillContainer = false;
var symbol = seriesModel.get('shape');
if (symbol === 'container') {
// a shape that fully fills the container
isFillContainer = true;
outterRadius = [
width / 2,
height / 2
];
innerRadius = [
outterRadius[0] - outlineBorderWidth / 2,
outterRadius[1] - outlineBorderWidth / 2
];
paddingRadius = [
liquidFillView_parsePercent(outlineDistance, width),
liquidFillView_parsePercent(outlineDistance, height)
];
radius = [
Math.max(innerRadius[0] - paddingRadius[0], 0),
Math.max(innerRadius[1] - paddingRadius[1], 0)
];
}
else {
outterRadius = liquidFillView_parsePercent(radius, size) / 2;
innerRadius = outterRadius - outlineBorderWidth / 2;
paddingRadius = liquidFillView_parsePercent(outlineDistance, size);
radius = Math.max(innerRadius - paddingRadius, 0);
}
if (showOutline) {
var outline = getOutline();
outline.style.lineWidth = outlineBorderWidth;
group.add(getOutline());
}
var left = isFillContainer ? 0 : cx - radius;
var top = isFillContainer ? 0 : cy - radius;
var wavePath = null;
group.add(getBackground());
// each data item for a wave
var oldData = this._data;
var waves = [];
data.diff(oldData)
.add(function (idx) {
var wave = getWave(idx, false);
var waterLevel = wave.shape.waterLevel;
wave.shape.waterLevel = isFillContainer ? height / 2 : radius;
external_echarts_.graphic.initProps(wave, {
shape: {
waterLevel: waterLevel
}
}, seriesModel);
wave.z2 = 2;
setWaveAnimation(idx, wave, null);
group.add(wave);
data.setItemGraphicEl(idx, wave);
waves.push(wave);
})
.update(function (newIdx, oldIdx) {
var waveElement = oldData.getItemGraphicEl(oldIdx);
// new wave is used to calculate position, but not added
var newWave = getWave(newIdx, false, waveElement);
// changes with animation
var shape = {};
var shapeAttrs = ['amplitude', 'cx', 'cy', 'phase', 'radius', 'radiusY', 'waterLevel', 'waveLength'];
for (var i = 0; i < shapeAttrs.length; ++i) {
var attr = shapeAttrs[i];
if (newWave.shape.hasOwnProperty(attr)) {
shape[attr] = newWave.shape[attr];
}
}
var style = {};
var styleAttrs = ['fill', 'opacity', 'shadowBlur', 'shadowColor'];
for (var i = 0; i < styleAttrs.length; ++i) {
var attr = styleAttrs[i];
if (newWave.style.hasOwnProperty(attr)) {
style[attr] = newWave.style[attr];
}
}
if (isFillContainer) {
shape.radiusY = height / 2;
}
// changes with animation
external_echarts_.graphic.updateProps(waveElement, {
shape: shape,
x: newWave.x,
y: newWave.y
}, seriesModel);
if (seriesModel.isUniversalTransitionEnabled && seriesModel.isUniversalTransitionEnabled()) {
external_echarts_.graphic.updateProps(waveElement, {
style: style
}, seriesModel);
}
else {
waveElement.useStyle(style);
}
// instant changes
var oldWaveClipPath = waveElement.getClipPath();
var newWaveClipPath = newWave.getClipPath();
waveElement.setClipPath(newWave.getClipPath());
waveElement.shape.inverse = newWave.inverse;
if (oldWaveClipPath && newWaveClipPath
&& self._shape === symbol
// TODO use zrender morphing to apply complex symbol animation.
&& !isPathSymbol(symbol)
) {
// Can be animated.
external_echarts_.graphic.updateProps(newWaveClipPath, {
shape: oldWaveClipPath.shape
}, seriesModel, { isFrom: true });
}
setWaveAnimation(newIdx, waveElement, waveElement);
group.add(waveElement);
data.setItemGraphicEl(newIdx, waveElement);
waves.push(waveElement);
})
.remove(function (idx) {
var wave = oldData.getItemGraphicEl(idx);
group.remove(wave);
})
.execute();
if (itemModel.get('label.show')) {
group.add(getText(waves));
}
this._shape = symbol;
this._data = data;
/**
* Get path for outline, background and clipping
*
* @param {number} r outter radius of shape
* @param {boolean|undefined} isForClipping if the shape is used
* for clipping
*/
function getPath(r, isForClipping) {
if (symbol) {
// customed symbol path
if (isPathSymbol(symbol)) {
var path = external_echarts_.graphic.makePath(symbol.slice(7), {});
var bouding = path.getBoundingRect();
var w = bouding.width;
var h = bouding.height;
if (w > h) {
h = r * 2 / w * h;
w = r * 2;
}
else {
w = r * 2 / h * w;
h = r * 2;
}
var left = isForClipping ? 0 : cx - w / 2;
var top = isForClipping ? 0 : cy - h / 2;
path = external_echarts_.graphic.makePath(
symbol.slice(7),
{},
new external_echarts_.graphic.BoundingRect(left, top, w, h)
);
if (isForClipping) {
path.x = -w / 2;
path.y = -h / 2;
}
return path;
}
else if (isFillContainer) {
// fully fill the container
var x = isForClipping ? -r[0] : cx - r[0];
var y = isForClipping ? -r[1] : cy - r[1];
return external_echarts_.helper.createSymbol(
'rect', x, y, r[0] * 2, r[1] * 2
);
}
else {
var x = isForClipping ? -r : cx - r;
var y = isForClipping ? -r : cy - r;
if (symbol === 'pin') {
y += r;
}
else if (symbol === 'arrow') {
y -= r;
}
return external_echarts_.helper.createSymbol(symbol, x, y, r * 2, r * 2);
}
}
return new external_echarts_.graphic.Circle({
shape: {
cx: isForClipping ? 0 : cx,
cy: isForClipping ? 0 : cy,
r: r
}
});
}
/**
* Create outline
*/
function getOutline() {
var outlinePath = getPath(outterRadius);
outlinePath.style.fill = null;
outlinePath.setStyle(seriesModel.getModel('outline.itemStyle')
.getItemStyle());
return outlinePath;
}
/**
* Create background
*/
function getBackground() {
// Seperate stroke and fill, so we can use stroke to cover the alias of clipping.
var strokePath = getPath(radius);
strokePath.setStyle(seriesModel.getModel('backgroundStyle')
.getItemStyle());
strokePath.style.fill = null;
// Stroke is front of wave
strokePath.z2 = 5;
var fillPath = getPath(radius);
fillPath.setStyle(seriesModel.getModel('backgroundStyle')
.getItemStyle());
fillPath.style.stroke = null;
var group = new external_echarts_.graphic.Group();
group.add(strokePath);
group.add(fillPath);
return group;
}
/**
* wave shape
*/
function getWave(idx, isInverse, oldWave) {
var radiusX = isFillContainer ? radius[0] : radius;
var radiusY = isFillContainer ? height / 2 : radius;
var itemModel = data.getItemModel(idx);
var itemStyleModel = itemModel.getModel('itemStyle');
var phase = itemModel.get('phase');
var amplitude = liquidFillView_parsePercent(itemModel.get('amplitude'),
radiusY * 2);
var waveLength = liquidFillView_parsePercent(itemModel.get('waveLength'),
radiusX * 2);
var value = data.get('value', idx);
var waterLevel = radiusY - value * radiusY * 2;
phase = oldWave ? oldWave.shape.phase
: (phase === 'auto' ? idx * Math.PI / 4 : phase);
var normalStyle = itemStyleModel.getItemStyle();
if (!normalStyle.fill) {
var seriesColor = seriesModel.get('color');
var id = idx % seriesColor.length;
normalStyle.fill = seriesColor[id];
}
var x = radiusX * 2;
var wave = new liquidFillShape({
shape: {
waveLength: waveLength,
radius: radiusX,
radiusY: radiusY,
cx: x,
cy: 0,
waterLevel: waterLevel,
amplitude: amplitude,
phase: phase,
inverse: isInverse
},
style: normalStyle,
x: cx,
y: cy,
});
wave.shape._waterLevel = waterLevel;
var hoverStyle = itemModel.getModel('emphasis.itemStyle')
.getItemStyle();
hoverStyle.lineWidth = 0;
wave.ensureState('emphasis').style = hoverStyle;
external_echarts_.helper.enableHoverEmphasis(wave);
// clip out the part outside the circle
var clip = getPath(radius, true);
// set fill for clipPath, otherwise it will not trigger hover event
clip.setStyle({
fill: 'white'
});
wave.setClipPath(clip);
return wave;
}
function setWaveAnimation(idx, wave, oldWave) {
var itemModel = data.getItemModel(idx);
var maxSpeed = itemModel.get('period');
var direction = itemModel.get('direction');
var value = data.get('value', idx);
var phase = itemModel.get('phase');
phase = oldWave ? oldWave.shape.phase
: (phase === 'auto' ? idx * Math.PI / 4 : phase);
var defaultSpeed = function (maxSpeed) {
var cnt = data.count();
return cnt === 0 ? maxSpeed : maxSpeed *
(0.2 + (cnt - idx) / cnt * 0.8);
};
var speed = 0;
if (maxSpeed === 'auto') {
speed = defaultSpeed(5000);
}
else {
speed = typeof maxSpeed === 'function'
? maxSpeed(value, idx) : maxSpeed;
}
// phase for moving left/right
var phaseOffset = 0;
if (direction === 'right' || direction == null) {
phaseOffset = Math.PI;
}
else if (direction === 'left') {
phaseOffset = -Math.PI;
}
else if (direction === 'none') {
phaseOffset = 0;
}
else {
console.error('Illegal direction value for liquid fill.');
}
// wave animation of moving left/right
if (direction !== 'none' && itemModel.get('waveAnimation')) {
wave
.animate('shape', true)
.when(0, {
phase: phase
})
.when(speed / 2, {
phase: phaseOffset + phase
})
.when(speed, {
phase: phaseOffset * 2 + phase
})
.during(function () {
if (wavePath) {
wavePath.dirty(true);
}
})
.start();
}
}
/**
* text on wave
*/
function getText(waves) {
var labelModel = itemModel.getModel('label');
function formatLabel() {
var formatted = seriesModel.getFormattedLabel(0, 'normal');
var defaultVal = (data.get('value', 0) * 100);
var defaultLabel = data.getName(0) || seriesModel.name;
if (!isNaN(defaultVal)) {
defaultLabel = defaultVal.toFixed(0) + '%';
}
return formatted == null ? defaultLabel : formatted;
}
var textRectOption = {
z2: 10,
shape: {
x: left,
y: top,
width: (isFillContainer ? radius[0] : radius) * 2,
height: (isFillContainer ? radius[1] : radius) * 2
},
style: {
fill: 'transparent'
},
textConfig: {
position: labelModel.get('position') || 'inside'
},
silent: true
};
var textOption = {
style: {
text: formatLabel(),
textAlign: labelModel.get('align'),
textVerticalAlign: labelModel.get('baseline')
}
};
Object.assign(textOption.style, external_echarts_.helper.createTextStyle(labelModel));
var outsideTextRect = new external_echarts_.graphic.Rect(textRectOption);
var insideTextRect = new external_echarts_.graphic.Rect(textRectOption);
insideTextRect.disableLabelAnimation = true;
outsideTextRect.disableLabelAnimation = true;
var outsideText = new external_echarts_.graphic.Text(textOption);
var insideText = new external_echarts_.graphic.Text(textOption);
outsideTextRect.setTextContent(outsideText);
insideTextRect.setTextContent(insideText);
var insColor = labelModel.get('insideColor');
insideText.style.fill = insColor;
var group = new external_echarts_.graphic.Group();
group.add(outsideTextRect);
group.add(insideTextRect);
// clip out waves for insideText
var boundingCircle = getPath(radius, true);
wavePath = new external_echarts_.graphic.CompoundPath({
shape: {
paths: waves
},
x: cx,
y: cy
});
wavePath.setClipPath(boundingCircle);
insideTextRect.setClipPath(wavePath);
return group;
}
},
dispose: function () {
// dispose nothing here
}
});
;// CONCATENATED MODULE: ./src/liquidFill.js
;// CONCATENATED MODULE: ./index.js
/***/ }),
/***/ "echarts/lib/echarts":
/*!**************************!*\
!*** external "echarts" ***!
\**************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE_echarts_lib_echarts__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(__webpack_module_cache__[moduleId]) {
/******/ return __webpack_module_cache__[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/ // module exports must be returned from runtime so entry inlining is disabled
/******/ // startup
/******/ // Load entry module and return exports
/******/ return __webpack_require__("./index.js");
/******/ })()
;
});
//# sourceMappingURL=echarts-liquidfill.js.map