echarts-liquidfill.min.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. ! function (e, t) {
  2. "object" == typeof exports && "object" == typeof module ? module.exports = t(require("echarts")) : "function" == typeof define && define.amd ? define(["echarts"], t) : "object" == typeof exports ? exports["echarts-liquidfill"] = t(require("echarts")) : e["echarts-liquidfill"] = t(e.echarts)
  3. }(self, (function (e) {
  4. return (() => {
  5. "use strict";
  6. var t = {
  7. 245: (e, t, a) => {
  8. a.r(t);
  9. var i = a(83);
  10. i.extendSeriesModel({
  11. type: "series.liquidFill",
  12. optionUpdated: function () {
  13. var e = this.option;
  14. e.gridSize = Math.max(Math.floor(e.gridSize), 4)
  15. },
  16. getInitialData: function (e, t) {
  17. var a = i.helper.createDimensions(e.data, {
  18. coordDimensions: ["value"]
  19. }),
  20. r = new i.List(a, this);
  21. return r.initData(e.data), r
  22. },
  23. defaultOption: {
  24. color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
  25. center: ["50%", "50%"],
  26. radius: "50%",
  27. amplitude: "8%",
  28. waveLength: "80%",
  29. phase: "auto",
  30. period: "auto",
  31. direction: "right",
  32. shape: "circle",
  33. waveAnimation: !0,
  34. animationEasing: "linear",
  35. animationEasingUpdate: "linear",
  36. animationDuration: 2e3,
  37. animationDurationUpdate: 1e3,
  38. outline: {
  39. show: !0,
  40. borderDistance: 8,
  41. itemStyle: {
  42. color: "none",
  43. borderColor: "#294D99",
  44. borderWidth: 8,
  45. shadowBlur: 20,
  46. shadowColor: "rgba(0, 0, 0, 0.25)"
  47. }
  48. },
  49. backgroundStyle: {
  50. color: "#E3F7FF"
  51. },
  52. itemStyle: {
  53. opacity: .95,
  54. shadowBlur: 50,
  55. shadowColor: "rgba(0, 0, 0, 0.4)"
  56. },
  57. label: {
  58. show: !0,
  59. color: "#294D99",
  60. insideColor: "#fff",
  61. fontSize: 50,
  62. fontWeight: "bold",
  63. align: "center",
  64. baseline: "middle",
  65. position: "inside"
  66. },
  67. emphasis: {
  68. itemStyle: {
  69. opacity: .8
  70. }
  71. }
  72. }
  73. });
  74. const r = i.graphic.extendShape({
  75. type: "ec-liquid-fill",
  76. shape: {
  77. waveLength: 0,
  78. radius: 0,
  79. radiusY: 0,
  80. cx: 0,
  81. cy: 0,
  82. waterLevel: 0,
  83. amplitude: 0,
  84. phase: 0,
  85. inverse: !1
  86. },
  87. buildPath: function (e, t) {
  88. null == t.radiusY && (t.radiusY = t.radius);
  89. for (var a = Math.max(2 * Math.ceil(2 * t.radius / t.waveLength * 4), 8); t.phase < 2 * -Math.PI;) t.phase += 2 * Math.PI;
  90. for (; t.phase > 0;) t.phase -= 2 * Math.PI;
  91. var i = t.phase / Math.PI / 2 * t.waveLength,
  92. r = t.cx - t.radius + i - 2 * t.radius;
  93. e.moveTo(r, t.waterLevel);
  94. for (var l = 0, o = 0; o < a; ++o) {
  95. var s = o % 4,
  96. h = n(o * t.waveLength / 4, s, t.waveLength, t.amplitude);
  97. e.bezierCurveTo(h[0][0] + r, -h[0][1] + t.waterLevel, h[1][0] + r, -h[1][1] + t.waterLevel, h[2][0] + r, -h[2][1] + t.waterLevel), o === a - 1 && (l = h[2][0])
  98. }
  99. t.inverse ? (e.lineTo(l + r, t.cy - t.radiusY), e.lineTo(r, t.cy - t.radiusY), e.lineTo(r, t.waterLevel)) : (e.lineTo(l + r, t.cy + t.radiusY), e.lineTo(r, t.cy + t.radiusY), e.lineTo(r, t.waterLevel)), e.closePath()
  100. }
  101. });
  102. function n(e, t, a, i) {
  103. return 0 === t ? [
  104. [e + .5 * a / Math.PI / 2, i / 2],
  105. [e + .5 * a / Math.PI, i],
  106. [e + a / 4, i]
  107. ] : 1 === t ? [
  108. [e + .5 * a / Math.PI / 2 * (Math.PI - 2), i],
  109. [e + .5 * a / Math.PI / 2 * (Math.PI - 1), i / 2],
  110. [e + a / 4, 0]
  111. ] : 2 === t ? [
  112. [e + .5 * a / Math.PI / 2, -i / 2],
  113. [e + .5 * a / Math.PI, -i],
  114. [e + a / 4, -i]
  115. ] : [
  116. [e + .5 * a / Math.PI / 2 * (Math.PI - 2), -i],
  117. [e + .5 * a / Math.PI / 2 * (Math.PI - 1), -i / 2],
  118. [e + a / 4, 0]
  119. ]
  120. }
  121. var l = function (e, t) {
  122. switch (e) {
  123. case "center":
  124. case "middle":
  125. e = "50%";
  126. break;
  127. case "left":
  128. case "top":
  129. e = "0%";
  130. break;
  131. case "right":
  132. case "bottom":
  133. e = "100%"
  134. }
  135. return "string" == typeof e ? (a = e, a.replace(/^\s+|\s+$/g, "")).match(/%$/) ? parseFloat(e) / 100 * t : parseFloat(e) : null == e ? NaN : +e;
  136. var a
  137. };
  138. function o(e) {
  139. return e && 0 === e.indexOf("path://")
  140. }
  141. i.extendChartView({
  142. type: "liquidFill",
  143. render: function (e, t, a) {
  144. var n = this,
  145. s = this.group;
  146. s.removeAll();
  147. var h = e.getData(),
  148. d = h.getItemModel(0),
  149. p = d.get("center"),
  150. u = d.get("radius"),
  151. c = a.getWidth(),
  152. g = a.getHeight(),
  153. v = Math.min(c, g),
  154. f = 0,
  155. y = 0,
  156. m = e.get("outline.show");
  157. m && (f = e.get("outline.borderDistance"), y = l(e.get("outline.itemStyle.borderWidth"), v));
  158. var w, b, x, M = l(p[0], c),
  159. P = l(p[1], g),
  160. I = !1,
  161. S = e.get("shape");
  162. "container" === S ? (I = !0, b = [(w = [c / 2, g / 2])[0] - y / 2, w[1] - y / 2], x = [l(f, c), l(f, g)], u = [Math.max(b[0] - x[0], 0), Math.max(b[1] - x[1], 0)]) : (b = (w = l(u, v) / 2) - y / 2, x = l(f, v), u = Math.max(b - x, 0)), m && (Y().style.lineWidth = y, s.add(Y()));
  163. var L = I ? 0 : M - u,
  164. C = I ? 0 : P - u,
  165. T = null;
  166. s.add(function () {
  167. var t = E(u);
  168. t.setStyle(e.getModel("backgroundStyle").getItemStyle()), t.style.fill = null, t.z2 = 5;
  169. var a = E(u);
  170. a.setStyle(e.getModel("backgroundStyle").getItemStyle()), a.style.stroke = null;
  171. var r = new i.graphic.Group;
  172. return r.add(t), r.add(a), r
  173. }());
  174. var D = this._data,
  175. F = [];
  176. function E(e, t) {
  177. if (S) {
  178. if (o(S)) {
  179. var a = i.graphic.makePath(S.slice(7), {}),
  180. r = a.getBoundingRect(),
  181. n = r.width,
  182. l = r.height;
  183. n > l ? (l *= 2 * e / n, n = 2 * e) : (n *= 2 * e / l, l = 2 * e);
  184. var s = t ? 0 : M - n / 2,
  185. h = t ? 0 : P - l / 2;
  186. return a = i.graphic.makePath(S.slice(7), {}, new i.graphic.BoundingRect(s, h, n, l)), t && (a.x = -n / 2, a.y = -l / 2), a
  187. }
  188. if (I) {
  189. var d = t ? -e[0] : M - e[0],
  190. p = t ? -e[1] : P - e[1];
  191. return i.helper.createSymbol("rect", d, p, 2 * e[0], 2 * e[1])
  192. }
  193. return d = t ? -e : M - e, p = t ? -e : P - e, "pin" === S ? p += e : "arrow" === S && (p -= e), i.helper.createSymbol(S, d, p, 2 * e, 2 * e)
  194. }
  195. return new i.graphic.Circle({
  196. shape: {
  197. cx: t ? 0 : M,
  198. cy: t ? 0 : P,
  199. r: e
  200. }
  201. })
  202. }
  203. function Y() {
  204. var t = E(w);
  205. return t.style.fill = null, t.setStyle(e.getModel("outline.itemStyle").getItemStyle()), t
  206. }
  207. function k(t, a, n) {
  208. var o = I ? u[0] : u,
  209. s = I ? g / 2 : u,
  210. d = h.getItemModel(t),
  211. p = d.getModel("itemStyle"),
  212. c = d.get("phase"),
  213. v = l(d.get("amplitude"), 2 * s),
  214. f = l(d.get("waveLength"), 2 * o),
  215. y = s - h.get("value", t) * s * 2;
  216. c = n ? n.shape.phase : "auto" === c ? t * Math.PI / 4 : c;
  217. var m = p.getItemStyle();
  218. if (!m.fill) {
  219. var w = e.get("color"),
  220. b = t % w.length;
  221. m.fill = w[b]
  222. }
  223. var x = new r({
  224. shape: {
  225. waveLength: f,
  226. radius: o,
  227. radiusY: s,
  228. cx: 2 * o,
  229. cy: 0,
  230. waterLevel: y,
  231. amplitude: v,
  232. phase: c,
  233. inverse: a
  234. },
  235. style: m,
  236. x: M,
  237. y: P
  238. });
  239. x.shape._waterLevel = y;
  240. var S = d.getModel("emphasis.itemStyle").getItemStyle();
  241. S.lineWidth = 0, x.ensureState("emphasis").style = S, i.helper.enableHoverEmphasis(x);
  242. var L = E(u, !0);
  243. return L.setStyle({
  244. fill: "white"
  245. }), x.setClipPath(L), x
  246. }
  247. function q(e, t, a) {
  248. var i = h.getItemModel(e),
  249. r = i.get("period"),
  250. n = i.get("direction"),
  251. l = h.get("value", e),
  252. o = i.get("phase");
  253. o = a ? a.shape.phase : "auto" === o ? e * Math.PI / 4 : o;
  254. var s, d;
  255. s = "auto" === r ? 0 === (d = h.count()) ? 5e3 : 5e3 * (.2 + (d - e) / d * .8) : "function" == typeof r ? r(l, e) : r;
  256. var p = 0;
  257. "right" === n || null == n ? p = Math.PI : "left" === n ? p = -Math.PI : "none" === n ? p = 0 : console.error("Illegal direction value for liquid fill."), "none" !== n && i.get("waveAnimation") && t.animate("shape", !0).when(0, {
  258. phase: o
  259. }).when(s / 2, {
  260. phase: p + o
  261. }).when(s, {
  262. phase: 2 * p + o
  263. }).during((function () {
  264. T && T.dirty(!0)
  265. })).start()
  266. }
  267. h.diff(D).add((function (t) {
  268. var a = k(t, !1),
  269. r = a.shape.waterLevel;
  270. a.shape.waterLevel = I ? g / 2 : u, i.graphic.initProps(a, {
  271. shape: {
  272. waterLevel: r
  273. }
  274. }, e), a.z2 = 2, q(t, a, null), s.add(a), h.setItemGraphicEl(t, a), F.push(a)
  275. })).update((function (t, a) {
  276. for (var r = D.getItemGraphicEl(a), l = k(t, !1, r), d = {}, p = ["amplitude", "cx", "cy", "phase", "radius", "radiusY", "waterLevel", "waveLength"], u = 0; u < p.length; ++u) {
  277. var c = p[u];
  278. l.shape.hasOwnProperty(c) && (d[c] = l.shape[c])
  279. }
  280. var v = {},
  281. f = ["fill", "opacity", "shadowBlur", "shadowColor"];
  282. for (u = 0; u < f.length; ++u) c = f[u], l.style.hasOwnProperty(c) && (v[c] = l.style[c]);
  283. I && (d.radiusY = g / 2), i.graphic.updateProps(r, {
  284. shape: d,
  285. x: l.x,
  286. y: l.y
  287. }, e), e.isUniversalTransitionEnabled && e.isUniversalTransitionEnabled() ? i.graphic.updateProps(r, {
  288. style: v
  289. }, e) : r.useStyle(v);
  290. var y = r.getClipPath(),
  291. m = l.getClipPath();
  292. r.setClipPath(l.getClipPath()), r.shape.inverse = l.inverse, y && m && n._shape === S && !o(S) && i.graphic.updateProps(m, {
  293. shape: y.shape
  294. }, e, {
  295. isFrom: !0
  296. }), q(t, r, r), s.add(r), h.setItemGraphicEl(t, r), F.push(r)
  297. })).remove((function (e) {
  298. var t = D.getItemGraphicEl(e);
  299. s.remove(t)
  300. })).execute(), d.get("label.show") && s.add(function (t) {
  301. var a = d.getModel("label");
  302. var r, n, l, o = {
  303. z2: 10,
  304. shape: {
  305. x: L,
  306. y: C,
  307. width: 2 * (I ? u[0] : u),
  308. height: 2 * (I ? u[1] : u)
  309. },
  310. style: {
  311. fill: "transparent"
  312. },
  313. textConfig: {
  314. position: a.get("position") || "inside"
  315. },
  316. silent: !0
  317. },
  318. s = {
  319. style: {
  320. text: (r = e.getFormattedLabel(0, "normal"), n = 100 * h.get("value", 0), l = h.getName(0) || e.name, isNaN(n) || (l = n.toFixed(0) + "%"), null == r ? l : r),
  321. textAlign: a.get("align"),
  322. textVerticalAlign: a.get("baseline")
  323. }
  324. };
  325. Object.assign(s.style, i.helper.createTextStyle(a));
  326. var p = new i.graphic.Rect(o),
  327. c = new i.graphic.Rect(o);
  328. c.disableLabelAnimation = !0, p.disableLabelAnimation = !0;
  329. var g = new i.graphic.Text(s),
  330. v = new i.graphic.Text(s);
  331. p.setTextContent(g), c.setTextContent(v);
  332. var f = a.get("insideColor");
  333. v.style.fill = f;
  334. var y = new i.graphic.Group;
  335. y.add(p), y.add(c);
  336. var m = E(u, !0);
  337. return (T = new i.graphic.CompoundPath({
  338. shape: {
  339. paths: t
  340. },
  341. x: M,
  342. y: P
  343. })).setClipPath(m), c.setClipPath(T), y
  344. }(F)), this._shape = S, this._data = h
  345. },
  346. dispose: function () {}
  347. })
  348. },
  349. 83: t => {
  350. t.exports = e
  351. }
  352. },
  353. a = {};
  354. function i(e) {
  355. if (a[e]) return a[e].exports;
  356. var r = a[e] = {
  357. exports: {}
  358. };
  359. return t[e](r, r.exports, i), r.exports
  360. }
  361. return i.r = e => {
  362. "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
  363. value: "Module"
  364. }), Object.defineProperty(e, "__esModule", {
  365. value: !0
  366. })
  367. }, i(245)
  368. })()
  369. }));
  370. //# sourceMappingURL=echarts-liquidfill.min.js.map