From 11fb30e17d824c6fe4c6e5db0237ac2bdfddcee7 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Fri, 13 Mar 2026 16:40:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=B0=8F=E7=A8=8B=E5=BA=8F=E8=87=AA?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89tabbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 26 +-
.../qiun-data-charts/qiun-data-charts.vue | 1584 ++++
src/components/qiun-error/qiun-error.vue | 46 +
src/components/qiun-loading/loading1.vue | 162 +
src/components/qiun-loading/loading2.vue | 170 +
src/components/qiun-loading/loading3.vue | 173 +
src/components/qiun-loading/loading4.vue | 222 +
src/components/qiun-loading/loading5.vue | 229 +
src/components/qiun-loading/qiun-loading.vue | 36 +
.../qiun-title-bar/qiun-title-bar.vue | 51 +
.../tongtong-plate/plate-keyboard.vue | 277 +
.../tongtong-plate/plate-number.vue | 312 +
src/components/u-charts/config-echarts.js | 422 +
src/components/u-charts/config-ucharts.js | 663 ++
src/components/u-charts/u-charts.js | 8185 ++++++++++++++++
src/components/u-charts/u-charts.min.js | 18 +
src/pages.json | 51 +-
src/pages/root/dashboard.vue | 13 +-
src/pages/tabbar/cabinet.vue | 69 +
src/pages/tabbar/canteen.vue | 12 +-
src/pages/tabbar/canteenAnalyse.vue | 218 +
src/pages/tabbar/coopMerchant.vue | 122 +
src/pages/tabbar/selfMerchant.vue | 74 +
src/sheep/api/door.ts | 151 +
src/sheep/api/index.ts | 1 +
.../base-just-flot-nav/base-just-flot-nav.vue | 40 +-
.../components/base/base-nav/base-nav.vue | 19 +-
.../crud/crud-layout/crud-layout.vue | 18 +-
src/sheep/stores/tabbar.ts | 185 +
src/sheep/utils/app.ts | 21 +-
src/static/page/door-info.svg | 1 +
src/static/page/door-putaway.svg | 1 +
src/static/page/open-door.svg | 1 +
src/static/tabbar/cabinet-select.png | Bin 0 -> 4682 bytes
src/static/tabbar/cabinet.png | Bin 0 -> 4631 bytes
src/static/tabbar/canteen-analyse-select.png | Bin 0 -> 4410 bytes
src/static/tabbar/canteen-analyse.png | Bin 0 -> 4257 bytes
src/static/tabbar/coop-merchant-select.png | Bin 0 -> 498 bytes
src/static/tabbar/coop-merchant.png | Bin 0 -> 493 bytes
src/static/tabbar/integrated-select.png | Bin 0 -> 3923 bytes
src/static/tabbar/integrated.png | Bin 0 -> 3849 bytes
src/static/tabbar/online-shop-select.png | Bin 0 -> 5113 bytes
src/static/tabbar/online-shop.png | Bin 0 -> 4996 bytes
.../tabbar/prosperity-shop-mch-list.png | Bin 0 -> 4029 bytes
src/static/tabbar/prosperity-shop-select.png | Bin 0 -> 5588 bytes
src/static/tabbar/prosperity-shop.png | Bin 0 -> 5278 bytes
src/static/tabbar/self-merchant-select.png | Bin 0 -> 1058 bytes
src/static/tabbar/self-merchant.png | Bin 0 -> 1059 bytes
src/uni_modules/tm-ui/changelog.md | 96 +
.../tm-ui/components/tm-alert/tm-alert.vue | 696 +-
.../tm-avatar-group/tm-avatar-group.vue | 400 +
.../tm-ui/components/tm-badge/tm-badge.vue | 445 +-
.../tm-between-time/tm-between-time.vue | 1188 +--
.../tm-ui/components/tm-button/tm-button.vue | 59 +-
.../calendar-multiple.vue | 341 +
.../tm-calendar-multiple/interface.ts | 98 +
.../tm-calendar-multiple.vue | 788 ++
.../tm-calendar-multiple/tmCalendar.ts | 243 +
.../tm-ui/components/tm-cell/tm-cell.vue | 1027 +-
.../tm-checkbox-group/tm-checkbox-group.vue | 250 +-
.../components/tm-checkbox/tm-checkbox.vue | 767 +-
.../tm-circle-progress/propsType.ts | 82 +
.../tm-circle-progress/tm-circle-progress.vue | 336 +
.../tm-code-input/tm-code-input.vue | 434 +
.../tm-ui/components/tm-col/tm-col.vue | 150 +-
.../tm-collapse-item/tm-collapse-item.vue | 657 +-
.../components/tm-collapse/tm-collapse.vue | 229 +-
.../components/tm-countdown/tm-countdown.vue | 249 +
.../components/tm-date-view/tm-date-view.vue | 961 +-
.../tm-ui/components/tm-drawer/tm-drawer.vue | 1630 ++--
.../components/tm-dropdown-item/propsType.ts | 45 +
.../tm-dropdown-item/tm-dropdown-item.vue | 114 +
.../components/tm-dropdown-menu/propsType.ts | 109 +
.../tm-dropdown-menu/tm-dropdown-menu.vue | 355 +
.../tm-ui/components/tm-echart/canvasinit.ts | 216 +-
.../tm-ui/components/tm-echart/simple.js | 26 +-
.../tm-ui/components/tm-echart/tm-echart.vue | 836 +-
.../tm-float-drawer/tm-float-drawer.vue | 684 ++
.../components/tm-form-item/tm-form-item.vue | 540 +-
.../tm-ui/components/tm-form/tm-form.vue | 460 +-
.../tm-ui/components/tm-form/validator.ts | 164 +-
.../tm-ui/components/tm-html/mp-node.vue | 1270 +--
.../tm-ui/components/tm-html/pare.ts | 2789 +++---
.../tm-ui/components/tm-html/tm-html.vue | 599 +-
.../tm-ui/components/tm-icon/tm-icon.vue | 343 +-
.../tm-ui/components/tm-image/tm-image.vue | 820 +-
.../tm-ui/components/tm-input/tm-input.vue | 1570 +--
.../tm-ui/components/tm-modal/tm-modal.vue | 1354 +--
.../tm-ui/components/tm-money/tm-money.vue | 293 +
.../tm-ui/components/tm-more/tm-more.vue | 255 +
.../tm-ui/components/tm-navbar/tm-navbar.vue | 862 +-
.../tm-picker-date/tm-picker-date.vue | 1122 +--
.../tm-picker-selected/tm-picker-selected.vue | 508 +
.../tm-picker-view/picker-item copy.vue | 326 -
.../components/tm-picker-view/picker-item.vue | 544 +-
.../tm-picker-view/tm-picker-view copy.vue | 283 -
.../tm-picker-view/tm-picker-view.vue | 599 +-
.../tm-ui/components/tm-picker-view/util.ts | 256 +-
.../tm-ui/components/tm-picker/tm-picker.vue | 732 +-
.../tm-ui/components/tm-popover/propsType.ts | 39 +
.../components/tm-popover/tm-popover.vue | 503 +
.../tm-ui/components/tm-progress/propsType.ts | 74 +
.../components/tm-progress/tm-progress.vue | 180 +
.../tm-pull-refresh/tm-pull-refresh.vue | 456 +
.../tm-radio-group/tm-radio-group.vue | 218 +-
.../tm-ui/components/tm-radio/tm-radio.vue | 748 +-
.../tm-ui/components/tm-rate/tm-rate.vue | 602 +-
.../tm-ui/components/tm-row/tm-row.vue | 230 +-
.../tm-ui/components/tm-sheet/tm-sheet.vue | 582 +-
.../components/tm-sign-board/propsType.ts | 27 +
.../tm-sign-board/tm-sign-board.vue | 357 +
.../components/tm-skeleton/tm-skeleton.vue | 144 +
.../tm-ui/components/tm-sku/tm-sku.vue | 392 +
.../components/tm-slider-double/propsType.ts | 64 +
.../tm-slider-double/tm-slider-double.vue | 426 +
.../tm-slider-menu/tm-slider-menu.vue | 477 +
.../tm-ui/components/tm-slider/propsType.ts | 64 +
.../tm-ui/components/tm-slider/tm-slider.vue | 367 +
.../components/tm-stepper/tm-stepper.vue | 854 +-
.../tm-steps-item/tm-steps-item.vue | 241 +
.../tm-steps-item/tmStepsItemPropsTypes.ts | 24 +
.../tm-ui/components/tm-steps/propsType.ts | 30 +
.../tm-ui/components/tm-steps/tm-steps.vue | 117 +
.../tm-sticky-header/tm-sticky-header.vue | 124 +-
.../tm-ui/components/tm-sticky/tm-sticky.vue | 82 +-
.../tm-ui/components/tm-switch/tm-switch.vue | 783 +-
.../tm-ui/components/tm-tabbar/tm-tabbar.vue | 477 +
.../tm-ui/components/tm-tabs/tm-tabs.vue | 980 +-
.../tm-ui/components/tm-tag/tm-tag.vue | 726 +-
.../tm-ui/components/tm-text/tm-text.vue | 563 +-
.../tm-upload-photo/tm-upload-photo.vue | 1299 +--
.../tm-upload-video/tm-upload-video.vue | 1138 +--
src/uni_modules/tm-ui/css/remixIcon.json | 613 ++
...09112337.remixicon => remixIcon.remixicon} | 2 +-
src/uni_modules/tm-ui/css/remixicon.css | 1241 +--
src/uni_modules/tm-ui/css/remixicon.min.css | 6 +-
src/uni_modules/tm-ui/css/tmui.css | 8402 +----------------
src/uni_modules/tm-ui/css/tmui.css.map | 2 +-
src/uni_modules/tm-ui/css/tmui.min.css | 2 +-
src/uni_modules/tm-ui/css/tmui.scss | 165 +-
src/uni_modules/tm-ui/index.ts | 58 +-
src/uni_modules/tm-ui/interface.ts | 533 +-
src/uni_modules/tm-ui/libs/axios.ts | 482 +
src/uni_modules/tm-ui/libs/colors.ts | 1381 +--
src/uni_modules/tm-ui/libs/config.ts | 96 +-
src/uni_modules/tm-ui/libs/tmDate.ts | 1513 +--
src/uni_modules/tm-ui/libs/tool.ts | 334 +-
src/uni_modules/tm-ui/local/README.md | 456 +
src/uni_modules/tm-ui/local/i18n.ts | 1870 ++++
src/uni_modules/tm-ui/local/i18nStore.ts | 51 +
src/uni_modules/tm-ui/local/interface.ts | 416 +
.../tm-ui/local/localLanuage/en.json | 94 +
.../tm-ui/local/localLanuage/ja.json | 94 +
.../tm-ui/local/localLanuage/ko.json | 94 +
.../tm-ui/local/localLanuage/zh-Hans.json | 93 +
.../tm-ui/local/localLanuage/zh-Hant.json | 93 +
src/uni_modules/tm-ui/package.json | 190 +-
src/uni_modules/tm-ui/useFun/toolUse.ts | 91 +
158 files changed, 47290 insertions(+), 27243 deletions(-)
create mode 100644 src/components/qiun-data-charts/qiun-data-charts.vue
create mode 100644 src/components/qiun-error/qiun-error.vue
create mode 100644 src/components/qiun-loading/loading1.vue
create mode 100644 src/components/qiun-loading/loading2.vue
create mode 100644 src/components/qiun-loading/loading3.vue
create mode 100644 src/components/qiun-loading/loading4.vue
create mode 100644 src/components/qiun-loading/loading5.vue
create mode 100644 src/components/qiun-loading/qiun-loading.vue
create mode 100644 src/components/qiun-title-bar/qiun-title-bar.vue
create mode 100644 src/components/tongtong-plate/plate-keyboard.vue
create mode 100644 src/components/tongtong-plate/plate-number.vue
create mode 100644 src/components/u-charts/config-echarts.js
create mode 100644 src/components/u-charts/config-ucharts.js
create mode 100644 src/components/u-charts/u-charts.js
create mode 100644 src/components/u-charts/u-charts.min.js
create mode 100644 src/pages/tabbar/cabinet.vue
create mode 100644 src/pages/tabbar/canteenAnalyse.vue
create mode 100644 src/pages/tabbar/coopMerchant.vue
create mode 100644 src/pages/tabbar/selfMerchant.vue
create mode 100644 src/sheep/api/door.ts
create mode 100644 src/sheep/stores/tabbar.ts
create mode 100644 src/static/page/door-info.svg
create mode 100644 src/static/page/door-putaway.svg
create mode 100644 src/static/page/open-door.svg
create mode 100644 src/static/tabbar/cabinet-select.png
create mode 100644 src/static/tabbar/cabinet.png
create mode 100644 src/static/tabbar/canteen-analyse-select.png
create mode 100644 src/static/tabbar/canteen-analyse.png
create mode 100644 src/static/tabbar/coop-merchant-select.png
create mode 100644 src/static/tabbar/coop-merchant.png
create mode 100644 src/static/tabbar/integrated-select.png
create mode 100644 src/static/tabbar/integrated.png
create mode 100644 src/static/tabbar/online-shop-select.png
create mode 100644 src/static/tabbar/online-shop.png
create mode 100644 src/static/tabbar/prosperity-shop-mch-list.png
create mode 100644 src/static/tabbar/prosperity-shop-select.png
create mode 100644 src/static/tabbar/prosperity-shop.png
create mode 100644 src/static/tabbar/self-merchant-select.png
create mode 100644 src/static/tabbar/self-merchant.png
create mode 100644 src/uni_modules/tm-ui/components/tm-avatar-group/tm-avatar-group.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-calendar-multiple/calendar-multiple.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-calendar-multiple/interface.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-calendar-multiple/tm-calendar-multiple.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-calendar-multiple/tmCalendar.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-circle-progress/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-circle-progress/tm-circle-progress.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-code-input/tm-code-input.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-countdown/tm-countdown.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-dropdown-item/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-dropdown-item/tm-dropdown-item.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-dropdown-menu/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-dropdown-menu/tm-dropdown-menu.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-float-drawer/tm-float-drawer.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-money/tm-money.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-more/tm-more.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-picker-selected/tm-picker-selected.vue
delete mode 100644 src/uni_modules/tm-ui/components/tm-picker-view/picker-item copy.vue
delete mode 100644 src/uni_modules/tm-ui/components/tm-picker-view/tm-picker-view copy.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-popover/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-popover/tm-popover.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-progress/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-progress/tm-progress.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-pull-refresh/tm-pull-refresh.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-sign-board/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-sign-board/tm-sign-board.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-skeleton/tm-skeleton.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-sku/tm-sku.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-slider-double/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-slider-double/tm-slider-double.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-slider-menu/tm-slider-menu.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-slider/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-slider/tm-slider.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-steps-item/tm-steps-item.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-steps-item/tmStepsItemPropsTypes.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-steps/propsType.ts
create mode 100644 src/uni_modules/tm-ui/components/tm-steps/tm-steps.vue
create mode 100644 src/uni_modules/tm-ui/components/tm-tabbar/tm-tabbar.vue
create mode 100644 src/uni_modules/tm-ui/css/remixIcon.json
rename src/uni_modules/tm-ui/css/{RemixIcon_Collection_2409112337.remixicon => remixIcon.remixicon} (98%)
create mode 100644 src/uni_modules/tm-ui/libs/axios.ts
create mode 100644 src/uni_modules/tm-ui/local/README.md
create mode 100644 src/uni_modules/tm-ui/local/i18n.ts
create mode 100644 src/uni_modules/tm-ui/local/i18nStore.ts
create mode 100644 src/uni_modules/tm-ui/local/interface.ts
create mode 100644 src/uni_modules/tm-ui/local/localLanuage/en.json
create mode 100644 src/uni_modules/tm-ui/local/localLanuage/ja.json
create mode 100644 src/uni_modules/tm-ui/local/localLanuage/ko.json
create mode 100644 src/uni_modules/tm-ui/local/localLanuage/zh-Hans.json
create mode 100644 src/uni_modules/tm-ui/local/localLanuage/zh-Hant.json
create mode 100644 src/uni_modules/tm-ui/useFun/toolUse.ts
diff --git a/src/App.vue b/src/App.vue
index 93d7575..ab297ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,10 @@
-
diff --git a/src/components/qiun-data-charts/qiun-data-charts.vue b/src/components/qiun-data-charts/qiun-data-charts.vue
new file mode 100644
index 0000000..c27c445
--- /dev/null
+++ b/src/components/qiun-data-charts/qiun-data-charts.vue
@@ -0,0 +1,1584 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-error/qiun-error.vue b/src/components/qiun-error/qiun-error.vue
new file mode 100644
index 0000000..b15b19f
--- /dev/null
+++ b/src/components/qiun-error/qiun-error.vue
@@ -0,0 +1,46 @@
+
+
+
+ {{errorMessage==null?'请点击重试':errorMessage}}
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/loading1.vue b/src/components/qiun-loading/loading1.vue
new file mode 100644
index 0000000..b701394
--- /dev/null
+++ b/src/components/qiun-loading/loading1.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/loading2.vue b/src/components/qiun-loading/loading2.vue
new file mode 100644
index 0000000..7541b31
--- /dev/null
+++ b/src/components/qiun-loading/loading2.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/loading3.vue b/src/components/qiun-loading/loading3.vue
new file mode 100644
index 0000000..8e14db3
--- /dev/null
+++ b/src/components/qiun-loading/loading3.vue
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/loading4.vue b/src/components/qiun-loading/loading4.vue
new file mode 100644
index 0000000..77c55b7
--- /dev/null
+++ b/src/components/qiun-loading/loading4.vue
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/loading5.vue b/src/components/qiun-loading/loading5.vue
new file mode 100644
index 0000000..cb93a55
--- /dev/null
+++ b/src/components/qiun-loading/loading5.vue
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-loading/qiun-loading.vue b/src/components/qiun-loading/qiun-loading.vue
new file mode 100644
index 0000000..7789060
--- /dev/null
+++ b/src/components/qiun-loading/qiun-loading.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/qiun-title-bar/qiun-title-bar.vue b/src/components/qiun-title-bar/qiun-title-bar.vue
new file mode 100644
index 0000000..f235f17
--- /dev/null
+++ b/src/components/qiun-title-bar/qiun-title-bar.vue
@@ -0,0 +1,51 @@
+
+
+
+ {{title}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/tongtong-plate/plate-keyboard.vue b/src/components/tongtong-plate/plate-keyboard.vue
new file mode 100644
index 0000000..e0c4ebb
--- /dev/null
+++ b/src/components/tongtong-plate/plate-keyboard.vue
@@ -0,0 +1,277 @@
+
+
+
+
+ 请点击选择车牌号
+
+
+
+
+
+
+
+ ABC
+
+ {{ it }}
+
+
+
+
+
+
+
+
+ 省
+ 字
+ {{ it }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/tongtong-plate/plate-number.vue b/src/components/tongtong-plate/plate-number.vue
new file mode 100644
index 0000000..d9891f2
--- /dev/null
+++ b/src/components/tongtong-plate/plate-number.vue
@@ -0,0 +1,312 @@
+
+
+
+
+ ·
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/u-charts/config-echarts.js b/src/components/u-charts/config-echarts.js
new file mode 100644
index 0000000..7b8168f
--- /dev/null
+++ b/src/components/u-charts/config-echarts.js
@@ -0,0 +1,422 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+
+// 通用配置项
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
+
+const cfe = {
+ //demotype为自定义图表类型
+ "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
+ //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
+ "categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
+ //instance为实例变量承载属性，option为eopts承载属性，不要删除
+ "instance": {},
+ "option": {},
+ //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+ "formatter":{
+ "tooltipDemo1":function(res){
+ let result = ''
+ for (let i in res) {
+ if (i == 0) {
+ result += res[i].axisValueLabel + '年销售额'
+ }
+ let value = '--'
+ if (res[i].data !== null) {
+ value = res[i].data
+ }
+ // #ifdef H5
+ result += '\n' + res[i].seriesName + '：' + value + ' 万元'
+ // #endif
+
+ // #ifdef APP-PLUS
+ result += '
' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
+ // #endif
+ }
+ return result;
+ },
+ legendFormat:function(name){
+ return "自定义图例+"+name;
+ },
+ yAxisFormatDemo:function (value, index) {
+ return value + '元';
+ },
+ seriesFormatDemo:function(res){
+ return res.name + '年' + res.value + '元';
+ }
+ },
+ //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
+ "demotype":{
+ "color": color,
+ //在这里填写echarts的option即可
+
+ },
+ //下面是自定义配置，请添加项目所需的通用配置
+ "column": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'axis'
+ },
+ "grid": {
+ "top": 30,
+ "bottom": 50,
+ "right": 15,
+ "left": 40
+ },
+ "legend": {
+ "bottom": 'left',
+ },
+ "toolbox": {
+ "show": false,
+ },
+ "xAxis": {
+ "type": 'category',
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ "boundaryGap": true,
+ "data": []
+ },
+ "yAxis": {
+ "type": 'value',
+ "axisTick": {
+ "show": false,
+ },
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'bar',
+ "data": [],
+ "barwidth": 20,
+ "label": {
+ "show": true,
+ "color": "#666666",
+ "position": 'top',
+ },
+ },
+ },
+ "line": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'axis'
+ },
+ "grid": {
+ "top": 30,
+ "bottom": 50,
+ "right": 15,
+ "left": 40
+ },
+ "legend": {
+ "bottom": 'left',
+ },
+ "toolbox": {
+ "show": false,
+ },
+ "xAxis": {
+ "type": 'category',
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ "boundaryGap": true,
+ "data": []
+ },
+ "yAxis": {
+ "type": 'value',
+ "axisTick": {
+ "show": false,
+ },
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'line',
+ "data": [],
+ "barwidth": 20,
+ "label": {
+ "show": true,
+ "color": "#666666",
+ "position": 'top',
+ },
+ },
+ },
+ "area": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'axis'
+ },
+ "grid": {
+ "top": 30,
+ "bottom": 50,
+ "right": 15,
+ "left": 40
+ },
+ "legend": {
+ "bottom": 'left',
+ },
+ "toolbox": {
+ "show": false,
+ },
+ "xAxis": {
+ "type": 'category',
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ "boundaryGap": true,
+ "data": []
+ },
+ "yAxis": {
+ "type": 'value',
+ "axisTick": {
+ "show": false,
+ },
+ "axisLabel": {
+ "color": '#666666'
+ },
+ "axisLine": {
+ "lineStyle": {
+ "color": '#CCCCCC'
+ }
+ },
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'line',
+ "data": [],
+ "areaStyle": {},
+ "label": {
+ "show": true,
+ "color": "#666666",
+ "position": 'top',
+ },
+ },
+ },
+ "pie": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'item'
+ },
+ "grid": {
+ "top": 40,
+ "bottom": 30,
+ "right": 15,
+ "left": 15
+ },
+ "legend": {
+ "bottom": 'left',
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'pie',
+ "data": [],
+ "radius": '50%',
+ "label": {
+ "show": true,
+ "color": "#666666",
+ "position": 'top',
+ },
+ },
+ },
+ "ring": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'item'
+ },
+ "grid": {
+ "top": 40,
+ "bottom": 30,
+ "right": 15,
+ "left": 15
+ },
+ "legend": {
+ "bottom": 'left',
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'pie',
+ "data": [],
+ "radius": ['40%', '70%'],
+ "avoidLabelOverlap": false,
+ "label": {
+ "show": true,
+ "color": "#666666",
+ "position": 'top',
+ },
+ "labelLine": {
+ "show": true
+ },
+ },
+ },
+ "rose": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'item'
+ },
+ "legend": {
+ "top": 'bottom'
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'pie',
+ "data": [],
+ "radius": "55%",
+ "center": ['50%', '50%'],
+ "roseType": 'area',
+ },
+ },
+ "funnel": {
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "tooltip": {
+ "trigger": 'item',
+ "formatter": "{b} : {c}%"
+ },
+ "legend": {
+ "top": 'bottom'
+ },
+ "seriesTemplate": {
+ "name": '',
+ "type": 'funnel',
+ "left": '10%',
+ "top": 60,
+ "bottom": 60,
+ "width": '80%',
+ "min": 0,
+ "max": 100,
+ "minSize": '0%',
+ "maxSize": '100%',
+ "sort": 'descending',
+ "gap": 2,
+ "label": {
+ "show": true,
+ "position": 'inside'
+ },
+ "labelLine": {
+ "length": 10,
+ "lineStyle": {
+ "width": 1,
+ "type": 'solid'
+ }
+ },
+ "itemStyle": {
+ "bordercolor": '#fff',
+ "borderwidth": 1
+ },
+ "emphasis": {
+ "label": {
+ "fontSize": 20
+ }
+ },
+ "data": [],
+ },
+ },
+ "gauge": {
+ "color": color,
+ "tooltip": {
+ "formatter": '{a}
{b} : {c}%'
+ },
+ "seriesTemplate": {
+ "name": '业务指标',
+ "type": 'gauge',
+ "detail": {"formatter": '{value}%'},
+ "data": [{"value": 50, "name": '完成率'}]
+ },
+ },
+ "candle": {
+ "xAxis": {
+ "data": []
+ },
+ "yAxis": {},
+ "color": color,
+ "title": {
+ "text": ''
+ },
+ "dataZoom": [{
+ "type": 'inside',
+ "xAxisIndex": [0, 1],
+ "start": 10,
+ "end": 100
+ },
+ {
+ "show": true,
+ "xAxisIndex": [0, 1],
+ "type": 'slider',
+ "bottom": 10,
+ "start": 10,
+ "end": 100
+ }
+ ],
+ "seriesTemplate": {
+ "name": '',
+ "type": 'k',
+ "data": [],
+ },
+ }
+}
+
+export default cfe;
\ No newline at end of file
diff --git a/src/components/u-charts/config-ucharts.js b/src/components/u-charts/config-ucharts.js
new file mode 100644
index 0000000..80bb368
--- /dev/null
+++ b/src/components/u-charts/config-ucharts.js
@@ -0,0 +1,663 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"]
+
+//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
+const formatDateTime = (timeStamp, returnType) => {
+ var date = new Date()
+ date.setTime(timeStamp * 1000)
+ var y = date.getFullYear()
+ var m = date.getMonth() + 1
+ m = m < 10 ? "0" + m : m
+ var d = date.getDate()
+ d = d < 10 ? "0" + d : d
+ var h = date.getHours()
+ h = h < 10 ? "0" + h : h
+ var minute = date.getMinutes()
+ var second = date.getSeconds()
+ minute = minute < 10 ? "0" + minute : minute
+ second = second < 10 ? "0" + second : second
+ if (returnType == "full") {
+ return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second
+ }
+ if (returnType == "y-m-d") {
+ return y + "-" + m + "-" + d
+ }
+ if (returnType == "h:m") {
+ return h + ":" + minute
+ }
+ if (returnType == "h:m:s") {
+ return h + ":" + minute + ":" + second
+ }
+ return [y, m, d, h, minute, second]
+}
+
+const cfu = {
+ //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
+ type: [
+ "pie",
+ "ring",
+ "rose",
+ "word",
+ "funnel",
+ "map",
+ "arcbar",
+ "line",
+ "column",
+ "mount",
+ "bar",
+ "area",
+ "radar",
+ "gauge",
+ "candle",
+ "mix",
+ "tline",
+ "tarea",
+ "scatter",
+ "bubble",
+ "demotype",
+ ],
+ range: [
+ "饼状图",
+ "圆环图",
+ "玫瑰图",
+ "词云图",
+ "漏斗图",
+ "地图",
+ "圆弧进度条",
+ "折线图",
+ "柱状图",
+ "山峰图",
+ "条状图",
+ "区域图",
+ "雷达图",
+ "仪表盘",
+ "K线图",
+ "混合图",
+ "时间轴折线",
+ "时间轴区域",
+ "散点图",
+ "气泡图",
+ "自定义类型",
+ ],
+ //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
+ //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
+ categories: ["line", "column", "mount", "bar", "area", "radar", "gauge", "candle", "mix", "demotype"],
+ //instance为实例变量承载属性，不要删除
+ instance: {},
+ //option为opts及eopts承载属性，不要删除
+ option: {},
+ //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+ formatter: {
+ yAxisDemo1: function (val, index, opts) {
+ return val + "元"
+ },
+ yAxisDemo2: function (val, index, opts) {
+ return val.toFixed(2)
+ },
+ xAxisDemo1: function (val, index, opts) {
+ return val + "年"
+ },
+ xAxisDemo2: function (val, index, opts) {
+ return formatDateTime(val, "h:m")
+ },
+ seriesDemo1: function (val, index, series, opts) {
+ return val + "元"
+ },
+ tooltipDemo1: function (item, category, index, opts) {
+ if (index == 0) {
+ return "随便用" + item.data + "年"
+ } else {
+ return "其他我没改" + item.data + "天"
+ }
+ },
+ pieDemo: function (val, index, series, opts) {
+ if (index !== undefined) {
+ return series[index].name + "：" + series[index].data + "元"
+ }
+ },
+ // 食堂喜好分析饼图提示格式化
+ canteenPieTooltip: function (item, category, index, opts) {
+ return `分类：${item.classifyName || ""}/br/购买总数量：${item.payCount}/br/购买总金额：${Number(item.totalPrice) / 100.0}元`
+ },
+ // 食堂喜好分析折现图提示格式化
+ canteenAreaTooltip: function (item, category, index, opts) {
+ console.log(item, category, index, opts)
+ },
+ },
+ //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
+ demotype: {
+ //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
+ type: "line",
+ color: color,
+ padding: [15, 10, 0, 15],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ },
+ legend: {},
+ extra: {
+ line: {
+ type: "curve",
+ width: 2,
+ },
+ },
+ },
+ //下面是自定义配置，请添加项目所需的通用配置
+ pie: {
+ type: "pie",
+ color: color,
+ padding: [5, 5, 5, 5],
+ extra: {
+ pie: {
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ border: true,
+ borderWidth: 3,
+ borderColor: "#FFFFFF",
+ },
+ },
+ },
+ ring: {
+ type: "ring",
+ color: color,
+ padding: [5, 5, 5, 5],
+ rotate: false,
+ dataLabel: true,
+ legend: {
+ show: true,
+ position: "right",
+ lineHeight: 25,
+ },
+ title: {
+ name: "收益率",
+ fontSize: 15,
+ color: "#666666",
+ },
+ subtitle: {
+ name: "70%",
+ fontSize: 25,
+ color: "#7cb5ec",
+ },
+ extra: {
+ ring: {
+ ringWidth: 30,
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ border: true,
+ borderWidth: 3,
+ borderColor: "#FFFFFF",
+ },
+ },
+ },
+ rose: {
+ type: "rose",
+ color: color,
+ padding: [5, 5, 5, 5],
+ legend: {
+ show: true,
+ position: "left",
+ lineHeight: 25,
+ },
+ extra: {
+ rose: {
+ type: "area",
+ minRadius: 50,
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ border: false,
+ borderWidth: 2,
+ borderColor: "#FFFFFF",
+ },
+ },
+ },
+ word: {
+ type: "word",
+ color: color,
+ extra: {
+ word: {
+ type: "normal",
+ autoColors: false,
+ },
+ },
+ },
+ funnel: {
+ type: "funnel",
+ color: color,
+ padding: [15, 15, 0, 15],
+ extra: {
+ funnel: {
+ activeOpacity: 0.3,
+ activeWidth: 10,
+ border: true,
+ borderWidth: 2,
+ borderColor: "#FFFFFF",
+ fillOpacity: 1,
+ labelAlign: "right",
+ },
+ },
+ },
+ map: {
+ type: "map",
+ color: color,
+ padding: [0, 0, 0, 0],
+ dataLabel: true,
+ extra: {
+ map: {
+ border: true,
+ borderWidth: 1,
+ borderColor: "#666666",
+ fillOpacity: 0.6,
+ activeBorderColor: "#F04864",
+ activeFillColor: "#FACC14",
+ activeFillOpacity: 1,
+ },
+ },
+ },
+ arcbar: {
+ type: "arcbar",
+ color: color,
+ title: {
+ name: "百分比",
+ fontSize: 25,
+ color: "#00FF00",
+ },
+ subtitle: {
+ name: "默认标题",
+ fontSize: 15,
+ color: "#666666",
+ },
+ extra: {
+ arcbar: {
+ type: "default",
+ width: 12,
+ backgroundColor: "#E9E9E9",
+ startAngle: 0.75,
+ endAngle: 0.25,
+ gap: 2,
+ },
+ },
+ },
+ line: {
+ type: "line",
+ color: color,
+ padding: [15, 10, 0, 15],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ },
+ legend: {},
+ extra: {
+ line: {
+ type: "straight",
+ width: 2,
+ activeType: "hollow",
+ },
+ },
+ },
+ tline: {
+ type: "line",
+ color: color,
+ padding: [15, 10, 0, 15],
+ xAxis: {
+ disableGrid: false,
+ boundaryGap: "justify",
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ data: [
+ {
+ min: 0,
+ max: 80,
+ },
+ ],
+ },
+ legend: {},
+ extra: {
+ line: {
+ type: "curve",
+ width: 2,
+ activeType: "hollow",
+ },
+ },
+ },
+ tarea: {
+ type: "area",
+ color: color,
+ padding: [15, 10, 0, 15],
+ xAxis: {
+ disableGrid: true,
+ boundaryGap: "justify",
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ data: [
+ {
+ min: 0,
+ max: 80,
+ },
+ ],
+ },
+ legend: {},
+ extra: {
+ area: {
+ type: "curve",
+ opacity: 0.2,
+ addLine: true,
+ width: 2,
+ gradient: true,
+ activeType: "hollow",
+ },
+ },
+ },
+ column: {
+ type: "column",
+ color: color,
+ padding: [15, 15, 0, 5],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ data: [{ min: 0 }],
+ },
+ legend: {},
+ extra: {
+ column: {
+ type: "group",
+ width: 30,
+ activeBgColor: "#000000",
+ activeBgOpacity: 0.08,
+ },
+ },
+ },
+ mount: {
+ type: "mount",
+ color: color,
+ padding: [15, 15, 0, 5],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ data: [{ min: 0 }],
+ },
+ legend: {},
+ extra: {
+ mount: {
+ type: "mount",
+ widthRatio: 1.5,
+ },
+ },
+ },
+ bar: {
+ type: "bar",
+ color: color,
+ padding: [15, 30, 0, 5],
+ xAxis: {
+ boundaryGap: "justify",
+ disableGrid: false,
+ min: 0,
+ axisLine: false,
+ },
+ yAxis: {},
+ legend: {},
+ extra: {
+ bar: {
+ type: "group",
+ width: 30,
+ meterBorde: 1,
+ meterFillColor: "#FFFFFF",
+ activeBgColor: "#000000",
+ activeBgOpacity: 0.08,
+ },
+ },
+ },
+ area: {
+ type: "area",
+ color: color,
+ padding: [15, 15, 0, 15],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ },
+ legend: {},
+ extra: {
+ area: {
+ type: "straight",
+ opacity: 0.2,
+ addLine: true,
+ width: 2,
+ gradient: false,
+ activeType: "hollow",
+ },
+ },
+ },
+ radar: {
+ type: "radar",
+ color: color,
+ padding: [5, 5, 5, 5],
+ dataLabel: false,
+ legend: {
+ show: true,
+ position: "right",
+ lineHeight: 25,
+ },
+ extra: {
+ radar: {
+ gridType: "radar",
+ gridColor: "#CCCCCC",
+ gridCount: 3,
+ opacity: 0.2,
+ max: 200,
+ labelShow: true,
+ },
+ },
+ },
+ gauge: {
+ type: "gauge",
+ color: color,
+ title: {
+ name: "66Km/H",
+ fontSize: 25,
+ color: "#2fc25b",
+ offsetY: 50,
+ },
+ subtitle: {
+ name: "实时速度",
+ fontSize: 15,
+ color: "#1890ff",
+ offsetY: -50,
+ },
+ extra: {
+ gauge: {
+ type: "default",
+ width: 30,
+ labelColor: "#666666",
+ startAngle: 0.75,
+ endAngle: 0.25,
+ startNumber: 0,
+ endNumber: 100,
+ labelFormat: "",
+ splitLine: {
+ fixRadius: 0,
+ splitNumber: 10,
+ width: 30,
+ color: "#FFFFFF",
+ childNumber: 5,
+ childWidth: 12,
+ },
+ pointer: {
+ width: 24,
+ color: "auto",
+ },
+ },
+ },
+ },
+ candle: {
+ type: "candle",
+ color: color,
+ padding: [15, 15, 0, 15],
+ enableScroll: true,
+ enableMarkLine: true,
+ dataLabel: false,
+ xAxis: {
+ labelCount: 4,
+ itemCount: 40,
+ disableGrid: true,
+ gridColor: "#CCCCCC",
+ gridType: "solid",
+ dashLength: 4,
+ scrollShow: true,
+ scrollAlign: "left",
+ scrollColor: "#A6A6A6",
+ scrollBackgroundColor: "#EFEBEF",
+ },
+ yAxis: {},
+ legend: {},
+ extra: {
+ candle: {
+ color: {
+ upLine: "#f04864",
+ upFill: "#f04864",
+ downLine: "#2fc25b",
+ downFill: "#2fc25b",
+ },
+ average: {
+ show: true,
+ name: ["MA5", "MA10", "MA30"],
+ day: [5, 10, 20],
+ color: ["#1890ff", "#2fc25b", "#facc14"],
+ },
+ },
+ markLine: {
+ type: "dash",
+ dashLength: 5,
+ data: [
+ {
+ value: 2150,
+ lineColor: "#f04864",
+ showLabel: true,
+ },
+ {
+ value: 2350,
+ lineColor: "#f04864",
+ showLabel: true,
+ },
+ ],
+ },
+ },
+ },
+ mix: {
+ type: "mix",
+ color: color,
+ padding: [15, 15, 0, 15],
+ xAxis: {
+ disableGrid: true,
+ },
+ yAxis: {
+ disabled: false,
+ disableGrid: false,
+ splitNumber: 5,
+ gridType: "dash",
+ dashLength: 4,
+ gridColor: "#CCCCCC",
+ padding: 10,
+ showTitle: true,
+ data: [],
+ },
+ legend: {},
+ extra: {
+ mix: {
+ column: {
+ width: 20,
+ },
+ },
+ },
+ },
+ scatter: {
+ type: "scatter",
+ color: color,
+ padding: [15, 15, 0, 15],
+ dataLabel: false,
+ xAxis: {
+ disableGrid: false,
+ gridType: "dash",
+ splitNumber: 5,
+ boundaryGap: "justify",
+ min: 0,
+ },
+ yAxis: {
+ disableGrid: false,
+ gridType: "dash",
+ },
+ legend: {},
+ extra: {
+ scatter: {},
+ },
+ },
+ bubble: {
+ type: "bubble",
+ color: color,
+ padding: [15, 15, 0, 15],
+ xAxis: {
+ disableGrid: false,
+ gridType: "dash",
+ splitNumber: 5,
+ boundaryGap: "justify",
+ min: 0,
+ max: 250,
+ },
+ yAxis: {
+ disableGrid: false,
+ gridType: "dash",
+ data: [
+ {
+ min: 0,
+ max: 150,
+ },
+ ],
+ },
+ legend: {},
+ extra: {
+ bubble: {
+ border: 2,
+ opacity: 0.5,
+ },
+ },
+ },
+}
+
+export default cfu
diff --git a/src/components/u-charts/u-charts.js b/src/components/u-charts/u-charts.js
new file mode 100644
index 0000000..2b28105
--- /dev/null
+++ b/src/components/u-charts/u-charts.js
@@ -0,0 +1,8185 @@
+/*
+ * uCharts (R)
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360/快手）、Vue、Taro等支持canvas的框架平台
+ * Copyright (C) 2018-2022 QIUN (R) 秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts (R) 官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+
+"use strict"
+
+var config = {
+ version: "v2.5.0-20230101",
+ yAxisWidth: 15,
+ xAxisHeight: 22,
+ padding: [10, 10, 10, 10],
+ rotate: false,
+ fontSize: 13,
+ fontColor: "#666666",
+ dataPointShape: ["circle", "circle", "circle", "circle"],
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+ linearColor: ["#0EE2F8", "#2BDCA8", "#FA7D8D", "#EB88E2", "#2AE3A0", "#0EE2F8", "#EB88E2", "#6773E3", "#F78A85"],
+ pieChartLinePadding: 15,
+ pieChartTextPadding: 5,
+ titleFontSize: 20,
+ subtitleFontSize: 15,
+ radarLabelTextMargin: 13,
+}
+
+var assign = function (target, ...varArgs) {
+ if (target == null) {
+ throw new TypeError("[uCharts] Cannot convert undefined or null to object")
+ }
+ if (!varArgs || varArgs.length <= 0) {
+ return target
+ }
+ // 深度合并对象
+ function deepAssign(obj1, obj2) {
+ for (let key in obj2) {
+ obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ? deepAssign(obj1[key], obj2[key]) : (obj1[key] = obj2[key])
+ }
+ return obj1
+ }
+ varArgs.forEach((val) => {
+ target = deepAssign(target, val)
+ })
+ return target
+}
+
+var util = {
+ toFixed: function toFixed(num, limit) {
+ limit = limit || 2
+ if (this.isFloat(num)) {
+ num = num.toFixed(limit)
+ }
+ return num
+ },
+ isFloat: function isFloat(num) {
+ return num % 1 !== 0
+ },
+ approximatelyEqual: function approximatelyEqual(num1, num2) {
+ return Math.abs(num1 - num2) < 1e-10
+ },
+ isSameSign: function isSameSign(num1, num2) {
+ return (Math.abs(num1) === num1 && Math.abs(num2) === num2) || (Math.abs(num1) !== num1 && Math.abs(num2) !== num2)
+ },
+ isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) {
+ return this.isSameSign(p1.x, p2.x)
+ },
+ isCollision: function isCollision(obj1, obj2) {
+ obj1.end = {}
+ obj1.end.x = obj1.start.x + obj1.width
+ obj1.end.y = obj1.start.y - obj1.height
+ obj2.end = {}
+ obj2.end.x = obj2.start.x + obj2.width
+ obj2.end.y = obj2.start.y - obj2.height
+ var flag = obj2.start.x > obj1.end.x || obj2.end.x < obj1.start.x || obj2.end.y > obj1.start.y || obj2.start.y < obj1.end.y
+ return !flag
+ },
+}
+
+//兼容H5点击事件
+function getH5Offset(e) {
+ e.mp = {
+ changedTouches: [],
+ }
+ e.mp.changedTouches.push({
+ x: e.offsetX,
+ y: e.offsetY,
+ })
+ return e
+}
+
+// hex 转 rgba
+function hexToRgb(hexValue, opc) {
+ var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+ var hex = hexValue.replace(rgx, function (m, r, g, b) {
+ return r + r + g + g + b + b
+ })
+ var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ var r = parseInt(rgb[1], 16)
+ var g = parseInt(rgb[2], 16)
+ var b = parseInt(rgb[3], 16)
+ return "rgba(" + r + "," + g + "," + b + "," + opc + ")"
+}
+
+function findRange(num, type, limit) {
+ if (isNaN(num)) {
+ throw new Error("[uCharts] series数据需为Number格式")
+ }
+ limit = limit || 10
+ type = type ? type : "upper"
+ var multiple = 1
+ while (limit < 1) {
+ limit *= 10
+ multiple *= 10
+ }
+ if (type === "upper") {
+ num = Math.ceil(num * multiple)
+ } else {
+ num = Math.floor(num * multiple)
+ }
+ while (num % limit !== 0) {
+ if (type === "upper") {
+ if (num == num + 1) {
+ //修复数据值过大num++无效的bug by 向日葵 @xrk_jy
+ break
+ }
+ num++
+ } else {
+ num--
+ }
+ }
+ return num / multiple
+}
+
+function calCandleMA(dayArr, nameArr, colorArr, kdata) {
+ let seriesTemp = []
+ for (let k = 0; k < dayArr.length; k++) {
+ let seriesItem = {
+ data: [],
+ name: nameArr[k],
+ color: colorArr[k],
+ }
+ for (let i = 0, len = kdata.length; i < len; i++) {
+ if (i < dayArr[k]) {
+ seriesItem.data.push(null)
+ continue
+ }
+ let sum = 0
+ for (let j = 0; j < dayArr[k]; j++) {
+ sum += kdata[i - j][1]
+ }
+ seriesItem.data.push(+(sum / dayArr[k]).toFixed(3))
+ }
+ seriesTemp.push(seriesItem)
+ }
+ return seriesTemp
+}
+
+function calValidDistance(self, distance, chartData, config, opts) {
+ var dataChartAreaWidth = opts.width - opts.area[1] - opts.area[3]
+ var dataChartWidth = chartData.eachSpacing * (opts.chartData.xAxisData.xAxisPoints.length - 1)
+ if (opts.type == "mount" && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1) {
+ if (opts.extra.mount.widthRatio > 2) opts.extra.mount.widthRatio = 2
+ dataChartWidth += (opts.extra.mount.widthRatio - 1) * chartData.eachSpacing
+ }
+ var validDistance = distance
+ if (distance >= 0) {
+ validDistance = 0
+ self.uevent.trigger("scrollLeft")
+ self.scrollOption.position = "left"
+ opts.xAxis.scrollPosition = "left"
+ } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) {
+ validDistance = dataChartAreaWidth - dataChartWidth
+ self.uevent.trigger("scrollRight")
+ self.scrollOption.position = "right"
+ opts.xAxis.scrollPosition = "right"
+ } else {
+ self.scrollOption.position = distance
+ opts.xAxis.scrollPosition = distance
+ }
+ return validDistance
+}
+
+function isInAngleRange(angle, startAngle, endAngle) {
+ function adjust(angle) {
+ while (angle < 0) {
+ angle += 2 * Math.PI
+ }
+ while (angle > 2 * Math.PI) {
+ angle -= 2 * Math.PI
+ }
+ return angle
+ }
+ angle = adjust(angle)
+ startAngle = adjust(startAngle)
+ endAngle = adjust(endAngle)
+ if (startAngle > endAngle) {
+ endAngle += 2 * Math.PI
+ if (angle < startAngle) {
+ angle += 2 * Math.PI
+ }
+ }
+ return angle >= startAngle && angle <= endAngle
+}
+
+function createCurveControlPoints(points, i) {
+ function isNotMiddlePoint(points, i) {
+ if (points[i - 1] && points[i + 1]) {
+ return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y, points[i + 1].y)
+ } else {
+ return false
+ }
+ }
+ function isNotMiddlePointX(points, i) {
+ if (points[i - 1] && points[i + 1]) {
+ return points[i].x >= Math.max(points[i - 1].x, points[i + 1].x) || points[i].x <= Math.min(points[i - 1].x, points[i + 1].x)
+ } else {
+ return false
+ }
+ }
+ var a = 0.2
+ var b = 0.2
+ var pAx = null
+ var pAy = null
+ var pBx = null
+ var pBy = null
+ if (i < 1) {
+ pAx = points[0].x + (points[1].x - points[0].x) * a
+ pAy = points[0].y + (points[1].y - points[0].y) * a
+ } else {
+ pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a
+ pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a
+ }
+
+ if (i > points.length - 3) {
+ var last = points.length - 1
+ pBx = points[last].x - (points[last].x - points[last - 1].x) * b
+ pBy = points[last].y - (points[last].y - points[last - 1].y) * b
+ } else {
+ pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b
+ pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b
+ }
+ if (isNotMiddlePoint(points, i + 1)) {
+ pBy = points[i + 1].y
+ }
+ if (isNotMiddlePoint(points, i)) {
+ pAy = points[i].y
+ }
+ if (isNotMiddlePointX(points, i + 1)) {
+ pBx = points[i + 1].x
+ }
+ if (isNotMiddlePointX(points, i)) {
+ pAx = points[i].x
+ }
+ if (pAy >= Math.max(points[i].y, points[i + 1].y) || pAy <= Math.min(points[i].y, points[i + 1].y)) {
+ pAy = points[i].y
+ }
+ if (pBy >= Math.max(points[i].y, points[i + 1].y) || pBy <= Math.min(points[i].y, points[i + 1].y)) {
+ pBy = points[i + 1].y
+ }
+ if (pAx >= Math.max(points[i].x, points[i + 1].x) || pAx <= Math.min(points[i].x, points[i + 1].x)) {
+ pAx = points[i].x
+ }
+ if (pBx >= Math.max(points[i].x, points[i + 1].x) || pBx <= Math.min(points[i].x, points[i + 1].x)) {
+ pBx = points[i + 1].x
+ }
+ return {
+ ctrA: {
+ x: pAx,
+ y: pAy,
+ },
+ ctrB: {
+ x: pBx,
+ y: pBy,
+ },
+ }
+}
+
+function convertCoordinateOrigin(x, y, center) {
+ return {
+ x: center.x + x,
+ y: center.y - y,
+ }
+}
+
+function avoidCollision(obj, target) {
+ if (target) {
+ // is collision test
+ while (util.isCollision(obj, target)) {
+ if (obj.start.x > 0) {
+ obj.start.y--
+ } else if (obj.start.x < 0) {
+ obj.start.y++
+ } else {
+ if (obj.start.y > 0) {
+ obj.start.y++
+ } else {
+ obj.start.y--
+ }
+ }
+ }
+ }
+ return obj
+}
+
+function fixPieSeries(series, opts, config) {
+ let pieSeriesArr = []
+ if (series.length > 0 && series[0].data.constructor.toString().indexOf("Array") > -1) {
+ opts._pieSeries_ = series
+ let oldseries = series[0].data
+ for (var i = 0; i < oldseries.length; i++) {
+ oldseries[i].formatter = series[0].formatter
+ oldseries[i].data = oldseries[i].value
+ pieSeriesArr.push(oldseries[i])
+ }
+ opts.series = pieSeriesArr
+ } else {
+ pieSeriesArr = series
+ }
+ return pieSeriesArr
+}
+
+function fillSeries(series, opts, config) {
+ var index = 0
+ for (var i = 0; i < series.length; i++) {
+ let item = series[i]
+ if (!item.color) {
+ item.color = config.color[index]
+ index = (index + 1) % config.color.length
+ }
+ if (!item.linearIndex) {
+ item.linearIndex = i
+ }
+ if (!item.index) {
+ item.index = 0
+ }
+ if (!item.type) {
+ item.type = opts.type
+ }
+ if (typeof item.show == "undefined") {
+ item.show = true
+ }
+ if (!item.type) {
+ item.type = opts.type
+ }
+ if (!item.pointShape) {
+ item.pointShape = "circle"
+ }
+ if (!item.legendShape) {
+ switch (item.type) {
+ case "line":
+ item.legendShape = "line"
+ break
+ case "column":
+ case "bar":
+ item.legendShape = "rect"
+ break
+ case "area":
+ case "mount":
+ item.legendShape = "triangle"
+ break
+ default:
+ item.legendShape = "circle"
+ }
+ }
+ }
+ return series
+}
+
+function fillCustomColor(linearType, customColor, series, config) {
+ var newcolor = customColor || []
+ if (linearType == "custom" && newcolor.length == 0) {
+ newcolor = config.linearColor
+ }
+ if (linearType == "custom" && newcolor.length < series.length) {
+ let chazhi = series.length - newcolor.length
+ for (var i = 0; i < chazhi; i++) {
+ newcolor.push(config.linearColor[(i + 1) % config.linearColor.length])
+ }
+ }
+ return newcolor
+}
+
+function getDataRange(minData, maxData) {
+ var limit = 0
+ var range = maxData - minData
+ if (range >= 10000) {
+ limit = 1000
+ } else if (range >= 1000) {
+ limit = 100
+ } else if (range >= 100) {
+ limit = 10
+ } else if (range >= 10) {
+ limit = 5
+ } else if (range >= 1) {
+ limit = 1
+ } else if (range >= 0.1) {
+ limit = 0.1
+ } else if (range >= 0.01) {
+ limit = 0.01
+ } else if (range >= 0.001) {
+ limit = 0.001
+ } else if (range >= 0.0001) {
+ limit = 0.0001
+ } else if (range >= 0.00001) {
+ limit = 0.00001
+ } else {
+ limit = 0.000001
+ }
+ return {
+ minRange: findRange(minData, "lower", limit),
+ maxRange: findRange(maxData, "upper", limit),
+ }
+}
+
+function measureText(text, fontSize, context) {
+ var width = 0
+ text = String(text)
+ // #ifdef MP-ALIPAY || MP-BAIDU || APP-NVUE
+ context = false
+ // #endif
+ if (context !== false && context !== undefined && context.setFontSize && context.measureText) {
+ context.setFontSize(fontSize)
+ return context.measureText(text).width
+ } else {
+ var text = text.split("")
+ for (let i = 0; i < text.length; i++) {
+ let item = text[i]
+ if (/[a-zA-Z]/.test(item)) {
+ width += 7
+ } else if (/[0-9]/.test(item)) {
+ width += 5.5
+ } else if (/\./.test(item)) {
+ width += 2.7
+ } else if (/-/.test(item)) {
+ width += 3.25
+ } else if (/:/.test(item)) {
+ width += 2.5
+ } else if (/[\u4e00-\u9fa5]/.test(item)) {
+ width += 10
+ } else if (/\(|\)/.test(item)) {
+ width += 3.73
+ } else if (/\s/.test(item)) {
+ width += 2.5
+ } else if (/%/.test(item)) {
+ width += 8
+ } else {
+ width += 10
+ }
+ }
+ return (width * fontSize) / 10
+ }
+}
+
+function dataCombine(series) {
+ return series.reduce(function (a, b) {
+ return (a.data ? a.data : a).concat(b.data)
+ }, [])
+}
+
+function dataCombineStack(series, len) {
+ var sum = new Array(len)
+ for (var j = 0; j < sum.length; j++) {
+ sum[j] = 0
+ }
+ for (var i = 0; i < series.length; i++) {
+ for (var j = 0; j < sum.length; j++) {
+ sum[j] += series[i].data[j]
+ }
+ }
+ return series.reduce(function (a, b) {
+ return (a.data ? a.data : a).concat(b.data).concat(sum)
+ }, [])
+}
+
+function getTouches(touches, opts, e) {
+ let x, y
+ if (touches.clientX) {
+ if (opts.rotate) {
+ y = opts.height - touches.clientX * opts.pix
+ x = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pix / 2) * (opts.pix - 1)) * opts.pix
+ } else {
+ x = touches.clientX * opts.pix
+ y = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pix / 2) * (opts.pix - 1)) * opts.pix
+ }
+ } else {
+ if (opts.rotate) {
+ y = opts.height - touches.x * opts.pix
+ x = touches.y * opts.pix
+ } else {
+ x = touches.x * opts.pix
+ y = touches.y * opts.pix
+ }
+ }
+ return {
+ x: x,
+ y: y,
+ }
+}
+
+function getSeriesDataItem(series, index, group) {
+ var data = []
+ var newSeries = []
+ var indexIsArr = index.constructor.toString().indexOf("Array") > -1
+ if (indexIsArr) {
+ let tempSeries = filterSeries(series)
+ for (var i = 0; i < group.length; i++) {
+ newSeries.push(tempSeries[group[i]])
+ }
+ } else {
+ newSeries = series
+ }
+ for (let i = 0; i < newSeries.length; i++) {
+ let item = newSeries[i]
+ let tmpindex = -1
+ if (indexIsArr) {
+ tmpindex = index[i]
+ } else {
+ tmpindex = index
+ }
+ if (item.data[tmpindex] !== null && typeof item.data[tmpindex] !== "undefined" && item.show) {
+ let seriesItem = {}
+ seriesItem.color = item.color
+ seriesItem.type = item.type
+ seriesItem.style = item.style
+ seriesItem.pointShape = item.pointShape
+ seriesItem.disableLegend = item.disableLegend
+ seriesItem.legendShape = item.legendShape
+ seriesItem.name = item.name
+ seriesItem.show = item.show
+ seriesItem.data = item.formatter ? item.formatter(item.data[tmpindex]) : item.data[tmpindex]
+ data.push(seriesItem)
+ }
+ }
+ return data
+}
+
+function getMaxTextListLength(list, fontSize, context) {
+ var lengthList = list.map(function (item) {
+ return measureText(item, fontSize, context)
+ })
+ return Math.max.apply(null, lengthList)
+}
+
+function getRadarCoordinateSeries(length) {
+ var eachAngle = (2 * Math.PI) / length
+ var CoordinateSeries = []
+ for (var i = 0; i < length; i++) {
+ CoordinateSeries.push(eachAngle * i)
+ }
+ return CoordinateSeries.map(function (item) {
+ return -1 * item + Math.PI / 2
+ })
+}
+
+function getToolTipData(seriesData, opts, index, group, categories) {
+ var option = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {}
+ var calPoints = opts.chartData.calPoints ? opts.chartData.calPoints : []
+ let points = {}
+ if (group.length > 0) {
+ let filterPoints = []
+ for (let i = 0; i < group.length; i++) {
+ filterPoints.push(calPoints[group[i]])
+ }
+ points = filterPoints[0][index[0]]
+ } else {
+ for (let i = 0; i < calPoints.length; i++) {
+ if (calPoints[i][index]) {
+ points = calPoints[i][index]
+ break
+ }
+ }
+ }
+ var textList = seriesData.map(function (item) {
+ let titleText = null
+ if (opts.categories && opts.categories.length > 0) {
+ titleText = categories[index]
+ }
+ return {
+ text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ": " + item.data,
+ color: item.color,
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ })
+ var offset = {
+ x: Math.round(points.x),
+ y: Math.round(points.y),
+ }
+ return {
+ textList: textList,
+ offset: offset,
+ }
+}
+
+function getMixToolTipData(seriesData, opts, index, categories) {
+ var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {}
+ var points = opts.chartData.xAxisPoints[index] + opts.chartData.eachSpacing / 2
+ var textList = seriesData.map(function (item) {
+ return {
+ text: option.formatter ? option.formatter(item, categories[index], index, opts) : item.name + ": " + item.data,
+ color: item.color,
+ disableLegend: item.disableLegend ? true : false,
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ })
+ textList = textList.filter(function (item) {
+ if (item.disableLegend !== true) {
+ return item
+ }
+ })
+ var offset = {
+ x: Math.round(points),
+ y: 0,
+ }
+ return {
+ textList: textList,
+ offset: offset,
+ }
+}
+
+function getCandleToolTipData(series, seriesData, opts, index, categories, extra) {
+ var option = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {}
+ var calPoints = opts.chartData.calPoints
+ let upColor = extra.color.upFill
+ let downColor = extra.color.downFill
+ //颜色顺序为开盘，收盘，最低，最高
+ let color = [upColor, upColor, downColor, upColor]
+ var textList = []
+ seriesData.map(function (item) {
+ if (index == 0) {
+ if (item.data[1] - item.data[0] < 0) {
+ color[1] = downColor
+ } else {
+ color[1] = upColor
+ }
+ } else {
+ if (item.data[0] < series[index - 1][1]) {
+ color[0] = downColor
+ }
+ if (item.data[1] < item.data[0]) {
+ color[1] = downColor
+ }
+ if (item.data[2] > series[index - 1][1]) {
+ color[2] = upColor
+ }
+ if (item.data[3] < series[index - 1][1]) {
+ color[3] = downColor
+ }
+ }
+ let text1 = {
+ text: "开盘：" + item.data[0],
+ color: color[0],
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ let text2 = {
+ text: "收盘：" + item.data[1],
+ color: color[1],
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ let text3 = {
+ text: "最低：" + item.data[2],
+ color: color[2],
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ let text4 = {
+ text: "最高：" + item.data[3],
+ color: color[3],
+ legendShape: opts.extra.tooltip.legendShape == "auto" ? item.legendShape : opts.extra.tooltip.legendShape,
+ }
+ textList.push(text1, text2, text3, text4)
+ })
+ var validCalPoints = []
+ var offset = {
+ x: 0,
+ y: 0,
+ }
+ for (let i = 0; i < calPoints.length; i++) {
+ let points = calPoints[i]
+ if (typeof points[index] !== "undefined" && points[index] !== null) {
+ validCalPoints.push(points[index])
+ }
+ }
+ offset.x = Math.round(validCalPoints[0][0].x)
+ return {
+ textList: textList,
+ offset: offset,
+ }
+}
+
+function filterSeries(series) {
+ let tempSeries = []
+ for (let i = 0; i < series.length; i++) {
+ if (series[i].show == true) {
+ tempSeries.push(series[i])
+ }
+ }
+ return tempSeries
+}
+
+function findCurrentIndex(currentPoints, calPoints, opts, config) {
+ var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0
+ var current = { index: -1, group: [] }
+ var spacing = opts.chartData.eachSpacing / 2
+ let xAxisPoints = []
+ if (calPoints && calPoints.length > 0) {
+ if (!opts.categories) {
+ spacing = 0
+ } else {
+ for (let i = 1; i < opts.chartData.xAxisPoints.length; i++) {
+ xAxisPoints.push(opts.chartData.xAxisPoints[i] - spacing)
+ }
+ if ((opts.type == "line" || opts.type == "area") && opts.xAxis.boundaryGap == "justify") {
+ xAxisPoints = opts.chartData.xAxisPoints
+ }
+ }
+ if (isInExactChartArea(currentPoints, opts, config)) {
+ if (!opts.categories) {
+ let timePoints = Array(calPoints.length)
+ for (let i = 0; i < calPoints.length; i++) {
+ timePoints[i] = Array(calPoints[i].length)
+ for (let j = 0; j < calPoints[i].length; j++) {
+ timePoints[i][j] = Math.abs(calPoints[i][j].x - currentPoints.x)
+ }
+ }
+ let pointValue = Array(timePoints.length)
+ let pointIndex = Array(timePoints.length)
+ for (let i = 0; i < timePoints.length; i++) {
+ pointValue[i] = Math.min.apply(null, timePoints[i])
+ pointIndex[i] = timePoints[i].indexOf(pointValue[i])
+ }
+ let minValue = Math.min.apply(null, pointValue)
+ current.index = []
+ for (let i = 0; i < pointValue.length; i++) {
+ if (pointValue[i] == minValue) {
+ current.group.push(i)
+ current.index.push(pointIndex[i])
+ }
+ }
+ } else {
+ xAxisPoints.forEach(function (item, index) {
+ if (currentPoints.x + offset + spacing > item) {
+ current.index = index
+ }
+ })
+ }
+ }
+ }
+ return current
+}
+
+function findBarChartCurrentIndex(currentPoints, calPoints, opts, config) {
+ var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0
+ var current = { index: -1, group: [] }
+ var spacing = opts.chartData.eachSpacing / 2
+ let yAxisPoints = opts.chartData.yAxisPoints
+ if (calPoints && calPoints.length > 0) {
+ if (isInExactChartArea(currentPoints, opts, config)) {
+ yAxisPoints.forEach(function (item, index) {
+ if (currentPoints.y + offset + spacing > item) {
+ current.index = index
+ }
+ })
+ }
+ }
+ return current
+}
+
+function findLegendIndex(currentPoints, legendData, opts) {
+ let currentIndex = -1
+ let gap = 0
+ if (isInExactLegendArea(currentPoints, legendData.area)) {
+ let points = legendData.points
+ let index = -1
+ for (let i = 0, len = points.length; i < len; i++) {
+ let item = points[i]
+ for (let j = 0; j < item.length; j++) {
+ index += 1
+ let area = item[j]["area"]
+ if (
+ area &&
+ currentPoints.x > area[0] - gap &&
+ currentPoints.x < area[2] + gap &&
+ currentPoints.y > area[1] - gap &&
+ currentPoints.y < area[3] + gap
+ ) {
+ currentIndex = index
+ break
+ }
+ }
+ }
+ return currentIndex
+ }
+ return currentIndex
+}
+
+function isInExactLegendArea(currentPoints, area) {
+ return currentPoints.x > area.start.x && currentPoints.x < area.end.x && currentPoints.y > area.start.y && currentPoints.y < area.end.y
+}
+
+function isInExactChartArea(currentPoints, opts, config) {
+ return (
+ currentPoints.x <= opts.width - opts.area[1] + 10 &&
+ currentPoints.x >= opts.area[3] - 10 &&
+ currentPoints.y >= opts.area[0] &&
+ currentPoints.y <= opts.height - opts.area[2]
+ )
+}
+
+function findRadarChartCurrentIndex(currentPoints, radarData, count) {
+ var eachAngleArea = (2 * Math.PI) / count
+ var currentIndex = -1
+ if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
+ var fixAngle = function fixAngle(angle) {
+ if (angle < 0) {
+ angle += 2 * Math.PI
+ }
+ if (angle > 2 * Math.PI) {
+ angle -= 2 * Math.PI
+ }
+ return angle
+ }
+ var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x)
+ angle = -1 * angle
+ if (angle < 0) {
+ angle += 2 * Math.PI
+ }
+ var angleList = radarData.angleList.map(function (item) {
+ item = fixAngle(-1 * item)
+ return item
+ })
+ angleList.forEach(function (item, index) {
+ var rangeStart = fixAngle(item - eachAngleArea / 2)
+ var rangeEnd = fixAngle(item + eachAngleArea / 2)
+ if (rangeEnd < rangeStart) {
+ rangeEnd += 2 * Math.PI
+ }
+ if ((angle >= rangeStart && angle <= rangeEnd) || (angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd)) {
+ currentIndex = index
+ }
+ })
+ }
+ return currentIndex
+}
+
+function findFunnelChartCurrentIndex(currentPoints, funnelData) {
+ var currentIndex = -1
+ for (var i = 0, len = funnelData.series.length; i < len; i++) {
+ var item = funnelData.series[i]
+ if (
+ currentPoints.x > item.funnelArea[0] &&
+ currentPoints.x < item.funnelArea[2] &&
+ currentPoints.y > item.funnelArea[1] &&
+ currentPoints.y < item.funnelArea[3]
+ ) {
+ currentIndex = i
+ break
+ }
+ }
+ return currentIndex
+}
+
+function findWordChartCurrentIndex(currentPoints, wordData) {
+ var currentIndex = -1
+ for (var i = 0, len = wordData.length; i < len; i++) {
+ var item = wordData[i]
+ if (
+ currentPoints.x > item.area[0] &&
+ currentPoints.x < item.area[2] &&
+ currentPoints.y > item.area[1] &&
+ currentPoints.y < item.area[3]
+ ) {
+ currentIndex = i
+ break
+ }
+ }
+ return currentIndex
+}
+
+function findMapChartCurrentIndex(currentPoints, opts) {
+ var currentIndex = -1
+ var cData = opts.chartData.mapData
+ var data = opts.series
+ var tmp = pointToCoordinate(currentPoints.y, currentPoints.x, cData.bounds, cData.scale, cData.xoffset, cData.yoffset)
+ var poi = [tmp.x, tmp.y]
+ for (var i = 0, len = data.length; i < len; i++) {
+ var item = data[i].geometry.coordinates
+ if (isPoiWithinPoly(poi, item, opts.chartData.mapData.mercator)) {
+ currentIndex = i
+ break
+ }
+ }
+ return currentIndex
+}
+
+function findRoseChartCurrentIndex(currentPoints, pieData, opts) {
+ var currentIndex = -1
+ var series = getRoseDataPoints(opts._series_, opts.extra.rose.type, pieData.radius, pieData.radius)
+ if (pieData && pieData.center && isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
+ var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x)
+ angle = -angle
+ if (opts.extra.rose && opts.extra.rose.offsetAngle) {
+ angle = angle - (opts.extra.rose.offsetAngle * Math.PI) / 180
+ }
+ for (var i = 0, len = series.length; i < len; i++) {
+ if (isInAngleRange(angle, series[i]._start_, series[i]._start_ + series[i]._rose_proportion_ * 2 * Math.PI)) {
+ currentIndex = i
+ break
+ }
+ }
+ }
+ return currentIndex
+}
+
+function findPieChartCurrentIndex(currentPoints, pieData, opts) {
+ var currentIndex = -1
+ var series = getPieDataPoints(pieData.series)
+ if (pieData && pieData.center && isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
+ var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x)
+ angle = -angle
+ if (opts.extra.pie && opts.extra.pie.offsetAngle) {
+ angle = angle - (opts.extra.pie.offsetAngle * Math.PI) / 180
+ }
+ if (opts.extra.ring && opts.extra.ring.offsetAngle) {
+ angle = angle - (opts.extra.ring.offsetAngle * Math.PI) / 180
+ }
+ for (var i = 0, len = series.length; i < len; i++) {
+ if (isInAngleRange(angle, series[i]._start_, series[i]._start_ + series[i]._proportion_ * 2 * Math.PI)) {
+ currentIndex = i
+ break
+ }
+ }
+ }
+ return currentIndex
+}
+
+function isInExactPieChartArea(currentPoints, center, radius) {
+ return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2)
+}
+
+function splitPoints(points, eachSeries) {
+ var newPoints = []
+ var items = []
+ points.forEach(function (item, index) {
+ if (eachSeries.connectNulls) {
+ if (item !== null) {
+ items.push(item)
+ }
+ } else {
+ if (item !== null) {
+ items.push(item)
+ } else {
+ if (items.length) {
+ newPoints.push(items)
+ }
+ items = []
+ }
+ }
+ })
+ if (items.length) {
+ newPoints.push(items)
+ }
+ return newPoints
+}
+
+function calLegendData(series, opts, config, chartData, context) {
+ let legendData = {
+ area: {
+ start: {
+ x: 0,
+ y: 0,
+ },
+ end: {
+ x: 0,
+ y: 0,
+ },
+ width: 0,
+ height: 0,
+ wholeWidth: 0,
+ wholeHeight: 0,
+ },
+ points: [],
+ widthArr: [],
+ heightArr: [],
+ }
+ if (opts.legend.show === false) {
+ chartData.legendData = legendData
+ return legendData
+ }
+ let padding = opts.legend.padding * opts.pix
+ let margin = opts.legend.margin * opts.pix
+ let fontSize = opts.legend.fontSize ? opts.legend.fontSize * opts.pix : config.fontSize
+ let shapeWidth = 15 * opts.pix
+ let shapeRight = 5 * opts.pix
+ let lineHeight = Math.max(opts.legend.lineHeight * opts.pix, fontSize)
+ if (opts.legend.position == "top" || opts.legend.position == "bottom") {
+ let legendList = []
+ let widthCount = 0
+ let widthCountArr = []
+ let currentRow = []
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ const legendText = item.legendText ? item.legendText : item.name
+ let itemWidth = shapeWidth + shapeRight + measureText(legendText || "undefined", fontSize, context) + opts.legend.itemGap * opts.pix
+ if (widthCount + itemWidth > opts.width - opts.area[1] - opts.area[3]) {
+ legendList.push(currentRow)
+ widthCountArr.push(widthCount - opts.legend.itemGap * opts.pix)
+ widthCount = itemWidth
+ currentRow = [item]
+ } else {
+ widthCount += itemWidth
+ currentRow.push(item)
+ }
+ }
+ if (currentRow.length) {
+ legendList.push(currentRow)
+ widthCountArr.push(widthCount - opts.legend.itemGap * opts.pix)
+ legendData.widthArr = widthCountArr
+ let legendWidth = Math.max.apply(null, widthCountArr)
+ switch (opts.legend.float) {
+ case "left":
+ legendData.area.start.x = opts.area[3]
+ legendData.area.end.x = opts.area[3] + legendWidth + 2 * padding
+ break
+ case "right":
+ legendData.area.start.x = opts.width - opts.area[1] - legendWidth - 2 * padding
+ legendData.area.end.x = opts.width - opts.area[1]
+ break
+ default:
+ legendData.area.start.x = (opts.width - legendWidth) / 2 - padding
+ legendData.area.end.x = (opts.width + legendWidth) / 2 + padding
+ }
+ legendData.area.width = legendWidth + 2 * padding
+ legendData.area.wholeWidth = legendWidth + 2 * padding
+ legendData.area.height = legendList.length * lineHeight + 2 * padding
+ legendData.area.wholeHeight = legendList.length * lineHeight + 2 * padding + 2 * margin
+ legendData.points = legendList
+ }
+ } else {
+ let len = series.length
+ let maxHeight = opts.height - opts.area[0] - opts.area[2] - 2 * margin - 2 * padding
+ let maxLength = Math.min(Math.floor(maxHeight / lineHeight), len)
+ legendData.area.height = maxLength * lineHeight + padding * 2
+ legendData.area.wholeHeight = maxLength * lineHeight + padding * 2
+ switch (opts.legend.float) {
+ case "top":
+ legendData.area.start.y = opts.area[0] + margin
+ legendData.area.end.y = opts.area[0] + margin + legendData.area.height
+ break
+ case "bottom":
+ legendData.area.start.y = opts.height - opts.area[2] - margin - legendData.area.height
+ legendData.area.end.y = opts.height - opts.area[2] - margin
+ break
+ default:
+ legendData.area.start.y = (opts.height - legendData.area.height) / 2
+ legendData.area.end.y = (opts.height + legendData.area.height) / 2
+ }
+ let lineNum = len % maxLength === 0 ? len / maxLength : Math.floor(len / maxLength + 1)
+ let currentRow = []
+ for (let i = 0; i < lineNum; i++) {
+ let temp = series.slice(i * maxLength, i * maxLength + maxLength)
+ currentRow.push(temp)
+ }
+ legendData.points = currentRow
+ if (currentRow.length) {
+ for (let i = 0; i < currentRow.length; i++) {
+ let item = currentRow[i]
+ let maxWidth = 0
+ for (let j = 0; j < item.length; j++) {
+ let itemWidth =
+ shapeWidth + shapeRight + measureText(item[j].name || "undefined", fontSize, context) + opts.legend.itemGap * opts.pix
+ if (itemWidth > maxWidth) {
+ maxWidth = itemWidth
+ }
+ }
+ legendData.widthArr.push(maxWidth)
+ legendData.heightArr.push(item.length * lineHeight + padding * 2)
+ }
+ let legendWidth = 0
+ for (let i = 0; i < legendData.widthArr.length; i++) {
+ legendWidth += legendData.widthArr[i]
+ }
+ legendData.area.width = legendWidth - opts.legend.itemGap * opts.pix + 2 * padding
+ legendData.area.wholeWidth = legendData.area.width + padding
+ }
+ }
+ switch (opts.legend.position) {
+ case "top":
+ legendData.area.start.y = opts.area[0] + margin
+ legendData.area.end.y = opts.area[0] + margin + legendData.area.height
+ break
+ case "bottom":
+ legendData.area.start.y = opts.height - opts.area[2] - legendData.area.height - margin
+ legendData.area.end.y = opts.height - opts.area[2] - margin
+ break
+ case "left":
+ legendData.area.start.x = opts.area[3]
+ legendData.area.end.x = opts.area[3] + legendData.area.width
+ break
+ case "right":
+ legendData.area.start.x = opts.width - opts.area[1] - legendData.area.width
+ legendData.area.end.x = opts.width - opts.area[1]
+ break
+ }
+ chartData.legendData = legendData
+ return legendData
+}
+
+function calCategoriesData(categories, opts, config, eachSpacing, context) {
+ var result = {
+ angle: 0,
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix,
+ }
+ var fontSize = opts.xAxis.fontSize * opts.pix
+ var categoriesTextLenth = categories.map(function (item, index) {
+ var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item, index, opts) : item
+ return measureText(String(xitem), fontSize, context)
+ })
+ var maxTextLength = Math.max.apply(this, categoriesTextLenth)
+ if (opts.xAxis.rotateLabel == true) {
+ result.angle = (opts.xAxis.rotateAngle * Math.PI) / 180
+ let tempHeight = opts.xAxis.marginTop * opts.pix * 2 + Math.abs(maxTextLength * Math.sin(result.angle))
+ tempHeight = tempHeight < fontSize + opts.xAxis.marginTop * opts.pix * 2 ? tempHeight + opts.xAxis.marginTop * opts.pix * 2 : tempHeight
+ result.xAxisHeight = tempHeight
+ }
+ if (opts.enableScroll && opts.xAxis.scrollShow) {
+ result.xAxisHeight += 6 * opts.pix
+ }
+ if (opts.xAxis.disabled) {
+ result.xAxisHeight = 0
+ }
+ return result
+}
+
+function getXAxisTextList(series, opts, config, stack) {
+ var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1
+ var data
+ if (stack == "stack") {
+ data = dataCombineStack(series, opts.categories.length)
+ } else {
+ data = dataCombine(series)
+ }
+ var sorted = []
+ // remove null from data
+ data = data.filter(function (item) {
+ //return item !== null;
+ if (typeof item === "object" && item !== null) {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ return item !== null
+ } else {
+ return item.value !== null
+ }
+ } else {
+ return item !== null
+ }
+ })
+ data.map(function (item) {
+ if (typeof item === "object") {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ if (opts.type == "candle") {
+ item.map(function (subitem) {
+ sorted.push(subitem)
+ })
+ } else {
+ sorted.push(item[0])
+ }
+ } else {
+ sorted.push(item.value)
+ }
+ } else {
+ sorted.push(item)
+ }
+ })
+
+ var minData = 0
+ var maxData = 0
+ if (sorted.length > 0) {
+ minData = Math.min.apply(this, sorted)
+ maxData = Math.max.apply(this, sorted)
+ }
+ //为了兼容v1.9.0之前的项目
+ if (index > -1) {
+ if (typeof opts.xAxis.data[index].min === "number") {
+ minData = Math.min(opts.xAxis.data[index].min, minData)
+ }
+ if (typeof opts.xAxis.data[index].max === "number") {
+ maxData = Math.max(opts.xAxis.data[index].max, maxData)
+ }
+ } else {
+ if (typeof opts.xAxis.min === "number") {
+ minData = Math.min(opts.xAxis.min, minData)
+ }
+ if (typeof opts.xAxis.max === "number") {
+ maxData = Math.max(opts.xAxis.max, maxData)
+ }
+ }
+ if (minData === maxData) {
+ var rangeSpan = maxData || 10
+ maxData += rangeSpan
+ }
+ //var dataRange = getDataRange(minData, maxData);
+ var minRange = minData
+ var maxRange = maxData
+ var range = []
+ var eachRange = (maxRange - minRange) / opts.xAxis.splitNumber
+ for (var i = 0; i <= opts.xAxis.splitNumber; i++) {
+ range.push(minRange + eachRange * i)
+ }
+ return range
+}
+
+function calXAxisData(series, opts, config, context) {
+ //堆叠图重算Y轴
+ var columnstyle = assign(
+ {},
+ {
+ type: "",
+ },
+ opts.extra.bar,
+ )
+ var result = {
+ angle: 0,
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix,
+ }
+ result.ranges = getXAxisTextList(series, opts, config, columnstyle.type)
+ result.rangesFormat = result.ranges.map(function (item) {
+ //item = opts.xAxis.formatter ? opts.xAxis.formatter(item) : util.toFixed(item, 2);
+ item = util.toFixed(item, 2)
+ return item
+ })
+ var xAxisScaleValues = result.ranges.map(function (item) {
+ // 如果刻度值是浮点数,则保留两位小数
+ item = util.toFixed(item, 2)
+ // 若有自定义格式则调用自定义的格式化函数
+ //item = opts.xAxis.formatter ? opts.xAxis.formatter(Number(item)) : item;
+ return item
+ })
+ result = Object.assign(result, getXAxisPoints(xAxisScaleValues, opts, config))
+ // 计算X轴刻度的属性譬如每个刻度的间隔,刻度的起始点\结束点以及总长
+ var eachSpacing = result.eachSpacing
+ var textLength = xAxisScaleValues.map(function (item) {
+ return measureText(item, opts.xAxis.fontSize * opts.pix, context)
+ })
+ if (opts.xAxis.disabled === true) {
+ result.xAxisHeight = 0
+ }
+ return result
+}
+
+function getRadarDataPoints(angleList, center, radius, series, opts) {
+ var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1
+ var radarOption = opts.extra.radar || {}
+ radarOption.max = radarOption.max || 0
+ var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)))
+ var data = []
+ for (let i = 0; i < series.length; i++) {
+ let each = series[i]
+ let listItem = {}
+ listItem.color = each.color
+ listItem.legendShape = each.legendShape
+ listItem.pointShape = each.pointShape
+ listItem.data = []
+ each.data.forEach(function (item, index) {
+ let tmp = {}
+ tmp.angle = angleList[index]
+ tmp.proportion = item / maxData
+ tmp.value = item
+ tmp.position = convertCoordinateOrigin(
+ radius * tmp.proportion * process * Math.cos(tmp.angle),
+ radius * tmp.proportion * process * Math.sin(tmp.angle),
+ center,
+ )
+ listItem.data.push(tmp)
+ })
+ data.push(listItem)
+ }
+ return data
+}
+
+function getPieDataPoints(series, radius) {
+ var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1
+ var count = 0
+ var _start_ = 0
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ count += item.data
+ }
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ if (count === 0) {
+ item._proportion_ = (1 / series.length) * process
+ } else {
+ item._proportion_ = (item.data / count) * process
+ }
+ item._radius_ = radius
+ }
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item._start_ = _start_
+ _start_ += 2 * item._proportion_ * Math.PI
+ }
+ return series
+}
+
+function getFunnelDataPoints(series, radius, option, eachSpacing) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ for (let i = 0; i < series.length; i++) {
+ if (option.type == "funnel") {
+ series[i].radius = (series[i].data / series[0].data) * radius * process
+ } else {
+ series[i].radius = ((eachSpacing * (series.length - i)) / (eachSpacing * series.length)) * radius * process
+ }
+ series[i]._proportion_ = series[i].data / series[0].data
+ }
+ // if(option.type !== 'pyramid'){
+ // series.reverse();
+ // }
+ return series
+}
+
+function getRoseDataPoints(series, type, minRadius, radius) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var count = 0
+ var _start_ = 0
+ var dataArr = []
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ count += item.data
+ dataArr.push(item.data)
+ }
+ var minData = Math.min.apply(null, dataArr)
+ var maxData = Math.max.apply(null, dataArr)
+ var radiusLength = radius - minRadius
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ if (count === 0) {
+ item._proportion_ = (1 / series.length) * process
+ item._rose_proportion_ = (1 / series.length) * process
+ } else {
+ item._proportion_ = (item.data / count) * process
+ if (type == "area") {
+ item._rose_proportion_ = (1 / series.length) * process
+ } else {
+ item._rose_proportion_ = (item.data / count) * process
+ }
+ }
+ item._radius_ = minRadius + radiusLength * ((item.data - minData) / (maxData - minData)) || radius
+ }
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item._start_ = _start_
+ _start_ += 2 * item._rose_proportion_ * Math.PI
+ }
+ return series
+}
+
+function getArcbarDataPoints(series, arcbarOption) {
+ var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1
+ if (process == 1) {
+ process = 0.999999
+ }
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ let totalAngle
+ if (arcbarOption.type == "circle") {
+ totalAngle = 2
+ } else {
+ if (arcbarOption.direction == "ccw") {
+ if (arcbarOption.startAngle < arcbarOption.endAngle) {
+ totalAngle = 2 + arcbarOption.startAngle - arcbarOption.endAngle
+ } else {
+ totalAngle = arcbarOption.startAngle - arcbarOption.endAngle
+ }
+ } else {
+ if (arcbarOption.endAngle < arcbarOption.startAngle) {
+ totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle
+ } else {
+ totalAngle = arcbarOption.startAngle - arcbarOption.endAngle
+ }
+ }
+ }
+ item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle
+ if (arcbarOption.direction == "ccw") {
+ item._proportion_ = arcbarOption.startAngle - totalAngle * item.data * process
+ }
+ if (item._proportion_ >= 2) {
+ item._proportion_ = item._proportion_ % 2
+ }
+ }
+ return series
+}
+
+function getGaugeArcbarDataPoints(series, arcbarOption) {
+ var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1
+ if (process == 1) {
+ process = 0.999999
+ }
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ let totalAngle
+ if (arcbarOption.type == "circle") {
+ totalAngle = 2
+ } else {
+ if (arcbarOption.endAngle < arcbarOption.startAngle) {
+ totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle
+ } else {
+ totalAngle = arcbarOption.startAngle - arcbarOption.endAngle
+ }
+ }
+ item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle
+ if (item._proportion_ >= 2) {
+ item._proportion_ = item._proportion_ % 2
+ }
+ }
+ return series
+}
+
+function getGaugeAxisPoints(categories, startAngle, endAngle) {
+ let totalAngle
+ if (endAngle < startAngle) {
+ totalAngle = 2 + endAngle - startAngle
+ } else {
+ totalAngle = startAngle - endAngle
+ }
+ let tempStartAngle = startAngle
+ for (let i = 0; i < categories.length; i++) {
+ categories[i].value = categories[i].value === null ? 0 : categories[i].value
+ categories[i]._startAngle_ = tempStartAngle
+ categories[i]._endAngle_ = totalAngle * categories[i].value + startAngle
+ if (categories[i]._endAngle_ >= 2) {
+ categories[i]._endAngle_ = categories[i]._endAngle_ % 2
+ }
+ tempStartAngle = categories[i]._endAngle_
+ }
+ return categories
+}
+
+function getGaugeDataPoints(series, categories, gaugeOption) {
+ let process = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ item.data = item.data === null ? 0 : item.data
+ if (gaugeOption.pointer.color == "auto") {
+ for (let i = 0; i < categories.length; i++) {
+ if (item.data <= categories[i].value) {
+ item.color = categories[i].color
+ break
+ }
+ }
+ } else {
+ item.color = gaugeOption.pointer.color
+ }
+ let totalAngle
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle
+ }
+ item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle
+ item._oldAngle_ = gaugeOption.oldAngle
+ if (gaugeOption.oldAngle < gaugeOption.endAngle) {
+ item._oldAngle_ += 2
+ }
+ if (item.data >= gaugeOption.oldData) {
+ item._proportion_ = (item._endAngle_ - item._oldAngle_) * process + gaugeOption.oldAngle
+ } else {
+ item._proportion_ = item._oldAngle_ - (item._oldAngle_ - item._endAngle_) * process
+ }
+ if (item._proportion_ >= 2) {
+ item._proportion_ = item._proportion_ % 2
+ }
+ }
+ return series
+}
+
+function getPieTextMaxLength(series, config, context, opts) {
+ series = getPieDataPoints(series)
+ let maxLength = 0
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ let text = item.formatter ? item.formatter(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + "%"
+ maxLength = Math.max(maxLength, measureText(text, item.textSize * opts.pix || config.fontSize, context))
+ }
+ return maxLength
+}
+
+function fixColumeData(points, eachSpacing, columnLen, index, config, opts) {
+ return points.map(function (item) {
+ if (item === null) {
+ return null
+ }
+ var seriesGap = 0
+ var categoryGap = 0
+ if (opts.type == "mix") {
+ seriesGap = opts.extra.mix.column.seriesGap * opts.pix || 0
+ categoryGap = opts.extra.mix.column.categoryGap * opts.pix || 0
+ } else {
+ seriesGap = opts.extra.column.seriesGap * opts.pix || 0
+ categoryGap = opts.extra.column.categoryGap * opts.pix || 0
+ }
+ seriesGap = Math.min(seriesGap, eachSpacing / columnLen)
+ categoryGap = Math.min(categoryGap, eachSpacing / columnLen)
+ item.width = Math.ceil((eachSpacing - 2 * categoryGap - seriesGap * (columnLen - 1)) / columnLen)
+ if (opts.extra.mix && opts.extra.mix.column.width && +opts.extra.mix.column.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.mix.column.width * opts.pix)
+ }
+ if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.column.width * opts.pix)
+ }
+ if (item.width <= 0) {
+ item.width = 1
+ }
+ item.x += (index + 0.5 - columnLen / 2) * (item.width + seriesGap)
+ return item
+ })
+}
+
+function fixBarData(points, eachSpacing, columnLen, index, config, opts) {
+ return points.map(function (item) {
+ if (item === null) {
+ return null
+ }
+ var seriesGap = 0
+ var categoryGap = 0
+ seriesGap = opts.extra.bar.seriesGap * opts.pix || 0
+ categoryGap = opts.extra.bar.categoryGap * opts.pix || 0
+ seriesGap = Math.min(seriesGap, eachSpacing / columnLen)
+ categoryGap = Math.min(categoryGap, eachSpacing / columnLen)
+ item.width = Math.ceil((eachSpacing - 2 * categoryGap - seriesGap * (columnLen - 1)) / columnLen)
+ if (opts.extra.bar && opts.extra.bar.width && +opts.extra.bar.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.bar.width * opts.pix)
+ }
+ if (item.width <= 0) {
+ item.width = 1
+ }
+ item.y += (index + 0.5 - columnLen / 2) * (item.width + seriesGap)
+ return item
+ })
+}
+
+function fixColumeMeterData(points, eachSpacing, columnLen, index, config, opts, border) {
+ var categoryGap = opts.extra.column.categoryGap * opts.pix || 0
+ return points.map(function (item) {
+ if (item === null) {
+ return null
+ }
+ item.width = eachSpacing - 2 * categoryGap
+ if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.column.width * opts.pix)
+ }
+ if (index > 0) {
+ item.width -= border
+ }
+ return item
+ })
+}
+
+function fixColumeStackData(points, eachSpacing, columnLen, index, config, opts, series) {
+ var categoryGap = opts.extra.column.categoryGap * opts.pix || 0
+ return points.map(function (item, indexn) {
+ if (item === null) {
+ return null
+ }
+ item.width = Math.ceil(eachSpacing - 2 * categoryGap)
+ if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.column.width * opts.pix)
+ }
+ if (item.width <= 0) {
+ item.width = 1
+ }
+ return item
+ })
+}
+
+function fixBarStackData(points, eachSpacing, columnLen, index, config, opts, series) {
+ var categoryGap = opts.extra.bar.categoryGap * opts.pix || 0
+ return points.map(function (item, indexn) {
+ if (item === null) {
+ return null
+ }
+ item.width = Math.ceil(eachSpacing - 2 * categoryGap)
+ if (opts.extra.bar && opts.extra.bar.width && +opts.extra.bar.width > 0) {
+ item.width = Math.min(item.width, +opts.extra.bar.width * opts.pix)
+ }
+ if (item.width <= 0) {
+ item.width = 1
+ }
+ return item
+ })
+}
+
+function getXAxisPoints(categories, opts, config) {
+ var spacingValid = opts.width - opts.area[1] - opts.area[3]
+ var dataCount = opts.enableScroll ? Math.min(opts.xAxis.itemCount, categories.length) : categories.length
+ if (
+ (opts.type == "line" || opts.type == "area" || opts.type == "scatter" || opts.type == "bubble" || opts.type == "bar") &&
+ dataCount > 1 &&
+ opts.xAxis.boundaryGap == "justify"
+ ) {
+ dataCount -= 1
+ }
+ var widthRatio = 0
+ if (opts.type == "mount" && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1) {
+ if (opts.extra.mount.widthRatio > 2) opts.extra.mount.widthRatio = 2
+ widthRatio = opts.extra.mount.widthRatio - 1
+ dataCount += widthRatio
+ }
+ var eachSpacing = spacingValid / dataCount
+ var xAxisPoints = []
+ var startX = opts.area[3]
+ var endX = opts.width - opts.area[1]
+ categories.forEach(function (item, index) {
+ xAxisPoints.push(startX + (widthRatio / 2) * eachSpacing + index * eachSpacing)
+ })
+ if (opts.xAxis.boundaryGap !== "justify") {
+ if (opts.enableScroll === true) {
+ xAxisPoints.push(startX + widthRatio * eachSpacing + categories.length * eachSpacing)
+ } else {
+ xAxisPoints.push(endX)
+ }
+ }
+ return {
+ xAxisPoints: xAxisPoints,
+ startX: startX,
+ endX: endX,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
+ var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var cPoints = []
+ item.forEach(function (items, indexs) {
+ var point = {}
+ point.x = xAxisPoints[index] + Math.round(eachSpacing / 2)
+ var value = items.value || items
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ height *= process
+ point.y = opts.height - Math.round(height) - opts.area[2]
+ cPoints.push(point)
+ })
+ points.push(cPoints)
+ }
+ })
+ return points
+}
+
+function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
+ var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1
+ var boundaryGap = "center"
+ if (opts.type == "line" || opts.type == "area" || opts.type == "scatter" || opts.type == "bubble") {
+ boundaryGap = opts.xAxis.boundaryGap
+ }
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ var validWidth = opts.width - opts.area[1] - opts.area[3]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.x = xAxisPoints[index]
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ let xranges, xminRange, xmaxRange
+ xranges = [].concat(opts.chartData.xAxisData.ranges)
+ xminRange = xranges.shift()
+ xmaxRange = xranges.pop()
+ value = item[1]
+ point.x = opts.area[3] + (validWidth * (item[0] - xminRange)) / (xmaxRange - xminRange)
+ if (opts.type == "bubble") {
+ point.r = item[2]
+ point.t = item[3]
+ }
+ } else {
+ value = item.value
+ }
+ }
+ if (boundaryGap == "center") {
+ point.x += eachSpacing / 2
+ }
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ height *= process
+ point.y = opts.height - height - opts.area[2]
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process) {
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1
+ var boundaryGap = opts.xAxis.boundaryGap
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ var validWidth = opts.width - opts.area[1] - opts.area[3]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ if (lineOption.animation == "vertical") {
+ point.x = xAxisPoints[index]
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ let xranges, xminRange, xmaxRange
+ xranges = [].concat(opts.chartData.xAxisData.ranges)
+ xminRange = xranges.shift()
+ xmaxRange = xranges.pop()
+ value = item[1]
+ point.x = opts.area[3] + (validWidth * (item[0] - xminRange)) / (xmaxRange - xminRange)
+ } else {
+ value = item.value
+ }
+ }
+ if (boundaryGap == "center") {
+ point.x += eachSpacing / 2
+ }
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ height *= process
+ point.y = opts.height - height - opts.area[2]
+ points.push(point)
+ } else {
+ point.x = xAxisPoints[0] + eachSpacing * index * process
+ var value = item
+ if (boundaryGap == "center") {
+ point.x += eachSpacing / 2
+ }
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ point.y = opts.height - height - opts.area[2]
+ points.push(point)
+ }
+ }
+ })
+ return points
+}
+
+function getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process) {
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ var validWidth = opts.width - opts.area[1] - opts.area[3]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.x = xAxisPoints[index]
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ let xranges, xminRange, xmaxRange
+ xranges = [].concat(opts.chartData.xAxisData.ranges)
+ xminRange = xranges.shift()
+ xmaxRange = xranges.pop()
+ value = item[1]
+ point.x = opts.area[3] + (validWidth * (item[0] - xminRange)) / (xmaxRange - xminRange)
+ } else {
+ value = item.value
+ }
+ }
+ point.x += eachSpacing / 2
+ var height = (validHeight * (value * process - minRange)) / (maxRange - minRange)
+ point.y = opts.height - height - opts.area[2]
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints) {
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ var validWidth = opts.width - opts.area[1] - opts.area[3]
+ var mountWidth = eachSpacing * mountOption.widthRatio
+ series.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.x = xAxisPoints[index]
+ point.x += eachSpacing / 2
+ var value = item.data
+ var height = (validHeight * (value * process - minRange)) / (maxRange - minRange)
+ point.y = opts.height - height - opts.area[2]
+ point.value = value
+ point.width = mountWidth
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config) {
+ var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ var validWidth = opts.width - opts.area[1] - opts.area[3]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.y = yAxisPoints[index]
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ value = item.value
+ }
+ var height = (validWidth * (value - minRange)) / (maxRange - minRange)
+ height *= process
+ point.height = height
+ point.value = value
+ point.x = height + opts.area[3]
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries) {
+ var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1
+ var points = []
+ var validHeight = opts.height - opts.area[0] - opts.area[2]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.x = xAxisPoints[index] + Math.round(eachSpacing / 2)
+
+ if (seriesIndex > 0) {
+ var value = 0
+ for (let i = 0; i <= seriesIndex; i++) {
+ value += stackSeries[i].data[index]
+ }
+ var value0 = value - item
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ var height0 = (validHeight * (value0 - minRange)) / (maxRange - minRange)
+ } else {
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ value = item.value
+ }
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ var height0 = 0
+ }
+ var heightc = height0
+ height *= process
+ heightc *= process
+ point.y = opts.height - Math.round(height) - opts.area[2]
+ point.y0 = opts.height - Math.round(heightc) - opts.area[2]
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries) {
+ var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1
+ var points = []
+ var validHeight = opts.width - opts.area[1] - opts.area[3]
+ data.forEach(function (item, index) {
+ if (item === null) {
+ points.push(null)
+ } else {
+ var point = {}
+ point.color = item.color
+ point.y = yAxisPoints[index]
+ if (seriesIndex > 0) {
+ var value = 0
+ for (let i = 0; i <= seriesIndex; i++) {
+ value += stackSeries[i].data[index]
+ }
+ var value0 = value - item
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ var height0 = (validHeight * (value0 - minRange)) / (maxRange - minRange)
+ } else {
+ var value = item
+ if (typeof item === "object" && item !== null) {
+ value = item.value
+ }
+ var height = (validHeight * (value - minRange)) / (maxRange - minRange)
+ var height0 = 0
+ }
+ var heightc = height0
+ height *= process
+ heightc *= process
+ point.height = height - heightc
+ point.x = opts.area[3] + height
+ point.x0 = opts.area[3] + heightc
+ points.push(point)
+ }
+ })
+ return points
+}
+
+function getYAxisTextList(series, opts, config, stack, yData) {
+ var index = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1
+ var data
+ if (stack == "stack") {
+ data = dataCombineStack(series, opts.categories.length)
+ } else {
+ data = dataCombine(series)
+ }
+ var sorted = []
+ // remove null from data
+ data = data.filter(function (item) {
+ //return item !== null;
+ if (typeof item === "object" && item !== null) {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ return item !== null
+ } else {
+ return item.value !== null
+ }
+ } else {
+ return item !== null
+ }
+ })
+ data.map(function (item) {
+ if (typeof item === "object") {
+ if (item.constructor.toString().indexOf("Array") > -1) {
+ if (opts.type == "candle") {
+ item.map(function (subitem) {
+ sorted.push(subitem)
+ })
+ } else {
+ sorted.push(item[1])
+ }
+ } else {
+ sorted.push(item.value)
+ }
+ } else {
+ sorted.push(item)
+ }
+ })
+ var minData = yData.min || 0
+ var maxData = yData.max || 0
+ if (sorted.length > 0) {
+ minData = Math.min.apply(this, sorted)
+ maxData = Math.max.apply(this, sorted)
+ }
+ if (minData === maxData) {
+ if (maxData == 0) {
+ maxData = 10
+ } else {
+ minData = 0
+ }
+ }
+ var dataRange = getDataRange(minData, maxData)
+ var minRange = yData.min === undefined || yData.min === null ? dataRange.minRange : yData.min
+ var maxRange = yData.max === undefined || yData.max === null ? dataRange.maxRange : yData.max
+ var eachRange = (maxRange - minRange) / opts.yAxis.splitNumber
+ var range = []
+ for (var i = 0; i <= opts.yAxis.splitNumber; i++) {
+ range.push(minRange + eachRange * i)
+ }
+ return range.reverse()
+}
+
+function calYAxisData(series, opts, config, context) {
+ //堆叠图重算Y轴
+ var columnstyle = assign(
+ {},
+ {
+ type: "",
+ },
+ opts.extra.column,
+ )
+ //如果是多Y轴，重新计算
+ var YLength = opts.yAxis.data.length
+ var newSeries = new Array(YLength)
+ if (YLength > 0) {
+ for (let i = 0; i < YLength; i++) {
+ newSeries[i] = []
+ for (let j = 0; j < series.length; j++) {
+ if (series[j].index == i) {
+ newSeries[i].push(series[j])
+ }
+ }
+ }
+ var rangesArr = new Array(YLength)
+ var rangesFormatArr = new Array(YLength)
+ var yAxisWidthArr = new Array(YLength)
+
+ for (let i = 0; i < YLength; i++) {
+ let yData = opts.yAxis.data[i]
+ //如果总开关不显示，强制每个Y轴为不显示
+ if (opts.yAxis.disabled == true) {
+ yData.disabled = true
+ }
+ if (yData.type === "categories") {
+ if (!yData.formatter) {
+ yData.formatter = (val, index, opts) => {
+ return val + (yData.unit || "")
+ }
+ }
+ yData.categories = yData.categories || opts.categories
+ rangesArr[i] = yData.categories
+ } else {
+ if (!yData.formatter) {
+ yData.formatter = (val, index, opts) => {
+ return util.toFixed(val, yData.tofix || 0) + (yData.unit || "")
+ }
+ }
+ rangesArr[i] = getYAxisTextList(newSeries[i], opts, config, columnstyle.type, yData, i)
+ }
+ let yAxisFontSizes = yData.fontSize * opts.pix || config.fontSize
+ yAxisWidthArr[i] = {
+ position: yData.position ? yData.position : "left",
+ width: 0,
+ }
+ rangesFormatArr[i] = rangesArr[i].map(function (items, index) {
+ items = yData.formatter(items, index, opts)
+ yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(items, yAxisFontSizes, context) + 5)
+ return items
+ })
+ let calibration = yData.calibration ? 4 * opts.pix : 0
+ yAxisWidthArr[i].width += calibration + 3 * opts.pix
+ if (yData.disabled === true) {
+ yAxisWidthArr[i].width = 0
+ }
+ }
+ } else {
+ var rangesArr = new Array(1)
+ var rangesFormatArr = new Array(1)
+ var yAxisWidthArr = new Array(1)
+ if (opts.type === "bar") {
+ rangesArr[0] = opts.categories
+ if (!opts.yAxis.formatter) {
+ opts.yAxis.formatter = (val, index, opts) => {
+ return val + (opts.yAxis.unit || "")
+ }
+ }
+ } else {
+ if (!opts.yAxis.formatter) {
+ opts.yAxis.formatter = (val, index, opts) => {
+ return val.toFixed(opts.yAxis.tofix) + (opts.yAxis.unit || "")
+ }
+ }
+ rangesArr[0] = getYAxisTextList(series, opts, config, columnstyle.type, {})
+ }
+ yAxisWidthArr[0] = {
+ position: "left",
+ width: 0,
+ }
+ var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize
+ rangesFormatArr[0] = rangesArr[0].map(function (item, index) {
+ item = opts.yAxis.formatter(item, index, opts)
+ yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5)
+ return item
+ })
+ yAxisWidthArr[0].width += 3 * opts.pix
+ if (opts.yAxis.disabled === true) {
+ yAxisWidthArr[0] = {
+ position: "left",
+ width: 0,
+ }
+ opts.yAxis.data[0] = {
+ disabled: true,
+ }
+ } else {
+ opts.yAxis.data[0] = {
+ disabled: false,
+ position: "left",
+ max: opts.yAxis.max,
+ min: opts.yAxis.min,
+ formatter: opts.yAxis.formatter,
+ }
+ if (opts.type === "bar") {
+ opts.yAxis.data[0].categories = opts.categories
+ opts.yAxis.data[0].type = "categories"
+ }
+ }
+ }
+ return {
+ rangesFormat: rangesFormatArr,
+ ranges: rangesArr,
+ yAxisWidth: yAxisWidthArr,
+ }
+}
+
+function calTooltipYAxisData(point, series, opts, config, eachSpacing) {
+ let ranges = [].concat(opts.chartData.yAxisData.ranges)
+ let spacingValid = opts.height - opts.area[0] - opts.area[2]
+ let minAxis = opts.area[0]
+ let items = []
+ for (let i = 0; i < ranges.length; i++) {
+ let maxVal = Math.max.apply(this, ranges[i])
+ let minVal = Math.min.apply(this, ranges[i])
+ let item = maxVal - ((maxVal - minVal) * (point - minAxis)) / spacingValid
+ item = opts.yAxis.data && opts.yAxis.data[i].formatter ? opts.yAxis.data[i].formatter(item, i, opts) : item.toFixed(0)
+ items.push(String(item))
+ }
+ return items
+}
+
+function calMarkLineData(points, opts) {
+ let minRange, maxRange
+ let spacingValid = opts.height - opts.area[0] - opts.area[2]
+ for (let i = 0; i < points.length; i++) {
+ points[i].yAxisIndex = points[i].yAxisIndex ? points[i].yAxisIndex : 0
+ let range = [].concat(opts.chartData.yAxisData.ranges[points[i].yAxisIndex])
+ minRange = range.pop()
+ maxRange = range.shift()
+ let height = (spacingValid * (points[i].value - minRange)) / (maxRange - minRange)
+ points[i].y = opts.height - Math.round(height) - opts.area[2]
+ }
+ return points
+}
+
+function contextRotate(context, opts) {
+ if (opts.rotateLock !== true) {
+ context.translate(opts.height, 0)
+ context.rotate((90 * Math.PI) / 180)
+ } else if (opts._rotate_ !== true) {
+ context.translate(opts.height, 0)
+ context.rotate((90 * Math.PI) / 180)
+ opts._rotate_ = true
+ }
+}
+
+function drawPointShape(points, color, shape, context, opts) {
+ context.beginPath()
+ if (opts.dataPointShapeType == "hollow") {
+ context.setStrokeStyle(color)
+ context.setFillStyle(opts.background)
+ context.setLineWidth(2 * opts.pix)
+ } else {
+ context.setStrokeStyle("#ffffff")
+ context.setFillStyle(color)
+ context.setLineWidth(1 * opts.pix)
+ }
+ if (shape === "diamond") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y)
+ context.lineTo(item.x, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "circle") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x + 2.5 * opts.pix, item.y)
+ context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false)
+ }
+ })
+ } else if (shape === "square") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x - 3.5, item.y - 3.5)
+ context.rect(item.x - 3.5, item.y - 3.5, 7, 7)
+ }
+ })
+ } else if (shape === "triangle") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y + 4.5)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "none") {
+ return
+ }
+ context.closePath()
+ context.fill()
+ context.stroke()
+}
+
+function drawActivePoint(points, color, shape, context, opts, option, seriesIndex) {
+ if (!opts.tooltip) {
+ return
+ }
+ if (opts.tooltip.group.length > 0 && opts.tooltip.group.includes(seriesIndex) == false) {
+ return
+ }
+ var pointIndex = typeof opts.tooltip.index === "number" ? opts.tooltip.index : opts.tooltip.index[opts.tooltip.group.indexOf(seriesIndex)]
+ context.beginPath()
+ if (option.activeType == "hollow") {
+ context.setStrokeStyle(color)
+ context.setFillStyle(opts.background)
+ context.setLineWidth(2 * opts.pix)
+ } else {
+ context.setStrokeStyle("#ffffff")
+ context.setFillStyle(color)
+ context.setLineWidth(1 * opts.pix)
+ }
+ if (shape === "diamond") {
+ points.forEach(function (item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y)
+ context.lineTo(item.x, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "circle") {
+ points.forEach(function (item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x + 2.5 * opts.pix, item.y)
+ context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false)
+ }
+ })
+ } else if (shape === "square") {
+ points.forEach(function (item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x - 3.5, item.y - 3.5)
+ context.rect(item.x - 3.5, item.y - 3.5, 7, 7)
+ }
+ })
+ } else if (shape === "triangle") {
+ points.forEach(function (item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y + 4.5)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "none") {
+ return
+ }
+ context.closePath()
+ context.fill()
+ context.stroke()
+}
+
+function drawRingTitle(opts, config, context, center) {
+ var titlefontSize = opts.title.fontSize || config.titleFontSize
+ var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize
+ var title = opts.title.name || ""
+ var subtitle = opts.subtitle.name || ""
+ var titleFontColor = opts.title.color || opts.fontColor
+ var subtitleFontColor = opts.subtitle.color || opts.fontColor
+ var titleHeight = title ? titlefontSize : 0
+ var subtitleHeight = subtitle ? subtitlefontSize : 0
+ var margin = 5
+ if (subtitle) {
+ var textWidth = measureText(subtitle, subtitlefontSize * opts.pix, context)
+ var startX = center.x - textWidth / 2 + (opts.subtitle.offsetX || 0) * opts.pix
+ var startY = center.y + (subtitlefontSize * opts.pix) / 2 + (opts.subtitle.offsetY || 0) * opts.pix
+ if (title) {
+ startY += (titleHeight * opts.pix + margin) / 2
+ }
+ context.beginPath()
+ context.setFontSize(subtitlefontSize * opts.pix)
+ context.setFillStyle(subtitleFontColor)
+ context.fillText(subtitle, startX, startY)
+ context.closePath()
+ context.stroke()
+ }
+ if (title) {
+ var _textWidth = measureText(title, titlefontSize * opts.pix, context)
+ var _startX = center.x - _textWidth / 2 + (opts.title.offsetX || 0)
+ var _startY = center.y + (titlefontSize * opts.pix) / 2 + (opts.title.offsetY || 0) * opts.pix
+ if (subtitle) {
+ _startY -= (subtitleHeight * opts.pix + margin) / 2
+ }
+ context.beginPath()
+ context.setFontSize(titlefontSize * opts.pix)
+ context.setFillStyle(titleFontColor)
+ context.fillText(title, _startX, _startY)
+ context.closePath()
+ context.stroke()
+ }
+}
+
+function drawPointText(points, series, config, context, opts) {
+ // 绘制数据文案
+ var data = series.data
+ var textOffset = series.textOffset ? series.textOffset : 0
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.beginPath()
+ var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(series.textColor || opts.fontColor)
+ var value = data[index]
+ if (typeof data[index] === "object" && data[index] !== null) {
+ if (data[index].constructor.toString().indexOf("Array") > -1) {
+ value = data[index][1]
+ } else {
+ value = data[index].value
+ }
+ }
+ var formatVal = series.formatter ? series.formatter(value, index, series, opts) : value
+ context.setTextAlign("center")
+ context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix)
+ context.closePath()
+ context.stroke()
+ context.setTextAlign("left")
+ }
+ })
+}
+
+function drawColumePointText(points, series, config, context, opts) {
+ // 绘制数据文案
+ var data = series.data
+ var textOffset = series.textOffset ? series.textOffset : 0
+ var Position = opts.extra.column.labelPosition
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.beginPath()
+ var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(series.textColor || opts.fontColor)
+ var value = data[index]
+ if (typeof data[index] === "object" && data[index] !== null) {
+ if (data[index].constructor.toString().indexOf("Array") > -1) {
+ value = data[index][1]
+ } else {
+ value = data[index].value
+ }
+ }
+ var formatVal = series.formatter ? series.formatter(value, index, series, opts) : value
+ context.setTextAlign("center")
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix
+ if (item.y > series.zeroPoints) {
+ startY = item.y + textOffset * opts.pix + fontSize
+ }
+ if (Position == "insideTop") {
+ startY = item.y + fontSize + textOffset * opts.pix
+ if (item.y > series.zeroPoints) {
+ startY = item.y - textOffset * opts.pix - 4 * opts.pix
+ }
+ }
+ if (Position == "center") {
+ startY = item.y + textOffset * opts.pix + (opts.height - opts.area[2] - item.y + fontSize) / 2
+ if (series.zeroPoints < opts.height - opts.area[2]) {
+ startY = item.y + textOffset * opts.pix + (series.zeroPoints - item.y + fontSize) / 2
+ }
+ if (item.y > series.zeroPoints) {
+ startY = item.y - textOffset * opts.pix - (item.y - series.zeroPoints - fontSize) / 2
+ }
+ if (opts.extra.column.type == "stack") {
+ startY = item.y + textOffset * opts.pix + (item.y0 - item.y + fontSize) / 2
+ }
+ }
+ if (Position == "bottom") {
+ startY = opts.height - opts.area[2] + textOffset * opts.pix - 4 * opts.pix
+ if (series.zeroPoints < opts.height - opts.area[2]) {
+ startY = series.zeroPoints + textOffset * opts.pix - 4 * opts.pix
+ }
+ if (item.y > series.zeroPoints) {
+ startY = series.zeroPoints - textOffset * opts.pix + fontSize + 2 * opts.pix
+ }
+ if (opts.extra.column.type == "stack") {
+ startY = item.y0 + textOffset * opts.pix - 4 * opts.pix
+ }
+ }
+ context.fillText(String(formatVal), item.x, startY)
+ context.closePath()
+ context.stroke()
+ context.setTextAlign("left")
+ }
+ })
+}
+
+function drawMountPointText(points, series, config, context, opts, zeroPoints) {
+ // 绘制数据文案
+ var data = series.data
+ var textOffset = series.textOffset ? series.textOffset : 0
+ var Position = opts.extra.mount.labelPosition
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.beginPath()
+ var fontSize = series[index].textSize ? series[index].textSize * opts.pix : config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(series[index].textColor || opts.fontColor)
+ var value = item.value
+ var formatVal = series[index].formatter ? series[index].formatter(value, index, series, opts) : value
+ context.setTextAlign("center")
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix
+ if (item.y > zeroPoints) {
+ startY = item.y + textOffset * opts.pix + fontSize
+ }
+ context.fillText(String(formatVal), item.x, startY)
+ context.closePath()
+ context.stroke()
+ context.setTextAlign("left")
+ }
+ })
+}
+
+function drawBarPointText(points, series, config, context, opts) {
+ // 绘制数据文案
+ var data = series.data
+ var textOffset = series.textOffset ? series.textOffset : 0
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.beginPath()
+ var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(series.textColor || opts.fontColor)
+ var value = data[index]
+ if (typeof data[index] === "object" && data[index] !== null) {
+ value = data[index].value
+ }
+ var formatVal = series.formatter ? series.formatter(value, index, series, opts) : value
+ context.setTextAlign("left")
+ context.fillText(String(formatVal), item.x + 4 * opts.pix, item.y + fontSize / 2 - 3)
+ context.closePath()
+ context.stroke()
+ }
+ })
+}
+
+function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
+ radius -= gaugeOption.width / 2 + gaugeOption.labelOffset * opts.pix
+ radius = radius < 10 ? 10 : radius
+ let totalAngle
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle
+ }
+ let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber
+ let totalNumber = gaugeOption.endNumber - gaugeOption.startNumber
+ let splitNumber = totalNumber / gaugeOption.splitLine.splitNumber
+ let nowAngle = gaugeOption.startAngle
+ let nowNumber = gaugeOption.startNumber
+ for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
+ var pos = {
+ x: radius * Math.cos(nowAngle * Math.PI),
+ y: radius * Math.sin(nowAngle * Math.PI),
+ }
+ var labelText = gaugeOption.formatter ? gaugeOption.formatter(nowNumber, i, opts) : nowNumber
+ pos.x += centerPosition.x - measureText(labelText, config.fontSize, context) / 2
+ pos.y += centerPosition.y
+ var startX = pos.x
+ var startY = pos.y
+ context.beginPath()
+ context.setFontSize(config.fontSize)
+ context.setFillStyle(gaugeOption.labelColor || opts.fontColor)
+ context.fillText(labelText, startX, startY + config.fontSize / 2)
+ context.closePath()
+ context.stroke()
+ nowAngle += splitAngle
+ if (nowAngle >= 2) {
+ nowAngle = nowAngle % 2
+ }
+ nowNumber += splitNumber
+ }
+}
+
+function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
+ var radarOption = opts.extra.radar || {}
+ angleList.forEach(function (angle, index) {
+ if (radarOption.labelPointShow === true && opts.categories[index] !== "") {
+ var posPoint = {
+ x: radius * Math.cos(angle),
+ y: radius * Math.sin(angle),
+ }
+ var posPointAxis = convertCoordinateOrigin(posPoint.x, posPoint.y, centerPosition)
+ context.setFillStyle(radarOption.labelPointColor)
+ context.beginPath()
+ context.arc(posPointAxis.x, posPointAxis.y, radarOption.labelPointRadius * opts.pix, 0, 2 * Math.PI, false)
+ context.closePath()
+ context.fill()
+ }
+ if (radarOption.labelShow === true) {
+ var pos = {
+ x: (radius + config.radarLabelTextMargin * opts.pix) * Math.cos(angle),
+ y: (radius + config.radarLabelTextMargin * opts.pix) * Math.sin(angle),
+ }
+ var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition)
+ var startX = posRelativeCanvas.x
+ var startY = posRelativeCanvas.y
+ if (util.approximatelyEqual(pos.x, 0)) {
+ startX -= measureText(opts.categories[index] || "", config.fontSize, context) / 2
+ } else if (pos.x < 0) {
+ startX -= measureText(opts.categories[index] || "", config.fontSize, context)
+ }
+ context.beginPath()
+ context.setFontSize(config.fontSize)
+ context.setFillStyle(radarOption.labelColor || opts.fontColor)
+ context.fillText(opts.categories[index] || "", startX, startY + config.fontSize / 2)
+ context.closePath()
+ context.stroke()
+ }
+ })
+}
+
+function drawPieText(series, opts, config, context, radius, center) {
+ var lineRadius = config.pieChartLinePadding
+ var textObjectCollection = []
+ var lastTextObject = null
+ var seriesConvert = series.map(function (item, index) {
+ var text = item.formatter ? item.formatter(item, index, series, opts) : util.toFixed(item._proportion_.toFixed(4) * 100) + "%"
+ text = item.labelText ? item.labelText : text
+ var arc = 2 * Math.PI - (item._start_ + (2 * Math.PI * item._proportion_) / 2)
+ if (item._rose_proportion_) {
+ arc = 2 * Math.PI - (item._start_ + (2 * Math.PI * item._rose_proportion_) / 2)
+ }
+ var color = item.color
+ var radius = item._radius_
+ return {
+ arc: arc,
+ text: text,
+ color: color,
+ radius: radius,
+ textColor: item.textColor,
+ textSize: item.textSize,
+ labelShow: item.labelShow,
+ }
+ })
+ for (let i = 0; i < seriesConvert.length; i++) {
+ let item = seriesConvert[i]
+ // line end
+ let orginX1 = Math.cos(item.arc) * (item.radius + lineRadius)
+ let orginY1 = Math.sin(item.arc) * (item.radius + lineRadius)
+ // line start
+ let orginX2 = Math.cos(item.arc) * item.radius
+ let orginY2 = Math.sin(item.arc) * item.radius
+ // text start
+ let orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding
+ let orginY3 = orginY1
+ let textWidth = measureText(item.text, item.textSize * opts.pix || config.fontSize, context)
+ let startY = orginY3
+ if (
+ lastTextObject &&
+ util.isSameXCoordinateArea(lastTextObject.start, {
+ x: orginX3,
+ })
+ ) {
+ if (orginX3 > 0) {
+ startY = Math.min(orginY3, lastTextObject.start.y)
+ } else if (orginX1 < 0) {
+ startY = Math.max(orginY3, lastTextObject.start.y)
+ } else {
+ if (orginY3 > 0) {
+ startY = Math.max(orginY3, lastTextObject.start.y)
+ } else {
+ startY = Math.min(orginY3, lastTextObject.start.y)
+ }
+ }
+ }
+ if (orginX3 < 0) {
+ orginX3 -= textWidth
+ }
+ let textObject = {
+ lineStart: {
+ x: orginX2,
+ y: orginY2,
+ },
+ lineEnd: {
+ x: orginX1,
+ y: orginY1,
+ },
+ start: {
+ x: orginX3,
+ y: startY,
+ },
+ width: textWidth,
+ height: config.fontSize,
+ text: item.text,
+ color: item.color,
+ textColor: item.textColor,
+ textSize: item.textSize,
+ }
+ lastTextObject = avoidCollision(textObject, lastTextObject)
+ textObjectCollection.push(lastTextObject)
+ }
+ for (let i = 0; i < textObjectCollection.length; i++) {
+ if (seriesConvert[i].labelShow === false) {
+ continue
+ }
+ let item = textObjectCollection[i]
+ let lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center)
+ let lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center)
+ let textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center)
+ context.setLineWidth(1 * opts.pix)
+ context.setFontSize(item.textSize * opts.pix || config.fontSize)
+ context.beginPath()
+ context.setStrokeStyle(item.color)
+ context.setFillStyle(item.color)
+ context.moveTo(lineStartPoistion.x, lineStartPoistion.y)
+ let curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x
+ let textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5
+ context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y)
+ context.moveTo(lineStartPoistion.x, lineStartPoistion.y)
+ context.stroke()
+ context.closePath()
+ context.beginPath()
+ context.moveTo(textPosition.x + item.width, textPosition.y)
+ context.arc(curveStartX, textPosition.y, 2 * opts.pix, 0, 2 * Math.PI)
+ context.closePath()
+ context.fill()
+ context.beginPath()
+ context.setFontSize(item.textSize * opts.pix || config.fontSize)
+ context.setFillStyle(item.textColor || opts.fontColor)
+ context.fillText(item.text, textStartX, textPosition.y + 3)
+ context.closePath()
+ context.stroke()
+ context.closePath()
+ }
+}
+
+function drawToolTipSplitLine(offsetX, opts, config, context) {
+ var toolTipOption = opts.extra.tooltip || {}
+ toolTipOption.gridType = toolTipOption.gridType == undefined ? "solid" : toolTipOption.gridType
+ toolTipOption.dashLength = toolTipOption.dashLength == undefined ? 4 : toolTipOption.dashLength
+ var startY = opts.area[0]
+ var endY = opts.height - opts.area[2]
+ if (toolTipOption.gridType == "dash") {
+ context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength])
+ }
+ context.setStrokeStyle(toolTipOption.gridColor || "#cccccc")
+ context.setLineWidth(1 * opts.pix)
+ context.beginPath()
+ context.moveTo(offsetX, startY)
+ context.lineTo(offsetX, endY)
+ context.stroke()
+ context.setLineDash([])
+ if (toolTipOption.xAxisLabel) {
+ let labelText = opts.categories[opts.tooltip.index]
+ context.setFontSize(config.fontSize)
+ let textWidth = measureText(labelText, config.fontSize, context)
+ let textX = offsetX - 0.5 * textWidth
+ let textY = endY + 2 * opts.pix
+ context.beginPath()
+ context.setFillStyle(
+ hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity),
+ )
+ context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground)
+ context.setLineWidth(1 * opts.pix)
+ context.rect(
+ textX - toolTipOption.boxPadding * opts.pix,
+ textY,
+ textWidth + 2 * toolTipOption.boxPadding * opts.pix,
+ config.fontSize + 2 * toolTipOption.boxPadding * opts.pix,
+ )
+ context.closePath()
+ context.stroke()
+ context.fill()
+ context.beginPath()
+ context.setFontSize(config.fontSize)
+ context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor)
+ context.fillText(String(labelText), textX, textY + toolTipOption.boxPadding * opts.pix + config.fontSize)
+ context.closePath()
+ context.stroke()
+ }
+}
+
+function drawMarkLine(opts, config, context) {
+ let markLineOption = assign(
+ {},
+ {
+ type: "solid",
+ dashLength: 4,
+ data: [],
+ },
+ opts.extra.markLine,
+ )
+ let startX = opts.area[3]
+ let endX = opts.width - opts.area[1]
+ let points = calMarkLineData(markLineOption.data, opts)
+ for (let i = 0; i < points.length; i++) {
+ let item = assign(
+ {},
+ {
+ lineColor: "#DE4A42",
+ showLabel: false,
+ labelFontSize: 13,
+ labelPadding: 6,
+ labelFontColor: "#666666",
+ labelBgColor: "#DFE8FF",
+ labelBgOpacity: 0.8,
+ labelAlign: "left",
+ labelOffsetX: 0,
+ labelOffsetY: 0,
+ },
+ points[i],
+ )
+ if (markLineOption.type == "dash") {
+ context.setLineDash([markLineOption.dashLength, markLineOption.dashLength])
+ }
+ context.setStrokeStyle(item.lineColor)
+ context.setLineWidth(1 * opts.pix)
+ context.beginPath()
+ context.moveTo(startX, item.y)
+ context.lineTo(endX, item.y)
+ context.stroke()
+ context.setLineDash([])
+ if (item.showLabel) {
+ let fontSize = item.labelFontSize * opts.pix
+ let labelText = item.labelText ? item.labelText : item.value
+ context.setFontSize(fontSize)
+ let textWidth = measureText(labelText, fontSize, context)
+ let bgWidth = textWidth + item.labelPadding * opts.pix * 2
+ let bgStartX = item.labelAlign == "left" ? opts.area[3] - bgWidth : opts.width - opts.area[1]
+ bgStartX += item.labelOffsetX
+ let bgStartY = item.y - 0.5 * fontSize - item.labelPadding * opts.pix
+ bgStartY += item.labelOffsetY
+ let textX = bgStartX + item.labelPadding * opts.pix
+ let textY = item.y
+ context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity))
+ context.setStrokeStyle(item.labelBgColor)
+ context.setLineWidth(1 * opts.pix)
+ context.beginPath()
+ context.rect(bgStartX, bgStartY, bgWidth, fontSize + 2 * item.labelPadding * opts.pix)
+ context.closePath()
+ context.stroke()
+ context.fill()
+ context.setFontSize(fontSize)
+ context.setTextAlign("left")
+ context.setFillStyle(item.labelFontColor)
+ context.fillText(String(labelText), textX, bgStartY + fontSize + (item.labelPadding * opts.pix) / 2)
+ context.stroke()
+ context.setTextAlign("left")
+ }
+ }
+}
+
+function drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) {
+ var toolTipOption = assign(
+ {},
+ {
+ gridType: "solid",
+ dashLength: 4,
+ },
+ opts.extra.tooltip,
+ )
+ var startX = opts.area[3]
+ var endX = opts.width - opts.area[1]
+ if (toolTipOption.gridType == "dash") {
+ context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength])
+ }
+ context.setStrokeStyle(toolTipOption.gridColor || "#cccccc")
+ context.setLineWidth(1 * opts.pix)
+ context.beginPath()
+ context.moveTo(startX, opts.tooltip.offset.y)
+ context.lineTo(endX, opts.tooltip.offset.y)
+ context.stroke()
+ context.setLineDash([])
+ if (toolTipOption.yAxisLabel) {
+ let boxPadding = toolTipOption.boxPadding * opts.pix
+ let labelText = calTooltipYAxisData(opts.tooltip.offset.y, opts.series, opts, config, eachSpacing)
+ let widthArr = opts.chartData.yAxisData.yAxisWidth
+ let tStartLeft = opts.area[3]
+ let tStartRight = opts.width - opts.area[1]
+ for (let i = 0; i < labelText.length; i++) {
+ context.setFontSize(toolTipOption.fontSize * opts.pix)
+ let textWidth = measureText(labelText[i], toolTipOption.fontSize * opts.pix, context)
+ let bgStartX, bgEndX, bgWidth
+ if (widthArr[i].position == "left") {
+ bgStartX = tStartLeft - (textWidth + boxPadding * 2) - 2 * opts.pix
+ bgEndX = Math.max(bgStartX, bgStartX + textWidth + boxPadding * 2)
+ } else {
+ bgStartX = tStartRight + 2 * opts.pix
+ bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + boxPadding * 2)
+ }
+ bgWidth = bgEndX - bgStartX
+ let textX = bgStartX + (bgWidth - textWidth) / 2
+ let textY = opts.tooltip.offset.y
+ context.beginPath()
+ context.setFillStyle(
+ hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity),
+ )
+ context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground)
+ context.setLineWidth(1 * opts.pix)
+ context.rect(bgStartX, textY - 0.5 * config.fontSize - boxPadding, bgWidth, config.fontSize + 2 * boxPadding)
+ context.closePath()
+ context.stroke()
+ context.fill()
+ context.beginPath()
+ context.setFontSize(config.fontSize)
+ context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor)
+ context.fillText(labelText[i], textX, textY + 0.5 * config.fontSize)
+ context.closePath()
+ context.stroke()
+ if (widthArr[i].position == "left") {
+ tStartLeft -= widthArr[i].width + opts.yAxis.padding * opts.pix
+ } else {
+ tStartRight += widthArr[i].width + opts.yAxis.padding * opts.pix
+ }
+ }
+ }
+}
+
+function drawToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
+ var toolTipOption = assign(
+ {},
+ {
+ activeBgColor: "#000000",
+ activeBgOpacity: 0.08,
+ activeWidth: eachSpacing,
+ },
+ opts.extra.column,
+ )
+ toolTipOption.activeWidth = toolTipOption.activeWidth > eachSpacing ? eachSpacing : toolTipOption.activeWidth
+ var startY = opts.area[0]
+ var endY = opts.height - opts.area[2]
+ context.beginPath()
+ context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity))
+ context.rect(offsetX - toolTipOption.activeWidth / 2, startY, toolTipOption.activeWidth, endY - startY)
+ context.closePath()
+ context.fill()
+ context.setFillStyle("#FFFFFF")
+}
+
+function drawBarToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
+ var toolTipOption = assign(
+ {},
+ {
+ activeBgColor: "#000000",
+ activeBgOpacity: 0.08,
+ },
+ opts.extra.bar,
+ )
+ var startX = opts.area[3]
+ var endX = opts.width - opts.area[1]
+ context.beginPath()
+ context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity))
+ context.rect(startX, offsetX - eachSpacing / 2, endX - startX, eachSpacing)
+ context.closePath()
+ context.fill()
+ context.setFillStyle("#FFFFFF")
+}
+
+function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
+ const newTextList = textList[0].text.split("/br/")
+
+ const newTextListObj = []
+ for (let index = 1; index < newTextList.length; index++) {
+ newTextListObj.push({
+ text: newTextList[index],
+ // color: "#eee",
+ })
+ }
+
+ textList[0].text = newTextList[0]
+ textList.push(...newTextListObj)
+
+ var toolTipOption = assign(
+ {},
+ {
+ showBox: true,
+ showArrow: true,
+ showCategory: false,
+ bgColor: "#000000",
+ bgOpacity: 0.7,
+ borderColor: "#000000",
+ borderWidth: 0,
+ borderRadius: 0,
+ borderOpacity: 0.7,
+ boxPadding: 3,
+ fontColor: "#FFFFFF",
+ fontSize: 13,
+ lineHeight: 20,
+ legendShow: true,
+ legendShape: "auto",
+ splitLine: true,
+ shadowOffsetX: 0, // 阴影相对于形状水平方向的偏移。
+ shadowOffsetY: 0, // 阴影相对于形状竖直方向的偏移。
+ shadowBlur: 0, // 阴影的模糊级别，值越大越模糊，范围 0~100。
+ shadowColor: "#000000", // 阴影颜色。
+ },
+ opts.extra.tooltip,
+ )
+ if (toolTipOption.showCategory == true && opts.categories) {
+ textList.unshift({ text: opts.categories[opts.tooltip.index], color: null })
+ }
+ var fontSize = toolTipOption.fontSize * opts.pix
+ var lineHeight = toolTipOption.lineHeight * opts.pix
+ var boxPadding = toolTipOption.boxPadding * opts.pix
+ var legendWidth = fontSize
+ var legendMarginRight = 5 * opts.pix
+ if (toolTipOption.legendShow == false) {
+ legendWidth = 0
+ legendMarginRight = 0
+ }
+ var arrowWidth = toolTipOption.showArrow ? 8 * opts.pix : 0
+ var isOverRightBorder = false
+ if (opts.type == "line" || opts.type == "mount" || opts.type == "area" || opts.type == "candle" || opts.type == "mix") {
+ if (toolTipOption.splitLine == true) {
+ drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context)
+ }
+ }
+ offset = assign(
+ {
+ x: 0,
+ y: 0,
+ },
+ offset,
+ )
+ offset.y -= 8 * opts.pix
+ var textWidth = textList.map(function (item) {
+ return measureText(item.text, fontSize, context)
+ })
+ var toolTipWidth = legendWidth + legendMarginRight + 4 * boxPadding + Math.max.apply(null, textWidth)
+ var toolTipHeight = 2 * boxPadding + textList.length * lineHeight
+ if (toolTipOption.showBox == false) {
+ return
+ }
+ // if beyond the right border
+ if (offset.x - Math.abs(opts._scrollDistance_ || 0) + arrowWidth + toolTipWidth > opts.width) {
+ isOverRightBorder = true
+ }
+ if (toolTipHeight + offset.y > opts.height) {
+ offset.y = opts.height - toolTipHeight
+ }
+ // draw background rect
+ context.beginPath()
+ context.setFillStyle(hexToRgb(toolTipOption.bgColor, toolTipOption.bgOpacity))
+ context.save()
+ context.setLineWidth(toolTipOption.borderWidth * opts.pix)
+ context.setStrokeStyle(hexToRgb(toolTipOption.borderColor, toolTipOption.borderOpacity))
+ var radius = toolTipOption.borderRadius
+ if (isOverRightBorder) {
+ // 增加左侧仍然超出的判断
+ if (toolTipWidth + arrowWidth > opts.width) {
+ offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
+ }
+ if (toolTipWidth > offset.x) {
+ offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
+ }
+ if (toolTipOption.showArrow) {
+ context.moveTo(offset.x, offset.y + 10 * opts.pix)
+ context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pix + 5 * opts.pix)
+ }
+ context.arc(offset.x - arrowWidth - radius, offset.y + toolTipHeight - radius, radius, 0, Math.PI / 2, false)
+ context.arc(
+ offset.x - arrowWidth - Math.round(toolTipWidth) + radius,
+ offset.y + toolTipHeight - radius,
+ radius,
+ Math.PI / 2,
+ Math.PI,
+ false,
+ )
+ context.arc(offset.x - arrowWidth - Math.round(toolTipWidth) + radius, offset.y + radius, radius, -Math.PI, -Math.PI / 2, false)
+ context.arc(offset.x - arrowWidth - radius, offset.y + radius, radius, -Math.PI / 2, 0, false)
+ if (toolTipOption.showArrow) {
+ context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pix - 5 * opts.pix)
+ context.lineTo(offset.x, offset.y + 10 * opts.pix)
+ }
+ } else {
+ if (toolTipOption.showArrow) {
+ context.moveTo(offset.x, offset.y + 10 * opts.pix)
+ context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pix - 5 * opts.pix)
+ }
+ context.arc(offset.x + arrowWidth + radius, offset.y + radius, radius, -Math.PI, -Math.PI / 2, false)
+ context.arc(offset.x + arrowWidth + Math.round(toolTipWidth) - radius, offset.y + radius, radius, -Math.PI / 2, 0, false)
+ context.arc(offset.x + arrowWidth + Math.round(toolTipWidth) - radius, offset.y + toolTipHeight - radius, radius, 0, Math.PI / 2, false)
+ context.arc(offset.x + arrowWidth + radius, offset.y + toolTipHeight - radius, radius, Math.PI / 2, Math.PI, false)
+ if (toolTipOption.showArrow) {
+ context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pix + 5 * opts.pix)
+ context.lineTo(offset.x, offset.y + 10 * opts.pix)
+ }
+ }
+ context.closePath()
+ context.setShadow(toolTipOption.shadowOffsetX, toolTipOption.shadowOffsetY, toolTipOption.shadowBlur, toolTipOption.shadowColor)
+ context.fill()
+ if (toolTipOption.borderWidth > 0) {
+ context.stroke()
+ }
+ context.restore()
+ // draw legend
+ if (toolTipOption.legendShow) {
+ textList.forEach(function (item, index) {
+ if (item.color !== null) {
+ context.beginPath()
+ context.setFillStyle(item.color)
+ var startX = offset.x + arrowWidth + 2 * boxPadding
+ var startY = offset.y + (lineHeight - fontSize) / 2 + lineHeight * index + boxPadding + 1
+ if (isOverRightBorder) {
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding
+ }
+ switch (item.legendShape) {
+ case "line":
+ context.moveTo(startX, startY + 0.5 * legendWidth - 2 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * legendWidth - 2 * opts.pix, legendWidth, 4 * opts.pix)
+ break
+ case "triangle":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix)
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix)
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix)
+ break
+ case "diamond":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix)
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix)
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix)
+ break
+ case "circle":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth)
+ context.arc(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth, 5 * opts.pix, 0, 2 * Math.PI)
+ break
+ case "rect":
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix)
+ break
+ case "square":
+ context.moveTo(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix)
+ context.fillRect(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix)
+ break
+ default:
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix)
+ }
+ context.closePath()
+ context.fill()
+ }
+ })
+ }
+
+ // draw text list
+ textList.forEach(function (item, index) {
+ var startX = offset.x + arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight
+ if (isOverRightBorder) {
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight
+ }
+ var startY = offset.y + lineHeight * index + (lineHeight - fontSize) / 2 - 1 + boxPadding + fontSize
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setTextBaseline("normal")
+ context.setFillStyle(toolTipOption.fontColor)
+ context.fillText(item.text, startX, startY)
+ context.closePath()
+ context.stroke()
+ })
+}
+
+function drawColumnDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ let columnOption = assign(
+ {},
+ {
+ type: "group",
+ width: eachSpacing / 2,
+ meterBorder: 4,
+ meterFillColor: "#FFFFFF",
+ barBorderCircle: false,
+ barBorderRadius: [],
+ seriesGap: 2,
+ linearType: "none",
+ linearOpacity: 1,
+ customColor: [],
+ colorStop: 0,
+ labelPosition: "outside",
+ },
+ opts.extra.column,
+ )
+ let calPoints = []
+ context.save()
+ let leftNum = -2
+ let rightNum = xAxisPoints.length + 2
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2
+ rightNum = leftNum + opts.xAxis.itemCount + 4
+ }
+ if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
+ drawToolTipSplitArea(opts.tooltip.offset.x, opts, config, context, eachSpacing)
+ }
+ columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config)
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+
+ // 计算0轴坐标
+ let spacingValid = opts.height - opts.area[0] - opts.area[2]
+ let zeroHeight = (spacingValid * (0 - minRange)) / (maxRange - minRange)
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2]
+ eachSeries.zeroPoints = zeroPoints
+ var data = eachSeries.data
+ switch (columnOption.type) {
+ case "group":
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process)
+ var tooltipPoints = getStackDataPoints(
+ data,
+ minRange,
+ maxRange,
+ xAxisPoints,
+ eachSpacing,
+ opts,
+ config,
+ seriesIndex,
+ series,
+ process,
+ )
+ calPoints.push(tooltipPoints)
+ points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ //fix issues/I27B1N yyoinge & Joeshu
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - item.width / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || eachSeries.color
+ var strokeColor = item.color || eachSeries.color
+ if (columnOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints)
+ //透明渐变
+ if (columnOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity))
+ grd.addColorStop(
+ columnOption.colorStop,
+ hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity),
+ )
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ // 圆角边框
+ if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
+ const left = startX
+ const top = item.y > zeroPoints ? zeroPoints : item.y
+ const width = item.width
+ const height = Math.abs(zeroPoints - item.y)
+ if (columnOption.barBorderCircle) {
+ columnOption.barBorderRadius = [width / 2, width / 2, 0, 0]
+ }
+ if (item.y > zeroPoints) {
+ columnOption.barBorderRadius = [0, 0, width / 2, width / 2]
+ }
+ let [r0, r1, r2, r3] = columnOption.barBorderRadius
+ let minRadius = Math.min(width / 2, height / 2)
+ r0 = r0 > minRadius ? minRadius : r0
+ r1 = r1 > minRadius ? minRadius : r1
+ r2 = r2 > minRadius ? minRadius : r2
+ r3 = r3 > minRadius ? minRadius : r3
+ r0 = r0 < 0 ? 0 : r0
+ r1 = r1 < 0 ? 0 : r1
+ r2 = r2 < 0 ? 0 : r2
+ r3 = r3 < 0 ? 0 : r3
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2)
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0)
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2)
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI)
+ } else {
+ context.moveTo(startX, item.y)
+ context.lineTo(startX + item.width, item.y)
+ context.lineTo(startX + item.width, zeroPoints)
+ context.lineTo(startX, zeroPoints)
+ context.lineTo(startX, item.y)
+ context.setLineWidth(1)
+ context.setStrokeStyle(strokeColor)
+ }
+ context.setFillStyle(fillColor)
+ context.closePath()
+ //context.stroke();
+ context.fill()
+ }
+ }
+ break
+ case "stack":
+ // 绘制堆叠数据图
+ var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process)
+ calPoints.push(points)
+ points = fixColumeStackData(points, eachSpacing, series.length, seriesIndex, config, opts, series)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ context.beginPath()
+ var fillColor = item.color || eachSeries.color
+ var startX = item.x - item.width / 2 + 1
+ var height = opts.height - item.y - opts.area[2]
+ var height0 = opts.height - item.y0 - opts.area[2]
+ if (seriesIndex > 0) {
+ height -= height0
+ }
+ context.setFillStyle(fillColor)
+ context.moveTo(startX, item.y)
+ context.fillRect(startX, item.y, item.width, height)
+ context.closePath()
+ context.fill()
+ }
+ }
+ break
+ case "meter":
+ // 绘制温度计数据图
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ calPoints.push(points)
+ points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts, columnOption.meterBorder)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ //画背景颜色
+ context.beginPath()
+ if (seriesIndex == 0 && columnOption.meterBorder > 0) {
+ context.setStrokeStyle(eachSeries.color)
+ context.setLineWidth(columnOption.meterBorder * opts.pix)
+ }
+ if (seriesIndex == 0) {
+ context.setFillStyle(columnOption.meterFillColor)
+ } else {
+ context.setFillStyle(item.color || eachSeries.color)
+ }
+ var startX = item.x - item.width / 2
+ var height = opts.height - item.y - opts.area[2]
+ if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
+ const left = startX
+ const top = item.y
+ const width = item.width
+ const height = zeroPoints - item.y
+ if (columnOption.barBorderCircle) {
+ columnOption.barBorderRadius = [width / 2, width / 2, 0, 0]
+ }
+ let [r0, r1, r2, r3] = columnOption.barBorderRadius
+ let minRadius = Math.min(width / 2, height / 2)
+ r0 = r0 > minRadius ? minRadius : r0
+ r1 = r1 > minRadius ? minRadius : r1
+ r2 = r2 > minRadius ? minRadius : r2
+ r3 = r3 > minRadius ? minRadius : r3
+ r0 = r0 < 0 ? 0 : r0
+ r1 = r1 < 0 ? 0 : r1
+ r2 = r2 < 0 ? 0 : r2
+ r3 = r3 < 0 ? 0 : r3
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2)
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0)
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2)
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI)
+ context.fill()
+ } else {
+ context.moveTo(startX, item.y)
+ context.lineTo(startX + item.width, item.y)
+ context.lineTo(startX + item.width, zeroPoints)
+ context.lineTo(startX, zeroPoints)
+ context.lineTo(startX, item.y)
+ context.fill()
+ }
+ if (seriesIndex == 0 && columnOption.meterBorder > 0) {
+ context.closePath()
+ context.stroke()
+ }
+ }
+ }
+ break
+ }
+ })
+
+ if (opts.dataLabel !== false && process === 1) {
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ switch (columnOption.type) {
+ case "group":
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts)
+ drawColumePointText(points, eachSeries, config, context, opts)
+ break
+ case "stack":
+ var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process)
+ drawColumePointText(points, eachSeries, config, context, opts)
+ break
+ case "meter":
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ drawColumePointText(points, eachSeries, config, context, opts)
+ break
+ }
+ })
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawMountDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ let mountOption = assign(
+ {},
+ {
+ type: "mount",
+ widthRatio: 1,
+ borderWidth: 1,
+ barBorderCircle: false,
+ barBorderRadius: [],
+ linearType: "none",
+ linearOpacity: 1,
+ customColor: [],
+ colorStop: 0,
+ },
+ opts.extra.mount,
+ )
+ mountOption.widthRatio = mountOption.widthRatio <= 0 ? 0 : mountOption.widthRatio
+ mountOption.widthRatio = mountOption.widthRatio >= 2 ? 2 : mountOption.widthRatio
+ let calPoints = []
+ context.save()
+ let leftNum = -2
+ let rightNum = xAxisPoints.length + 2
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2
+ rightNum = leftNum + opts.xAxis.itemCount + 4
+ }
+ mountOption.customColor = fillCustomColor(mountOption.linearType, mountOption.customColor, series, config)
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[0])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+
+ // 计算0轴坐标
+ let spacingValid = opts.height - opts.area[0] - opts.area[2]
+ let zeroHeight = (spacingValid * (0 - minRange)) / (maxRange - minRange)
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2]
+
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process)
+ switch (mountOption.type) {
+ case "bar":
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - (eachSpacing * mountOption.widthRatio) / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints)
+ //透明渐变
+ if (mountOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ // 圆角边框
+ if ((mountOption.barBorderRadius && mountOption.barBorderRadius.length === 4) || mountOption.barBorderCircle === true) {
+ const left = startX
+ const top = item.y > zeroPoints ? zeroPoints : item.y
+ const width = item.width
+ const height = Math.abs(zeroPoints - item.y)
+ if (mountOption.barBorderCircle) {
+ mountOption.barBorderRadius = [width / 2, width / 2, 0, 0]
+ }
+ if (item.y > zeroPoints) {
+ mountOption.barBorderRadius = [0, 0, width / 2, width / 2]
+ }
+ let [r0, r1, r2, r3] = mountOption.barBorderRadius
+ let minRadius = Math.min(width / 2, height / 2)
+ r0 = r0 > minRadius ? minRadius : r0
+ r1 = r1 > minRadius ? minRadius : r1
+ r2 = r2 > minRadius ? minRadius : r2
+ r3 = r3 > minRadius ? minRadius : r3
+ r0 = r0 < 0 ? 0 : r0
+ r1 = r1 < 0 ? 0 : r1
+ r2 = r2 < 0 ? 0 : r2
+ r3 = r3 < 0 ? 0 : r3
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2)
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0)
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2)
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI)
+ } else {
+ context.moveTo(startX, item.y)
+ context.lineTo(startX + item.width, item.y)
+ context.lineTo(startX + item.width, zeroPoints)
+ context.lineTo(startX, zeroPoints)
+ context.lineTo(startX, item.y)
+ }
+ context.setStrokeStyle(strokeColor)
+ context.setFillStyle(fillColor)
+ if (mountOption.borderWidth > 0) {
+ context.setLineWidth(mountOption.borderWidth * opts.pix)
+ context.closePath()
+ context.stroke()
+ }
+ context.fill()
+ }
+ }
+ break
+ case "triangle":
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - (eachSpacing * mountOption.widthRatio) / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints)
+ //透明渐变
+ if (mountOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints)
+ context.lineTo(item.x, item.y)
+ context.lineTo(startX + item.width, zeroPoints)
+ context.setStrokeStyle(strokeColor)
+ context.setFillStyle(fillColor)
+ if (mountOption.borderWidth > 0) {
+ context.setLineWidth(mountOption.borderWidth * opts.pix)
+ context.stroke()
+ }
+ context.fill()
+ }
+ }
+ break
+ case "mount":
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - (eachSpacing * mountOption.widthRatio) / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints)
+ //透明渐变
+ if (mountOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints)
+ context.bezierCurveTo(item.x - item.width / 4, zeroPoints, item.x - item.width / 4, item.y, item.x, item.y)
+ context.bezierCurveTo(item.x + item.width / 4, item.y, item.x + item.width / 4, zeroPoints, startX + item.width, zeroPoints)
+ context.setStrokeStyle(strokeColor)
+ context.setFillStyle(fillColor)
+ if (mountOption.borderWidth > 0) {
+ context.setLineWidth(mountOption.borderWidth * opts.pix)
+ context.stroke()
+ }
+ context.fill()
+ }
+ }
+ break
+ case "sharp":
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - (eachSpacing * mountOption.widthRatio) / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints)
+ //透明渐变
+ if (mountOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints)
+ context.quadraticCurveTo(item.x - 0, zeroPoints - height / 4, item.x, item.y)
+ context.quadraticCurveTo(item.x + 0, zeroPoints - height / 4, startX + item.width, zeroPoints)
+ context.setStrokeStyle(strokeColor)
+ context.setFillStyle(fillColor)
+ if (mountOption.borderWidth > 0) {
+ context.setLineWidth(mountOption.borderWidth * opts.pix)
+ context.stroke()
+ }
+ context.fill()
+ }
+ }
+ break
+ }
+
+ if (opts.dataLabel !== false && process === 1) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[0])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process)
+ drawMountPointText(points, series, config, context, opts, zeroPoints)
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: points,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawBarDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let yAxisPoints = []
+ let eachSpacing = (opts.height - opts.area[0] - opts.area[2]) / opts.categories.length
+ for (let i = 0; i < opts.categories.length; i++) {
+ yAxisPoints.push(opts.area[0] + eachSpacing / 2 + eachSpacing * i)
+ }
+ let columnOption = assign(
+ {},
+ {
+ type: "group",
+ width: eachSpacing / 2,
+ meterBorder: 4,
+ meterFillColor: "#FFFFFF",
+ barBorderCircle: false,
+ barBorderRadius: [],
+ seriesGap: 2,
+ linearType: "none",
+ linearOpacity: 1,
+ customColor: [],
+ colorStop: 0,
+ },
+ opts.extra.bar,
+ )
+ let calPoints = []
+ context.save()
+ let leftNum = -2
+ let rightNum = yAxisPoints.length + 2
+ if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
+ drawBarToolTipSplitArea(opts.tooltip.offset.y, opts, config, context, eachSpacing)
+ }
+ columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config)
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.xAxisData.ranges)
+ maxRange = ranges.pop()
+ minRange = ranges.shift()
+ var data = eachSeries.data
+ switch (columnOption.type) {
+ case "group":
+ var points = getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, process)
+ var tooltipPoints = getBarStackDataPoints(
+ data,
+ minRange,
+ maxRange,
+ yAxisPoints,
+ eachSpacing,
+ opts,
+ config,
+ seriesIndex,
+ series,
+ process,
+ )
+ calPoints.push(tooltipPoints)
+ points = fixBarData(points, eachSpacing, series.length, seriesIndex, config, opts)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ //fix issues/I27B1N yyoinge & Joeshu
+ if (item !== null && i > leftNum && i < rightNum) {
+ //var startX = item.x - item.width / 2;
+ var startX = opts.area[3]
+ var startY = item.y - item.width / 2
+ var height = item.height
+ context.beginPath()
+ var fillColor = item.color || eachSeries.color
+ var strokeColor = item.color || eachSeries.color
+ if (columnOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, item.x, item.y)
+ //透明渐变
+ if (columnOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity))
+ grd.addColorStop(
+ columnOption.colorStop,
+ hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity),
+ )
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ // 圆角边框
+ if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
+ const left = startX
+ const width = item.width
+ const top = item.y - item.width / 2
+ const height = item.height
+ if (columnOption.barBorderCircle) {
+ columnOption.barBorderRadius = [width / 2, width / 2, 0, 0]
+ }
+ let [r0, r1, r2, r3] = columnOption.barBorderRadius
+ let minRadius = Math.min(width / 2, height / 2)
+ r0 = r0 > minRadius ? minRadius : r0
+ r1 = r1 > minRadius ? minRadius : r1
+ r2 = r2 > minRadius ? minRadius : r2
+ r3 = r3 > minRadius ? minRadius : r3
+ r0 = r0 < 0 ? 0 : r0
+ r1 = r1 < 0 ? 0 : r1
+ r2 = r2 < 0 ? 0 : r2
+ r3 = r3 < 0 ? 0 : r3
+
+ context.arc(left + r3, top + r3, r3, -Math.PI, -Math.PI / 2)
+ context.arc(item.x - r0, top + r0, r0, -Math.PI / 2, 0)
+ context.arc(item.x - r1, top + width - r1, r1, 0, Math.PI / 2)
+ context.arc(left + r2, top + width - r2, r2, Math.PI / 2, Math.PI)
+ } else {
+ context.moveTo(startX, startY)
+ context.lineTo(item.x, startY)
+ context.lineTo(item.x, startY + item.width)
+ context.lineTo(startX, startY + item.width)
+ context.lineTo(startX, startY)
+ context.setLineWidth(1)
+ context.setStrokeStyle(strokeColor)
+ }
+ context.setFillStyle(fillColor)
+ context.closePath()
+ //context.stroke();
+ context.fill()
+ }
+ }
+ break
+ case "stack":
+ // 绘制堆叠数据图
+ var points = getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, series, process)
+ calPoints.push(points)
+ points = fixBarStackData(points, eachSpacing, series.length, seriesIndex, config, opts, series)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ context.beginPath()
+ var fillColor = item.color || eachSeries.color
+ var startX = item.x0
+ context.setFillStyle(fillColor)
+ context.moveTo(startX, item.y - item.width / 2)
+ context.fillRect(startX, item.y - item.width / 2, item.height, item.width)
+ context.closePath()
+ context.fill()
+ }
+ }
+ break
+ }
+ })
+
+ if (opts.dataLabel !== false && process === 1) {
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.xAxisData.ranges)
+ maxRange = ranges.pop()
+ minRange = ranges.shift()
+ var data = eachSeries.data
+ switch (columnOption.type) {
+ case "group":
+ var points = getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, process)
+ points = fixBarData(points, eachSpacing, series.length, seriesIndex, config, opts)
+ drawBarPointText(points, eachSeries, config, context, opts)
+ break
+ case "stack":
+ var points = getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, series, process)
+ drawBarPointText(points, eachSeries, config, context, opts)
+ break
+ }
+ })
+ }
+ return {
+ yAxisPoints: yAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawCandleDataPoints(series, seriesMA, opts, config, context) {
+ var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1
+ var candleOption = assign(
+ {},
+ {
+ color: {},
+ average: {},
+ },
+ opts.extra.candle,
+ )
+ candleOption.color = assign(
+ {},
+ {
+ upLine: "#f04864",
+ upFill: "#f04864",
+ downLine: "#2fc25b",
+ downFill: "#2fc25b",
+ },
+ candleOption.color,
+ )
+ candleOption.average = assign(
+ {},
+ {
+ show: false,
+ name: [],
+ day: [],
+ color: config.color,
+ },
+ candleOption.average,
+ )
+ opts.extra.candle = candleOption
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ let calPoints = []
+ context.save()
+ let leftNum = -2
+ let rightNum = xAxisPoints.length + 2
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2
+ rightNum = leftNum + opts.xAxis.itemCount + 4
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ //画均线
+ if (candleOption.average.show || seriesMA) {
+ //Merge pull request !12 from 邱贵翔
+ seriesMA.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ var splitPointList = splitPoints(points, eachSeries)
+ for (let i = 0; i < splitPointList.length; i++) {
+ let points = splitPointList[i]
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setLineWidth(1)
+ if (points.length === 1) {
+ context.moveTo(points[0].x, points[0].y)
+ context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI)
+ } else {
+ context.moveTo(points[0].x, points[0].y)
+ let startPoint = 0
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ var ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ context.moveTo(points[0].x, points[0].y)
+ }
+ context.closePath()
+ context.stroke()
+ }
+ })
+ }
+ //画K线
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ calPoints.push(points)
+ var splitPointList = splitPoints(points, eachSeries)
+ for (let i = 0; i < splitPointList[0].length; i++) {
+ if (i > leftNum && i < rightNum) {
+ let item = splitPointList[0][i]
+ context.beginPath()
+ //如果上涨
+ if (data[i][1] - data[i][0] > 0) {
+ context.setStrokeStyle(candleOption.color.upLine)
+ context.setFillStyle(candleOption.color.upFill)
+ context.setLineWidth(1 * opts.pix)
+ context.moveTo(item[3].x, item[3].y) //顶点
+ context.lineTo(item[1].x, item[1].y) //收盘中间点
+ context.lineTo(item[1].x - eachSpacing / 4, item[1].y) //收盘左侧点
+ context.lineTo(item[0].x - eachSpacing / 4, item[0].y) //开盘左侧点
+ context.lineTo(item[0].x, item[0].y) //开盘中间点
+ context.lineTo(item[2].x, item[2].y) //底点
+ context.lineTo(item[0].x, item[0].y) //开盘中间点
+ context.lineTo(item[0].x + eachSpacing / 4, item[0].y) //开盘右侧点
+ context.lineTo(item[1].x + eachSpacing / 4, item[1].y) //收盘右侧点
+ context.lineTo(item[1].x, item[1].y) //收盘中间点
+ context.moveTo(item[3].x, item[3].y) //顶点
+ } else {
+ context.setStrokeStyle(candleOption.color.downLine)
+ context.setFillStyle(candleOption.color.downFill)
+ context.setLineWidth(1 * opts.pix)
+ context.moveTo(item[3].x, item[3].y) //顶点
+ context.lineTo(item[0].x, item[0].y) //开盘中间点
+ context.lineTo(item[0].x - eachSpacing / 4, item[0].y) //开盘左侧点
+ context.lineTo(item[1].x - eachSpacing / 4, item[1].y) //收盘左侧点
+ context.lineTo(item[1].x, item[1].y) //收盘中间点
+ context.lineTo(item[2].x, item[2].y) //底点
+ context.lineTo(item[1].x, item[1].y) //收盘中间点
+ context.lineTo(item[1].x + eachSpacing / 4, item[1].y) //收盘右侧点
+ context.lineTo(item[0].x + eachSpacing / 4, item[0].y) //开盘右侧点
+ context.lineTo(item[0].x, item[0].y) //开盘中间点
+ context.moveTo(item[3].x, item[3].y) //顶点
+ }
+ context.closePath()
+ context.fill()
+ context.stroke()
+ }
+ }
+ })
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawAreaDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var areaOption = assign(
+ {},
+ {
+ type: "straight",
+ opacity: 0.2,
+ addLine: false,
+ width: 2,
+ gradient: false,
+ activeType: "none",
+ },
+ opts.extra.area,
+ )
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ let endY = opts.height - opts.area[2]
+ let calPoints = []
+ context.save()
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ let data = eachSeries.data
+ let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ calPoints.push(points)
+ let splitPointList = splitPoints(points, eachSeries)
+ for (let i = 0; i < splitPointList.length; i++) {
+ let points = splitPointList[i]
+ // 绘制区域数
+ context.beginPath()
+ context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity))
+ if (areaOption.gradient) {
+ let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height - opts.area[2])
+ gradient.addColorStop("0", hexToRgb(eachSeries.color, areaOption.opacity))
+ gradient.addColorStop("1.0", hexToRgb("#FFFFFF", 0.1))
+ context.setFillStyle(gradient)
+ } else {
+ context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity))
+ }
+ context.setLineWidth(areaOption.width * opts.pix)
+ if (points.length > 1) {
+ let firstPoint = points[0]
+ let lastPoint = points[points.length - 1]
+ context.moveTo(firstPoint.x, firstPoint.y)
+ let startPoint = 0
+ if (areaOption.type === "curve") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ let ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ }
+ if (areaOption.type === "straight") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ if (areaOption.type === "step") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, points[j - 1].y)
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ context.lineTo(lastPoint.x, endY)
+ context.lineTo(firstPoint.x, endY)
+ context.lineTo(firstPoint.x, firstPoint.y)
+ } else {
+ let item = points[0]
+ context.moveTo(item.x - eachSpacing / 2, item.y)
+ // context.lineTo(item.x + eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, endY);
+ // context.lineTo(item.x - eachSpacing / 2, endY);
+ // context.moveTo(item.x - eachSpacing / 2, item.y);
+ }
+ context.closePath()
+ context.fill()
+ //画连线
+ if (areaOption.addLine) {
+ if (eachSeries.lineType == "dash") {
+ let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8
+ dashLength *= opts.pix
+ context.setLineDash([dashLength, dashLength])
+ }
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setLineWidth(areaOption.width * opts.pix)
+ if (points.length === 1) {
+ context.moveTo(points[0].x, points[0].y)
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ } else {
+ context.moveTo(points[0].x, points[0].y)
+ let startPoint = 0
+ if (areaOption.type === "curve") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ let ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ }
+ if (areaOption.type === "straight") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ if (areaOption.type === "step") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, points[j - 1].y)
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ context.moveTo(points[0].x, points[0].y)
+ }
+ context.stroke()
+ context.setLineDash([])
+ }
+ }
+ //画点
+ if (opts.dataPointShape !== false) {
+ drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts)
+ }
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, areaOption, seriesIndex)
+ })
+
+ if (opts.dataLabel !== false && process === 1) {
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ drawPointText(points, eachSeries, config, context, opts)
+ })
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawScatterDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var scatterOption = assign(
+ {},
+ {
+ type: "circle",
+ },
+ opts.extra.scatter,
+ )
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ var calPoints = []
+ context.save()
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setFillStyle(eachSeries.color)
+ context.setLineWidth(1 * opts.pix)
+ var shape = eachSeries.pointShape
+ if (shape === "diamond") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y)
+ context.lineTo(item.x, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "circle") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x + 2.5 * opts.pix, item.y)
+ context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false)
+ }
+ })
+ } else if (shape === "square") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x - 3.5, item.y - 3.5)
+ context.rect(item.x - 3.5, item.y - 3.5, 7, 7)
+ }
+ })
+ } else if (shape === "triangle") {
+ points.forEach(function (item, index) {
+ if (item !== null) {
+ context.moveTo(item.x, item.y - 4.5)
+ context.lineTo(item.x - 4.5, item.y + 4.5)
+ context.lineTo(item.x + 4.5, item.y + 4.5)
+ context.lineTo(item.x, item.y - 4.5)
+ }
+ })
+ } else if (shape === "triangle") {
+ return
+ }
+ context.closePath()
+ context.fill()
+ context.stroke()
+ })
+ if (opts.dataLabel !== false && process === 1) {
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ drawPointText(points, eachSeries, config, context, opts)
+ })
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawBubbleDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var bubbleOption = assign(
+ {},
+ {
+ opacity: 1,
+ border: 2,
+ },
+ opts.extra.bubble,
+ )
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ var calPoints = []
+ context.save()
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setLineWidth(bubbleOption.border * opts.pix)
+ context.setFillStyle(hexToRgb(eachSeries.color, bubbleOption.opacity))
+ points.forEach(function (item, index) {
+ context.moveTo(item.x + item.r, item.y)
+ context.arc(item.x, item.y, item.r * opts.pix, 0, 2 * Math.PI, false)
+ })
+ context.closePath()
+ context.fill()
+ context.stroke()
+
+ if (opts.dataLabel !== false && process === 1) {
+ points.forEach(function (item, index) {
+ context.beginPath()
+ var fontSize = eachSeries.textSize * opts.pix || config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(eachSeries.textColor || "#FFFFFF")
+ context.setTextAlign("center")
+ context.fillText(String(item.t), item.x, item.y + fontSize / 2)
+ context.closePath()
+ context.stroke()
+ context.setTextAlign("left")
+ })
+ }
+ })
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawLineDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var lineOption = assign(
+ {},
+ {
+ type: "straight",
+ width: 2,
+ activeType: "none",
+ linearType: "none",
+ onShadow: false,
+ animation: "vertical",
+ },
+ opts.extra.line,
+ )
+ lineOption.width *= opts.pix
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ var calPoints = []
+ context.save()
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ series.forEach(function (eachSeries, seriesIndex) {
+ // 这段很神奇的代码用于解决ios16的setStrokeStyle失效的bug
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.moveTo(-10000, -10000)
+ context.lineTo(-10001, -10001)
+ context.stroke()
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process)
+ calPoints.push(points)
+ var splitPointList = splitPoints(points, eachSeries)
+ if (eachSeries.lineType == "dash") {
+ let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8
+ dashLength *= opts.pix
+ context.setLineDash([dashLength, dashLength])
+ }
+ context.beginPath()
+ var strokeColor = eachSeries.color
+ if (lineOption.linearType !== "none" && eachSeries.linearColor && eachSeries.linearColor.length > 0) {
+ var grd = context.createLinearGradient(
+ opts.chartData.xAxisData.startX,
+ opts.height / 2,
+ opts.chartData.xAxisData.endX,
+ opts.height / 2,
+ )
+ for (var i = 0; i < eachSeries.linearColor.length; i++) {
+ grd.addColorStop(eachSeries.linearColor[i][0], hexToRgb(eachSeries.linearColor[i][1], 1))
+ }
+ strokeColor = grd
+ }
+ context.setStrokeStyle(strokeColor)
+ if (lineOption.onShadow == true && eachSeries.setShadow && eachSeries.setShadow.length > 0) {
+ context.setShadow(eachSeries.setShadow[0], eachSeries.setShadow[1], eachSeries.setShadow[2], eachSeries.setShadow[3])
+ } else {
+ context.setShadow(0, 0, 0, "rgba(0,0,0,0)")
+ }
+ context.setLineWidth(lineOption.width)
+ splitPointList.forEach(function (points, index) {
+ if (points.length === 1) {
+ context.moveTo(points[0].x, points[0].y)
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ } else {
+ context.moveTo(points[0].x, points[0].y)
+ let startPoint = 0
+ if (lineOption.type === "curve") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ var ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ }
+ if (lineOption.type === "straight") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ if (lineOption.type === "step") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, points[j - 1].y)
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ context.moveTo(points[0].x, points[0].y)
+ }
+ })
+ context.stroke()
+ context.setLineDash([])
+ if (opts.dataPointShape !== false) {
+ drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts)
+ }
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, lineOption)
+ })
+ if (opts.dataLabel !== false && process === 1) {
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ drawPointText(points, eachSeries, config, context, opts)
+ })
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawMixDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ eachSpacing = xAxisData.eachSpacing
+ let columnOption = assign(
+ {},
+ {
+ width: eachSpacing / 2,
+ barBorderCircle: false,
+ barBorderRadius: [],
+ seriesGap: 2,
+ linearType: "none",
+ linearOpacity: 1,
+ customColor: [],
+ colorStop: 0,
+ },
+ opts.extra.mix.column,
+ )
+ let areaOption = assign(
+ {},
+ {
+ opacity: 0.2,
+ gradient: false,
+ },
+ opts.extra.mix.area,
+ )
+ let lineOption = assign(
+ {},
+ {
+ width: 2,
+ },
+ opts.extra.mix.line,
+ )
+ let endY = opts.height - opts.area[2]
+ let calPoints = []
+ var columnIndex = 0
+ var columnLength = 0
+ series.forEach(function (eachSeries, seriesIndex) {
+ if (eachSeries.type == "column") {
+ columnLength += 1
+ }
+ })
+ context.save()
+ let leftNum = -2
+ let rightNum = xAxisPoints.length + 2
+ let leftSpace = 0
+ let rightSpace = opts.width + eachSpacing
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2
+ rightNum = leftNum + opts.xAxis.itemCount + 4
+ leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3]
+ rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing
+ }
+ columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config)
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ calPoints.push(points)
+ // 绘制柱状数据图
+ if (eachSeries.type == "column") {
+ points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts)
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i]
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - item.width / 2
+ var height = opts.height - item.y - opts.area[2]
+ context.beginPath()
+ var fillColor = item.color || eachSeries.color
+ var strokeColor = item.color || eachSeries.color
+ if (columnOption.linearType !== "none") {
+ var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2])
+ //透明渐变
+ if (columnOption.linearType == "opacity") {
+ grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity))
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ } else {
+ grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity))
+ grd.addColorStop(
+ columnOption.colorStop,
+ hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity),
+ )
+ grd.addColorStop(1, hexToRgb(fillColor, 1))
+ }
+ fillColor = grd
+ }
+ // 圆角边框
+ if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle) {
+ const left = startX
+ const top = item.y
+ const width = item.width
+ const height = opts.height - opts.area[2] - item.y
+ if (columnOption.barBorderCircle) {
+ columnOption.barBorderRadius = [width / 2, width / 2, 0, 0]
+ }
+ let [r0, r1, r2, r3] = columnOption.barBorderRadius
+ let minRadius = Math.min(width / 2, height / 2)
+ r0 = r0 > minRadius ? minRadius : r0
+ r1 = r1 > minRadius ? minRadius : r1
+ r2 = r2 > minRadius ? minRadius : r2
+ r3 = r3 > minRadius ? minRadius : r3
+ r0 = r0 < 0 ? 0 : r0
+ r1 = r1 < 0 ? 0 : r1
+ r2 = r2 < 0 ? 0 : r2
+ r3 = r3 < 0 ? 0 : r3
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2)
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0)
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2)
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI)
+ } else {
+ context.moveTo(startX, item.y)
+ context.lineTo(startX + item.width, item.y)
+ context.lineTo(startX + item.width, opts.height - opts.area[2])
+ context.lineTo(startX, opts.height - opts.area[2])
+ context.lineTo(startX, item.y)
+ context.setLineWidth(1)
+ context.setStrokeStyle(strokeColor)
+ }
+ context.setFillStyle(fillColor)
+ context.closePath()
+ context.fill()
+ }
+ }
+ columnIndex += 1
+ }
+ //绘制区域图数据
+ if (eachSeries.type == "area") {
+ let splitPointList = splitPoints(points, eachSeries)
+ for (let i = 0; i < splitPointList.length; i++) {
+ let points = splitPointList[i]
+ // 绘制区域数据
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity))
+ if (areaOption.gradient) {
+ let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height - opts.area[2])
+ gradient.addColorStop("0", hexToRgb(eachSeries.color, areaOption.opacity))
+ gradient.addColorStop("1.0", hexToRgb("#FFFFFF", 0.1))
+ context.setFillStyle(gradient)
+ } else {
+ context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity))
+ }
+ context.setLineWidth(2 * opts.pix)
+ if (points.length > 1) {
+ var firstPoint = points[0]
+ let lastPoint = points[points.length - 1]
+ context.moveTo(firstPoint.x, firstPoint.y)
+ let startPoint = 0
+ if (eachSeries.style === "curve") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ var ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ } else {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ context.lineTo(lastPoint.x, endY)
+ context.lineTo(firstPoint.x, endY)
+ context.lineTo(firstPoint.x, firstPoint.y)
+ } else {
+ let item = points[0]
+ context.moveTo(item.x - eachSpacing / 2, item.y)
+ // context.lineTo(item.x + eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, endY);
+ // context.lineTo(item.x - eachSpacing / 2, endY);
+ // context.moveTo(item.x - eachSpacing / 2, item.y);
+ }
+ context.closePath()
+ context.fill()
+ }
+ }
+ // 绘制折线数据图
+ if (eachSeries.type == "line") {
+ var splitPointList = splitPoints(points, eachSeries)
+ splitPointList.forEach(function (points, index) {
+ if (eachSeries.lineType == "dash") {
+ let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8
+ dashLength *= opts.pix
+ context.setLineDash([dashLength, dashLength])
+ }
+ context.beginPath()
+ context.setStrokeStyle(eachSeries.color)
+ context.setLineWidth(lineOption.width * opts.pix)
+ if (points.length === 1) {
+ context.moveTo(points[0].x, points[0].y)
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ } else {
+ context.moveTo(points[0].x, points[0].y)
+ let startPoint = 0
+ if (eachSeries.style == "curve") {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ var ctrlPoint = createCurveControlPoints(points, j - 1)
+ context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y)
+ }
+ }
+ } else {
+ for (let j = 0; j < points.length; j++) {
+ let item = points[j]
+ if (startPoint == 0 && item.x > leftSpace) {
+ context.moveTo(item.x, item.y)
+ startPoint = 1
+ }
+ if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
+ context.lineTo(item.x, item.y)
+ }
+ }
+ }
+ context.moveTo(points[0].x, points[0].y)
+ }
+ context.stroke()
+ context.setLineDash([])
+ })
+ }
+ // 绘制点数据图
+ if (eachSeries.type == "point") {
+ eachSeries.addPoint = true
+ }
+ if (eachSeries.addPoint == true && eachSeries.type !== "column") {
+ drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts)
+ }
+ })
+ if (opts.dataLabel !== false && process === 1) {
+ var columnIndex = 0
+ series.forEach(function (eachSeries, seriesIndex) {
+ let ranges, minRange, maxRange
+ ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index])
+ minRange = ranges.pop()
+ maxRange = ranges.shift()
+ var data = eachSeries.data
+ var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process)
+ if (eachSeries.type !== "column") {
+ drawPointText(points, eachSeries, config, context, opts)
+ } else {
+ points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts)
+ drawPointText(points, eachSeries, config, context, opts)
+ columnIndex += 1
+ }
+ })
+ }
+ context.restore()
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: calPoints,
+ eachSpacing: eachSpacing,
+ }
+}
+
+function drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints) {
+ var toolTipOption = opts.extra.tooltip || {}
+ if (
+ toolTipOption.horizentalLine &&
+ opts.tooltip &&
+ process === 1 &&
+ (opts.type == "line" ||
+ opts.type == "area" ||
+ opts.type == "column" ||
+ opts.type == "mount" ||
+ opts.type == "candle" ||
+ opts.type == "mix")
+ ) {
+ drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints)
+ }
+ context.save()
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
+ context.translate(opts._scrollDistance_, 0)
+ }
+ if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
+ drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context, eachSpacing, xAxisPoints)
+ }
+ context.restore()
+}
+
+function drawXAxis(categories, opts, config, context) {
+ let xAxisData = opts.chartData.xAxisData,
+ xAxisPoints = xAxisData.xAxisPoints,
+ startX = xAxisData.startX,
+ endX = xAxisData.endX,
+ eachSpacing = xAxisData.eachSpacing
+ var boundaryGap = "center"
+ if (opts.type == "bar" || opts.type == "line" || opts.type == "area" || opts.type == "scatter" || opts.type == "bubble") {
+ boundaryGap = opts.xAxis.boundaryGap
+ }
+ var startY = opts.height - opts.area[2]
+ var endY = opts.area[0]
+
+ //绘制滚动条
+ if (opts.enableScroll && opts.xAxis.scrollShow) {
+ var scrollY = opts.height - opts.area[2] + config.xAxisHeight
+ var scrollScreenWidth = endX - startX
+ var scrollTotalWidth = eachSpacing * (xAxisPoints.length - 1)
+ if (opts.type == "mount" && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1) {
+ if (opts.extra.mount.widthRatio > 2) opts.extra.mount.widthRatio = 2
+ scrollTotalWidth += (opts.extra.mount.widthRatio - 1) * eachSpacing
+ }
+ var scrollWidth = (scrollScreenWidth * scrollScreenWidth) / scrollTotalWidth
+ var scrollLeft = 0
+ if (opts._scrollDistance_) {
+ scrollLeft = (-opts._scrollDistance_ * scrollScreenWidth) / scrollTotalWidth
+ }
+ context.beginPath()
+ context.setLineCap("round")
+ context.setLineWidth(6 * opts.pix)
+ context.setStrokeStyle(opts.xAxis.scrollBackgroundColor || "#EFEBEF")
+ context.moveTo(startX, scrollY)
+ context.lineTo(endX, scrollY)
+ context.stroke()
+ context.closePath()
+ context.beginPath()
+ context.setLineCap("round")
+ context.setLineWidth(6 * opts.pix)
+ context.setStrokeStyle(opts.xAxis.scrollColor || "#A6A6A6")
+ context.moveTo(startX + scrollLeft, scrollY)
+ context.lineTo(startX + scrollLeft + scrollWidth, scrollY)
+ context.stroke()
+ context.closePath()
+ context.setLineCap("butt")
+ }
+ context.save()
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
+ context.translate(opts._scrollDistance_, 0)
+ }
+ //绘制X轴刻度线
+ if (opts.xAxis.calibration === true) {
+ context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc")
+ context.setLineCap("butt")
+ context.setLineWidth(1 * opts.pix)
+ xAxisPoints.forEach(function (item, index) {
+ if (index > 0) {
+ context.beginPath()
+ context.moveTo(item - eachSpacing / 2, startY)
+ context.lineTo(item - eachSpacing / 2, startY + 3 * opts.pix)
+ context.closePath()
+ context.stroke()
+ }
+ })
+ }
+ //绘制X轴网格
+ if (opts.xAxis.disableGrid !== true) {
+ context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc")
+ context.setLineCap("butt")
+ context.setLineWidth(1 * opts.pix)
+ if (opts.xAxis.gridType == "dash") {
+ context.setLineDash([opts.xAxis.dashLength * opts.pix, opts.xAxis.dashLength * opts.pix])
+ }
+ opts.xAxis.gridEval = opts.xAxis.gridEval || 1
+ xAxisPoints.forEach(function (item, index) {
+ if (index % opts.xAxis.gridEval == 0) {
+ context.beginPath()
+ context.moveTo(item, startY)
+ context.lineTo(item, endY)
+ context.stroke()
+ }
+ })
+ context.setLineDash([])
+ }
+ //绘制X轴文案
+ if (opts.xAxis.disabled !== true) {
+ // 对X轴列表做抽稀处理
+ //默认全部显示X轴标签
+ let maxXAxisListLength = categories.length
+ //如果设置了X轴单屏数量
+ if (opts.xAxis.labelCount) {
+ //如果设置X轴密度
+ if (opts.xAxis.itemCount) {
+ maxXAxisListLength = Math.ceil((categories.length / opts.xAxis.itemCount) * opts.xAxis.labelCount)
+ } else {
+ maxXAxisListLength = opts.xAxis.labelCount
+ }
+ maxXAxisListLength -= 1
+ }
+
+ let ratio = Math.ceil(categories.length / maxXAxisListLength)
+
+ let newCategories = []
+ let cgLength = categories.length
+ for (let i = 0; i < cgLength; i++) {
+ if (i % ratio !== 0) {
+ newCategories.push("")
+ } else {
+ newCategories.push(categories[i])
+ }
+ }
+ newCategories[cgLength - 1] = categories[cgLength - 1]
+ var xAxisFontSize = opts.xAxis.fontSize * opts.pix || config.fontSize
+ if (config._xAxisTextAngle_ === 0) {
+ newCategories.forEach(function (item, index) {
+ var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item, index, opts) : item
+ var offset = -measureText(String(xitem), xAxisFontSize, context) / 2
+ if (boundaryGap == "center") {
+ offset += eachSpacing / 2
+ }
+ var scrollHeight = 0
+ if (opts.xAxis.scrollShow) {
+ scrollHeight = 6 * opts.pix
+ }
+ // 如果在主视图区域内
+ var _scrollDistance_ = opts._scrollDistance_ || 0
+ var truePoints = boundaryGap == "center" ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index]
+ if (
+ truePoints - Math.abs(_scrollDistance_) >= opts.area[3] - 1 &&
+ truePoints - Math.abs(_scrollDistance_) <= opts.width - opts.area[1] + 1
+ ) {
+ context.beginPath()
+ context.setFontSize(xAxisFontSize)
+ context.setFillStyle(opts.xAxis.fontColor || opts.fontColor)
+ context.fillText(
+ String(xitem),
+ xAxisPoints[index] + offset,
+ startY +
+ opts.xAxis.marginTop * opts.pix +
+ ((opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix) / 2 +
+ opts.xAxis.fontSize * opts.pix,
+ )
+ context.closePath()
+ context.stroke()
+ }
+ })
+ } else {
+ newCategories.forEach(function (item, index) {
+ var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item) : item
+ // 如果在主视图区域内
+ var _scrollDistance_ = opts._scrollDistance_ || 0
+ var truePoints = boundaryGap == "center" ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index]
+ if (
+ truePoints - Math.abs(_scrollDistance_) >= opts.area[3] - 1 &&
+ truePoints - Math.abs(_scrollDistance_) <= opts.width - opts.area[1] + 1
+ ) {
+ context.save()
+ context.beginPath()
+ context.setFontSize(xAxisFontSize)
+ context.setFillStyle(opts.xAxis.fontColor || opts.fontColor)
+ var textWidth = measureText(String(xitem), xAxisFontSize, context)
+ var offsetX = xAxisPoints[index]
+ if (boundaryGap == "center") {
+ offsetX = xAxisPoints[index] + eachSpacing / 2
+ }
+ var scrollHeight = 0
+ if (opts.xAxis.scrollShow) {
+ scrollHeight = 6 * opts.pix
+ }
+ var offsetY =
+ startY + opts.xAxis.marginTop * opts.pix + xAxisFontSize - xAxisFontSize * Math.abs(Math.sin(config._xAxisTextAngle_))
+ if (opts.xAxis.rotateAngle < 0) {
+ offsetX -= xAxisFontSize / 2
+ textWidth = 0
+ } else {
+ offsetX += xAxisFontSize / 2
+ textWidth = -textWidth
+ }
+ context.translate(offsetX, offsetY)
+ context.rotate(-1 * config._xAxisTextAngle_)
+ context.fillText(String(xitem), textWidth, 0)
+ context.closePath()
+ context.stroke()
+ context.restore()
+ }
+ })
+ }
+ }
+ context.restore()
+
+ //画X轴标题
+ if (opts.xAxis.title) {
+ context.beginPath()
+ context.setFontSize(opts.xAxis.titleFontSize * opts.pix)
+ context.setFillStyle(opts.xAxis.titleFontColor)
+ context.fillText(
+ String(opts.xAxis.title),
+ opts.width - opts.area[1] + opts.xAxis.titleOffsetX * opts.pix,
+ opts.height -
+ opts.area[2] +
+ opts.xAxis.marginTop * opts.pix +
+ ((opts.xAxis.lineHeight - opts.xAxis.titleFontSize) * opts.pix) / 2 +
+ (opts.xAxis.titleFontSize + opts.xAxis.titleOffsetY) * opts.pix,
+ )
+ context.closePath()
+ context.stroke()
+ }
+
+ //绘制X轴轴线
+ if (opts.xAxis.axisLine) {
+ context.beginPath()
+ context.setStrokeStyle(opts.xAxis.axisLineColor)
+ context.setLineWidth(1 * opts.pix)
+ context.moveTo(startX, opts.height - opts.area[2])
+ context.lineTo(endX, opts.height - opts.area[2])
+ context.stroke()
+ }
+}
+
+function drawYAxisGrid(categories, opts, config, context) {
+ if (opts.yAxis.disableGrid === true) {
+ return
+ }
+ let spacingValid = opts.height - opts.area[0] - opts.area[2]
+ let eachSpacing = spacingValid / opts.yAxis.splitNumber
+ let startX = opts.area[3]
+ let xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
+ xAxiseachSpacing = opts.chartData.xAxisData.eachSpacing
+ let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1)
+ if (opts.type == "mount" && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1) {
+ if (opts.extra.mount.widthRatio > 2) opts.extra.mount.widthRatio = 2
+ TotalWidth += (opts.extra.mount.widthRatio - 1) * xAxiseachSpacing
+ }
+ let endX = startX + TotalWidth
+ let points = []
+ let startY = 1
+ if (opts.xAxis.axisLine === false) {
+ startY = 0
+ }
+ for (let i = startY; i < opts.yAxis.splitNumber + 1; i++) {
+ points.push(opts.height - opts.area[2] - eachSpacing * i)
+ }
+ context.save()
+ if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
+ context.translate(opts._scrollDistance_, 0)
+ }
+ if (opts.yAxis.gridType == "dash") {
+ context.setLineDash([opts.yAxis.dashLength * opts.pix, opts.yAxis.dashLength * opts.pix])
+ }
+ context.setStrokeStyle(opts.yAxis.gridColor)
+ context.setLineWidth(1 * opts.pix)
+ points.forEach(function (item, index) {
+ context.beginPath()
+ context.moveTo(startX, item)
+ context.lineTo(endX, item)
+ context.stroke()
+ })
+ context.setLineDash([])
+ context.restore()
+}
+
+function drawYAxis(series, opts, config, context) {
+ if (opts.yAxis.disabled === true) {
+ return
+ }
+ var spacingValid = opts.height - opts.area[0] - opts.area[2]
+ var eachSpacing = spacingValid / opts.yAxis.splitNumber
+ var startX = opts.area[3]
+ var endX = opts.width - opts.area[1]
+ var endY = opts.height - opts.area[2]
+ // set YAxis background
+ context.beginPath()
+ context.setFillStyle(opts.background)
+ if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== "left") {
+ context.fillRect(0, 0, startX, endY + 2 * opts.pix)
+ }
+ if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== "right") {
+ context.fillRect(endX, 0, opts.width, endY + 2 * opts.pix)
+ }
+ context.closePath()
+ context.stroke()
+
+ let tStartLeft = opts.area[3]
+ let tStartRight = opts.width - opts.area[1]
+ let tStartCenter = opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2
+ if (opts.yAxis.data) {
+ for (let i = 0; i < opts.yAxis.data.length; i++) {
+ let yData = opts.yAxis.data[i]
+ var points = []
+ if (yData.type === "categories") {
+ for (let i = 0; i <= yData.categories.length; i++) {
+ points.push(opts.area[0] + spacingValid / yData.categories.length / 2 + (spacingValid / yData.categories.length) * i)
+ }
+ } else {
+ for (let i = 0; i <= opts.yAxis.splitNumber; i++) {
+ points.push(opts.area[0] + eachSpacing * i)
+ }
+ }
+ if (yData.disabled !== true) {
+ let rangesFormat = opts.chartData.yAxisData.rangesFormat[i]
+ let yAxisFontSize = yData.fontSize ? yData.fontSize * opts.pix : config.fontSize
+ let yAxisWidth = opts.chartData.yAxisData.yAxisWidth[i]
+ let textAlign = yData.textAlign || "right"
+ //画Y轴刻度及文案
+ rangesFormat.forEach(function (item, index) {
+ var pos = points[index]
+ context.beginPath()
+ context.setFontSize(yAxisFontSize)
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(yData.axisLineColor || "#cccccc")
+ context.setFillStyle(yData.fontColor || opts.fontColor)
+ let tmpstrat = 0
+ let gapwidth = 4 * opts.pix
+ if (yAxisWidth.position == "left") {
+ //画刻度线
+ if (yData.calibration == true) {
+ context.moveTo(tStartLeft, pos)
+ context.lineTo(tStartLeft - 3 * opts.pix, pos)
+ gapwidth += 3 * opts.pix
+ }
+ //画文字
+ switch (textAlign) {
+ case "left":
+ context.setTextAlign("left")
+ tmpstrat = tStartLeft - yAxisWidth.width
+ break
+ case "right":
+ context.setTextAlign("right")
+ tmpstrat = tStartLeft - gapwidth
+ break
+ default:
+ context.setTextAlign("center")
+ tmpstrat = tStartLeft - yAxisWidth.width / 2
+ }
+ context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix)
+ } else if (yAxisWidth.position == "right") {
+ //画刻度线
+ if (yData.calibration == true) {
+ context.moveTo(tStartRight, pos)
+ context.lineTo(tStartRight + 3 * opts.pix, pos)
+ gapwidth += 3 * opts.pix
+ }
+ switch (textAlign) {
+ case "left":
+ context.setTextAlign("left")
+ tmpstrat = tStartRight + gapwidth
+ break
+ case "right":
+ context.setTextAlign("right")
+ tmpstrat = tStartRight + yAxisWidth.width
+ break
+ default:
+ context.setTextAlign("center")
+ tmpstrat = tStartRight + yAxisWidth.width / 2
+ }
+ context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix)
+ } else if (yAxisWidth.position == "center") {
+ //画刻度线
+ if (yData.calibration == true) {
+ context.moveTo(tStartCenter, pos)
+ context.lineTo(tStartCenter - 3 * opts.pix, pos)
+ gapwidth += 3 * opts.pix
+ }
+ //画文字
+ switch (textAlign) {
+ case "left":
+ context.setTextAlign("left")
+ tmpstrat = tStartCenter - yAxisWidth.width
+ break
+ case "right":
+ context.setTextAlign("right")
+ tmpstrat = tStartCenter - gapwidth
+ break
+ default:
+ context.setTextAlign("center")
+ tmpstrat = tStartCenter - yAxisWidth.width / 2
+ }
+ context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix)
+ }
+ context.closePath()
+ context.stroke()
+ context.setTextAlign("left")
+ })
+ //画Y轴轴线
+ if (yData.axisLine !== false) {
+ context.beginPath()
+ context.setStrokeStyle(yData.axisLineColor || "#cccccc")
+ context.setLineWidth(1 * opts.pix)
+ if (yAxisWidth.position == "left") {
+ context.moveTo(tStartLeft, opts.height - opts.area[2])
+ context.lineTo(tStartLeft, opts.area[0])
+ } else if (yAxisWidth.position == "right") {
+ context.moveTo(tStartRight, opts.height - opts.area[2])
+ context.lineTo(tStartRight, opts.area[0])
+ } else if (yAxisWidth.position == "center") {
+ context.moveTo(tStartCenter, opts.height - opts.area[2])
+ context.lineTo(tStartCenter, opts.area[0])
+ }
+ context.stroke()
+ }
+ //画Y轴标题
+ if (opts.yAxis.showTitle) {
+ let titleFontSize = yData.titleFontSize * opts.pix || config.fontSize
+ let title = yData.title
+ context.beginPath()
+ context.setFontSize(titleFontSize)
+ context.setFillStyle(yData.titleFontColor || opts.fontColor)
+ if (yAxisWidth.position == "left") {
+ context.fillText(
+ title,
+ tStartLeft - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0),
+ opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix,
+ )
+ } else if (yAxisWidth.position == "right") {
+ context.fillText(
+ title,
+ tStartRight - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0),
+ opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix,
+ )
+ } else if (yAxisWidth.position == "center") {
+ context.fillText(
+ title,
+ tStartCenter - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0),
+ opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix,
+ )
+ }
+ context.closePath()
+ context.stroke()
+ }
+ if (yAxisWidth.position == "left") {
+ tStartLeft -= yAxisWidth.width + opts.yAxis.padding * opts.pix
+ } else {
+ tStartRight += yAxisWidth.width + opts.yAxis.padding * opts.pix
+ }
+ }
+ }
+ }
+}
+
+function drawLegend(series, opts, config, context, chartData) {
+ if (opts.legend.show === false) {
+ return
+ }
+ let legendData = chartData.legendData
+ let legendList = legendData.points
+ let legendArea = legendData.area
+ let padding = opts.legend.padding * opts.pix
+ let fontSize = opts.legend.fontSize * opts.pix
+ let shapeWidth = 15 * opts.pix
+ let shapeRight = 5 * opts.pix
+ let itemGap = opts.legend.itemGap * opts.pix
+ let lineHeight = Math.max(opts.legend.lineHeight * opts.pix, fontSize)
+ //画背景及边框
+ context.beginPath()
+ context.setLineWidth(opts.legend.borderWidth * opts.pix)
+ context.setStrokeStyle(opts.legend.borderColor)
+ context.setFillStyle(opts.legend.backgroundColor)
+ context.moveTo(legendArea.start.x, legendArea.start.y)
+ context.rect(legendArea.start.x, legendArea.start.y, legendArea.width, legendArea.height)
+ context.closePath()
+ context.fill()
+ context.stroke()
+ legendList.forEach(function (itemList, listIndex) {
+ let width = 0
+ let height = 0
+ width = legendData.widthArr[listIndex]
+ height = legendData.heightArr[listIndex]
+ let startX = 0
+ let startY = 0
+ if (opts.legend.position == "top" || opts.legend.position == "bottom") {
+ switch (opts.legend.float) {
+ case "left":
+ startX = legendArea.start.x + padding
+ break
+ case "right":
+ startX = legendArea.start.x + legendArea.width - width
+ break
+ default:
+ startX = legendArea.start.x + (legendArea.width - width) / 2
+ }
+ startY = legendArea.start.y + padding + listIndex * lineHeight
+ } else {
+ if (listIndex == 0) {
+ width = 0
+ } else {
+ width = legendData.widthArr[listIndex - 1]
+ }
+ startX = legendArea.start.x + padding + width
+ startY = legendArea.start.y + padding + (legendArea.height - height) / 2
+ }
+ context.setFontSize(config.fontSize)
+ for (let i = 0; i < itemList.length; i++) {
+ let item = itemList[i]
+ item.area = [0, 0, 0, 0]
+ item.area[0] = startX
+ item.area[1] = startY
+ item.area[3] = startY + lineHeight
+ context.beginPath()
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(item.show ? item.color : opts.legend.hiddenColor)
+ context.setFillStyle(item.show ? item.color : opts.legend.hiddenColor)
+ switch (item.legendShape) {
+ case "line":
+ context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pix, 15 * opts.pix, 4 * opts.pix)
+ break
+ case "triangle":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix)
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix)
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix)
+ break
+ case "diamond":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix)
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix)
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight)
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix)
+ break
+ case "circle":
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight)
+ context.arc(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight, 5 * opts.pix, 0, 2 * Math.PI)
+ break
+ case "rect":
+ context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix)
+ break
+ case "square":
+ context.moveTo(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix)
+ context.fillRect(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix)
+ break
+ case "none":
+ break
+ default:
+ context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix)
+ context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix)
+ }
+ context.closePath()
+ context.fill()
+ context.stroke()
+ startX += shapeWidth + shapeRight
+ let fontTrans = 0.5 * lineHeight + 0.5 * fontSize - 2
+ const legendText = item.legendText ? item.legendText : item.name
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setFillStyle(item.show ? opts.legend.fontColor : opts.legend.hiddenColor)
+ context.fillText(legendText, startX, startY + fontTrans)
+ context.closePath()
+ context.stroke()
+ if (opts.legend.position == "top" || opts.legend.position == "bottom") {
+ startX += measureText(legendText, fontSize, context) + itemGap
+ item.area[2] = startX
+ } else {
+ item.area[2] = startX + measureText(legendText, fontSize, context) + itemGap
+ startX -= shapeWidth + shapeRight
+ startY += lineHeight
+ }
+ }
+ })
+}
+
+function drawPieDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var pieOption = assign(
+ {},
+ {
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ ringWidth: 30,
+ customRadius: 0,
+ border: false,
+ borderWidth: 2,
+ borderColor: "#FFFFFF",
+ centerColor: "#FFFFFF",
+ linearType: "none",
+ customColor: [],
+ },
+ opts.type == "pie" ? opts.extra.pie : opts.extra.ring,
+ )
+ var centerPosition = {
+ x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
+ y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2,
+ }
+ if (config.pieChartLinePadding == 0) {
+ config.pieChartLinePadding = pieOption.activeRadius * opts.pix
+ }
+
+ var radius = Math.min(
+ (opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_,
+ (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding,
+ )
+ radius = radius < 10 ? 10 : radius
+ if (pieOption.customRadius > 0) {
+ radius = pieOption.customRadius * opts.pix
+ }
+ series = getPieDataPoints(series, radius, process)
+ var activeRadius = pieOption.activeRadius * opts.pix
+ pieOption.customColor = fillCustomColor(pieOption.linearType, pieOption.customColor, series, config)
+ series = series.map(function (eachSeries) {
+ eachSeries._start_ += (pieOption.offsetAngle * Math.PI) / 180
+ return eachSeries
+ })
+ series.forEach(function (eachSeries, seriesIndex) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == seriesIndex) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(eachSeries.color, pieOption.activeOpacity || 0.5))
+ context.moveTo(centerPosition.x, centerPosition.y)
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ eachSeries._radius_ + activeRadius,
+ eachSeries._start_,
+ eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI,
+ )
+ context.closePath()
+ context.fill()
+ }
+ }
+ context.beginPath()
+ context.setLineWidth(pieOption.borderWidth * opts.pix)
+ context.lineJoin = "round"
+ context.setStrokeStyle(pieOption.borderColor)
+ var fillcolor = eachSeries.color
+ if (pieOption.linearType == "custom") {
+ var grd
+ if (context.createCircularGradient) {
+ grd = context.createCircularGradient(centerPosition.x, centerPosition.y, eachSeries._radius_)
+ } else {
+ grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0, centerPosition.x, centerPosition.y, eachSeries._radius_)
+ }
+ grd.addColorStop(0, hexToRgb(pieOption.customColor[eachSeries.linearIndex], 1))
+ grd.addColorStop(1, hexToRgb(eachSeries.color, 1))
+ fillcolor = grd
+ }
+ context.setFillStyle(fillcolor)
+ context.moveTo(centerPosition.x, centerPosition.y)
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ eachSeries._radius_,
+ eachSeries._start_,
+ eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI,
+ )
+ context.closePath()
+ context.fill()
+ if (pieOption.border == true) {
+ context.stroke()
+ }
+ })
+ if (opts.type === "ring") {
+ var innerPieWidth = radius * 0.6
+ if (typeof pieOption.ringWidth === "number" && pieOption.ringWidth > 0) {
+ innerPieWidth = Math.max(0, radius - pieOption.ringWidth * opts.pix)
+ }
+ context.beginPath()
+ context.setFillStyle(pieOption.centerColor)
+ context.moveTo(centerPosition.x, centerPosition.y)
+ context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI)
+ context.closePath()
+ context.fill()
+ }
+ if (opts.dataLabel !== false && process === 1) {
+ drawPieText(series, opts, config, context, radius, centerPosition)
+ }
+ if (process === 1 && opts.type === "ring") {
+ drawRingTitle(opts, config, context, centerPosition)
+ }
+ return {
+ center: centerPosition,
+ radius: radius,
+ series: series,
+ }
+}
+
+function drawRoseDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var roseOption = assign(
+ {},
+ {
+ type: "area",
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ border: false,
+ borderWidth: 2,
+ borderColor: "#FFFFFF",
+ linearType: "none",
+ customColor: [],
+ },
+ opts.extra.rose,
+ )
+ if (config.pieChartLinePadding == 0) {
+ config.pieChartLinePadding = roseOption.activeRadius * opts.pix
+ }
+ var centerPosition = {
+ x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
+ y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2,
+ }
+ var radius = Math.min(
+ (opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_,
+ (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding,
+ )
+ radius = radius < 10 ? 10 : radius
+ var minRadius = roseOption.minRadius || radius * 0.5
+ if (radius < minRadius) {
+ radius = minRadius + 10
+ }
+ series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process)
+ var activeRadius = roseOption.activeRadius * opts.pix
+ roseOption.customColor = fillCustomColor(roseOption.linearType, roseOption.customColor, series, config)
+ series = series.map(function (eachSeries) {
+ eachSeries._start_ += ((roseOption.offsetAngle || 0) * Math.PI) / 180
+ return eachSeries
+ })
+ series.forEach(function (eachSeries, seriesIndex) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == seriesIndex) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(eachSeries.color, roseOption.activeOpacity || 0.5))
+ context.moveTo(centerPosition.x, centerPosition.y)
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ activeRadius + eachSeries._radius_,
+ eachSeries._start_,
+ eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI,
+ )
+ context.closePath()
+ context.fill()
+ }
+ }
+ context.beginPath()
+ context.setLineWidth(roseOption.borderWidth * opts.pix)
+ context.lineJoin = "round"
+ context.setStrokeStyle(roseOption.borderColor)
+ var fillcolor = eachSeries.color
+ if (roseOption.linearType == "custom") {
+ var grd
+ if (context.createCircularGradient) {
+ grd = context.createCircularGradient(centerPosition.x, centerPosition.y, eachSeries._radius_)
+ } else {
+ grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0, centerPosition.x, centerPosition.y, eachSeries._radius_)
+ }
+ grd.addColorStop(0, hexToRgb(roseOption.customColor[eachSeries.linearIndex], 1))
+ grd.addColorStop(1, hexToRgb(eachSeries.color, 1))
+ fillcolor = grd
+ }
+ context.setFillStyle(fillcolor)
+ context.moveTo(centerPosition.x, centerPosition.y)
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ eachSeries._radius_,
+ eachSeries._start_,
+ eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI,
+ )
+ context.closePath()
+ context.fill()
+ if (roseOption.border == true) {
+ context.stroke()
+ }
+ })
+
+ if (opts.dataLabel !== false && process === 1) {
+ drawPieText(series, opts, config, context, radius, centerPosition)
+ }
+ return {
+ center: centerPosition,
+ radius: radius,
+ series: series,
+ }
+}
+
+function drawArcbarDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var arcbarOption = assign(
+ {},
+ {
+ startAngle: 0.75,
+ endAngle: 0.25,
+ type: "default",
+ direction: "cw",
+ lineCap: "round",
+ width: 12,
+ gap: 2,
+ linearType: "none",
+ customColor: [],
+ },
+ opts.extra.arcbar,
+ )
+ series = getArcbarDataPoints(series, arcbarOption, process)
+ var centerPosition
+ if (arcbarOption.centerX || arcbarOption.centerY) {
+ centerPosition = {
+ x: arcbarOption.centerX ? arcbarOption.centerX : opts.width / 2,
+ y: arcbarOption.centerY ? arcbarOption.centerY : opts.height / 2,
+ }
+ } else {
+ centerPosition = {
+ x: opts.width / 2,
+ y: opts.height / 2,
+ }
+ }
+ var radius
+ if (arcbarOption.radius) {
+ radius = arcbarOption.radius
+ } else {
+ radius = Math.min(centerPosition.x, centerPosition.y)
+ radius -= 5 * opts.pix
+ radius -= arcbarOption.width / 2
+ }
+ radius = radius < 10 ? 10 : radius
+ arcbarOption.customColor = fillCustomColor(arcbarOption.linearType, arcbarOption.customColor, series, config)
+
+ for (let i = 0; i < series.length; i++) {
+ let eachSeries = series[i]
+ //背景颜色
+ context.setLineWidth(arcbarOption.width * opts.pix)
+ context.setStrokeStyle(arcbarOption.backgroundColor || "#E9E9E9")
+ context.setLineCap(arcbarOption.lineCap)
+ context.beginPath()
+ if (arcbarOption.type == "default") {
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i,
+ arcbarOption.startAngle * Math.PI,
+ arcbarOption.endAngle * Math.PI,
+ arcbarOption.direction == "ccw",
+ )
+ } else {
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i,
+ 0,
+ 2 * Math.PI,
+ arcbarOption.direction == "ccw",
+ )
+ }
+ context.stroke()
+ //进度条
+ var fillColor = eachSeries.color
+ if (arcbarOption.linearType == "custom") {
+ var grd = context.createLinearGradient(centerPosition.x - radius, centerPosition.y, centerPosition.x + radius, centerPosition.y)
+ grd.addColorStop(1, hexToRgb(arcbarOption.customColor[eachSeries.linearIndex], 1))
+ grd.addColorStop(0, hexToRgb(eachSeries.color, 1))
+ fillColor = grd
+ }
+ context.setLineWidth(arcbarOption.width * opts.pix)
+ context.setStrokeStyle(fillColor)
+ context.setLineCap(arcbarOption.lineCap)
+ context.beginPath()
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i,
+ arcbarOption.startAngle * Math.PI,
+ eachSeries._proportion_ * Math.PI,
+ arcbarOption.direction == "ccw",
+ )
+ context.stroke()
+ }
+ drawRingTitle(opts, config, context, centerPosition)
+ return {
+ center: centerPosition,
+ radius: radius,
+ series: series,
+ }
+}
+
+function drawGaugeDataPoints(categories, series, opts, config, context) {
+ var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1
+ var gaugeOption = assign(
+ {},
+ {
+ type: "default",
+ startAngle: 0.75,
+ endAngle: 0.25,
+ width: 15,
+ labelOffset: 13,
+ splitLine: {
+ fixRadius: 0,
+ splitNumber: 10,
+ width: 15,
+ color: "#FFFFFF",
+ childNumber: 5,
+ childWidth: 5,
+ },
+ pointer: {
+ width: 15,
+ color: "auto",
+ },
+ },
+ opts.extra.gauge,
+ )
+ if (gaugeOption.oldAngle == undefined) {
+ gaugeOption.oldAngle = gaugeOption.startAngle
+ }
+ if (gaugeOption.oldData == undefined) {
+ gaugeOption.oldData = 0
+ }
+ categories = getGaugeAxisPoints(categories, gaugeOption.startAngle, gaugeOption.endAngle)
+ var centerPosition = {
+ x: opts.width / 2,
+ y: opts.height / 2,
+ }
+ var radius = Math.min(centerPosition.x, centerPosition.y)
+ radius -= 5 * opts.pix
+ radius -= gaugeOption.width / 2
+ radius = radius < 10 ? 10 : radius
+ var innerRadius = radius - gaugeOption.width
+ var totalAngle = 0
+ //判断仪表盘的样式：default百度样式，progress新样式
+ if (gaugeOption.type == "progress") {
+ //## 第一步画中心圆形背景和进度条背景
+ //中心圆形背景
+ var pieRadius = radius - gaugeOption.width * 3
+ context.beginPath()
+ let gradient = context.createLinearGradient(
+ centerPosition.x,
+ centerPosition.y - pieRadius,
+ centerPosition.x,
+ centerPosition.y + pieRadius,
+ )
+ //配置渐变填充（起点：中心点向上减半径；结束点中心点向下加半径）
+ gradient.addColorStop("0", hexToRgb(series[0].color, 0.3))
+ gradient.addColorStop("1.0", hexToRgb("#FFFFFF", 0.1))
+ context.setFillStyle(gradient)
+ context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2 * Math.PI, false)
+ context.fill()
+ //画进度条背景
+ context.setLineWidth(gaugeOption.width)
+ context.setStrokeStyle(hexToRgb(series[0].color, 0.3))
+ context.setLineCap("round")
+ context.beginPath()
+ context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, gaugeOption.endAngle * Math.PI, false)
+ context.stroke()
+ //## 第二步画刻度线
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle
+ }
+ let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber
+ let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber
+ let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius
+ let endX = -radius - gaugeOption.width - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width
+ context.save()
+ context.translate(centerPosition.x, centerPosition.y)
+ context.rotate((gaugeOption.startAngle - 1) * Math.PI)
+ let len = gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1
+ let proc = series[0].data * process
+ for (let i = 0; i < len; i++) {
+ context.beginPath()
+ //刻度线随进度变色
+ if (proc > i / len) {
+ context.setStrokeStyle(hexToRgb(series[0].color, 1))
+ } else {
+ context.setStrokeStyle(hexToRgb(series[0].color, 0.3))
+ }
+ context.setLineWidth(3 * opts.pix)
+ context.moveTo(startX, 0)
+ context.lineTo(endX, 0)
+ context.stroke()
+ context.rotate(childAngle * Math.PI)
+ }
+ context.restore()
+ //## 第三步画进度条
+ series = getGaugeArcbarDataPoints(series, gaugeOption, process)
+ context.setLineWidth(gaugeOption.width)
+ context.setStrokeStyle(series[0].color)
+ context.setLineCap("round")
+ context.beginPath()
+ context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, series[0]._proportion_ * Math.PI, false)
+ context.stroke()
+ //## 第四步画指针
+ let pointerRadius = radius - gaugeOption.width * 2.5
+ context.save()
+ context.translate(centerPosition.x, centerPosition.y)
+ context.rotate((series[0]._proportion_ - 1) * Math.PI)
+ context.beginPath()
+ context.setLineWidth(gaugeOption.width / 3)
+ let gradient3 = context.createLinearGradient(0, -pointerRadius * 0.6, 0, pointerRadius * 0.6)
+ gradient3.addColorStop("0", hexToRgb("#FFFFFF", 0))
+ gradient3.addColorStop("0.5", hexToRgb(series[0].color, 1))
+ gradient3.addColorStop("1.0", hexToRgb("#FFFFFF", 0))
+ context.setStrokeStyle(gradient3)
+ context.arc(0, 0, pointerRadius, 0.85 * Math.PI, 1.15 * Math.PI, false)
+ context.stroke()
+ context.beginPath()
+ context.setLineWidth(1)
+ context.setStrokeStyle(series[0].color)
+ context.setFillStyle(series[0].color)
+ context.moveTo(-pointerRadius - gaugeOption.width / 3 / 2, -4)
+ context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2 - 4, 0)
+ context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, 4)
+ context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, -4)
+ context.stroke()
+ context.fill()
+ context.restore()
+ //default百度样式
+ } else {
+ //画背景
+ context.setLineWidth(gaugeOption.width)
+ context.setLineCap("butt")
+ for (let i = 0; i < categories.length; i++) {
+ let eachCategories = categories[i]
+ context.beginPath()
+ context.setStrokeStyle(eachCategories.color)
+ context.arc(
+ centerPosition.x,
+ centerPosition.y,
+ radius,
+ eachCategories._startAngle_ * Math.PI,
+ eachCategories._endAngle_ * Math.PI,
+ false,
+ )
+ context.stroke()
+ }
+ context.save()
+ //画刻度线
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle
+ }
+ let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber
+ let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber
+ let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius
+ let endX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width
+ let childendX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.childWidth
+ context.translate(centerPosition.x, centerPosition.y)
+ context.rotate((gaugeOption.startAngle - 1) * Math.PI)
+ for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
+ context.beginPath()
+ context.setStrokeStyle(gaugeOption.splitLine.color)
+ context.setLineWidth(2 * opts.pix)
+ context.moveTo(startX, 0)
+ context.lineTo(endX, 0)
+ context.stroke()
+ context.rotate(splitAngle * Math.PI)
+ }
+ context.restore()
+ context.save()
+ context.translate(centerPosition.x, centerPosition.y)
+ context.rotate((gaugeOption.startAngle - 1) * Math.PI)
+ for (let i = 0; i < gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1; i++) {
+ context.beginPath()
+ context.setStrokeStyle(gaugeOption.splitLine.color)
+ context.setLineWidth(1 * opts.pix)
+ context.moveTo(startX, 0)
+ context.lineTo(childendX, 0)
+ context.stroke()
+ context.rotate(childAngle * Math.PI)
+ }
+ context.restore()
+ //画指针
+ series = getGaugeDataPoints(series, categories, gaugeOption, process)
+ for (let i = 0; i < series.length; i++) {
+ let eachSeries = series[i]
+ context.save()
+ context.translate(centerPosition.x, centerPosition.y)
+ context.rotate((eachSeries._proportion_ - 1) * Math.PI)
+ context.beginPath()
+ context.setFillStyle(eachSeries.color)
+ context.moveTo(gaugeOption.pointer.width, 0)
+ context.lineTo(0, -gaugeOption.pointer.width / 2)
+ context.lineTo(-innerRadius, 0)
+ context.lineTo(0, gaugeOption.pointer.width / 2)
+ context.lineTo(gaugeOption.pointer.width, 0)
+ context.closePath()
+ context.fill()
+ context.beginPath()
+ context.setFillStyle("#FFFFFF")
+ context.arc(0, 0, gaugeOption.pointer.width / 6, 0, 2 * Math.PI, false)
+ context.fill()
+ context.restore()
+ }
+ if (opts.dataLabel !== false) {
+ drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context)
+ }
+ }
+ //画仪表盘标题，副标题
+ drawRingTitle(opts, config, context, centerPosition)
+ if (process === 1 && opts.type === "gauge") {
+ opts.extra.gauge.oldAngle = series[0]._proportion_
+ opts.extra.gauge.oldData = series[0].data
+ }
+ return {
+ center: centerPosition,
+ radius: radius,
+ innerRadius: innerRadius,
+ categories: categories,
+ totalAngle: totalAngle,
+ }
+}
+
+function drawRadarDataPoints(series, opts, config, context) {
+ var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ var radarOption = assign(
+ {},
+ {
+ gridColor: "#cccccc",
+ gridType: "radar",
+ gridEval: 1,
+ axisLabel: false,
+ axisLabelTofix: 0,
+ labelShow: true,
+ labelColor: "#666666",
+ labelPointShow: false,
+ labelPointRadius: 3,
+ labelPointColor: "#cccccc",
+ opacity: 0.2,
+ gridCount: 3,
+ border: false,
+ borderWidth: 2,
+ linearType: "none",
+ customColor: [],
+ },
+ opts.extra.radar,
+ )
+ var coordinateAngle = getRadarCoordinateSeries(opts.categories.length)
+ var centerPosition = {
+ x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
+ y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2,
+ }
+ var xr = (opts.width - opts.area[1] - opts.area[3]) / 2
+ var yr = (opts.height - opts.area[0] - opts.area[2]) / 2
+ var radius = Math.min(
+ xr - (getMaxTextListLength(opts.categories, config.fontSize, context) + config.radarLabelTextMargin),
+ yr - config.radarLabelTextMargin,
+ )
+ radius -= config.radarLabelTextMargin * opts.pix
+ radius = radius < 10 ? 10 : radius
+ radius = radarOption.radius ? radarOption.radius : radius
+ // 画分割线
+ context.beginPath()
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(radarOption.gridColor)
+ coordinateAngle.forEach(function (angle, index) {
+ var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition)
+ context.moveTo(centerPosition.x, centerPosition.y)
+ if (index % radarOption.gridEval == 0) {
+ context.lineTo(pos.x, pos.y)
+ }
+ })
+ context.stroke()
+ context.closePath()
+
+ // 画背景网格
+ var _loop = function _loop(i) {
+ var startPos = {}
+ context.beginPath()
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(radarOption.gridColor)
+ if (radarOption.gridType == "radar") {
+ coordinateAngle.forEach(function (angle, index) {
+ var pos = convertCoordinateOrigin(
+ (radius / radarOption.gridCount) * i * Math.cos(angle),
+ (radius / radarOption.gridCount) * i * Math.sin(angle),
+ centerPosition,
+ )
+ if (index === 0) {
+ startPos = pos
+ context.moveTo(pos.x, pos.y)
+ } else {
+ context.lineTo(pos.x, pos.y)
+ }
+ })
+ context.lineTo(startPos.x, startPos.y)
+ } else {
+ var pos = convertCoordinateOrigin(
+ (radius / radarOption.gridCount) * i * Math.cos(1.5),
+ (radius / radarOption.gridCount) * i * Math.sin(1.5),
+ centerPosition,
+ )
+ context.arc(centerPosition.x, centerPosition.y, centerPosition.y - pos.y, 0, 2 * Math.PI, false)
+ }
+ context.stroke()
+ context.closePath()
+ }
+ for (var i = 1; i <= radarOption.gridCount; i++) {
+ _loop(i)
+ }
+ radarOption.customColor = fillCustomColor(radarOption.linearType, radarOption.customColor, series, config)
+ var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process)
+ radarDataPoints.forEach(function (eachSeries, seriesIndex) {
+ // 绘制区域数据
+ context.beginPath()
+ context.setLineWidth(radarOption.borderWidth * opts.pix)
+ context.setStrokeStyle(eachSeries.color)
+
+ var fillcolor = hexToRgb(eachSeries.color, radarOption.opacity)
+ if (radarOption.linearType == "custom") {
+ var grd
+ if (context.createCircularGradient) {
+ grd = context.createCircularGradient(centerPosition.x, centerPosition.y, radius)
+ } else {
+ grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0, centerPosition.x, centerPosition.y, radius)
+ }
+ grd.addColorStop(0, hexToRgb(radarOption.customColor[series[seriesIndex].linearIndex], radarOption.opacity))
+ grd.addColorStop(1, hexToRgb(eachSeries.color, radarOption.opacity))
+ fillcolor = grd
+ }
+
+ context.setFillStyle(fillcolor)
+ eachSeries.data.forEach(function (item, index) {
+ if (index === 0) {
+ context.moveTo(item.position.x, item.position.y)
+ } else {
+ context.lineTo(item.position.x, item.position.y)
+ }
+ })
+ context.closePath()
+ context.fill()
+ if (radarOption.border === true) {
+ context.stroke()
+ }
+ context.closePath()
+ if (opts.dataPointShape !== false) {
+ var points = eachSeries.data.map(function (item) {
+ return item.position
+ })
+ drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts)
+ }
+ })
+ // 画刻度值
+ if (radarOption.axisLabel === true) {
+ const maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)))
+ const stepLength = radius / radarOption.gridCount
+ const fontSize = opts.fontSize * opts.pix
+ context.setFontSize(fontSize)
+ context.setFillStyle(opts.fontColor)
+ context.setTextAlign("left")
+ for (var i = 0; i < radarOption.gridCount + 1; i++) {
+ let label = (i * maxData) / radarOption.gridCount
+ label = label.toFixed(radarOption.axisLabelTofix)
+ context.fillText(String(label), centerPosition.x + 3 * opts.pix, centerPosition.y - i * stepLength + fontSize / 2)
+ }
+ }
+
+ // draw label text
+ drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context)
+
+ // draw dataLabel
+ if (opts.dataLabel !== false && process === 1) {
+ radarDataPoints.forEach(function (eachSeries, seriesIndex) {
+ context.beginPath()
+ var fontSize = eachSeries.textSize * opts.pix || config.fontSize
+ context.setFontSize(fontSize)
+ context.setFillStyle(eachSeries.textColor || opts.fontColor)
+ eachSeries.data.forEach(function (item, index) {
+ //如果是中心点垂直的上下点位
+ if (Math.abs(item.position.x - centerPosition.x) < 2) {
+ //如果在上面
+ if (item.position.y < centerPosition.y) {
+ context.setTextAlign("center")
+ context.fillText(item.value, item.position.x, item.position.y - 4)
+ } else {
+ context.setTextAlign("center")
+ context.fillText(item.value, item.position.x, item.position.y + fontSize + 2)
+ }
+ } else {
+ //如果在左侧
+ if (item.position.x < centerPosition.x) {
+ context.setTextAlign("right")
+ context.fillText(item.value, item.position.x - 4, item.position.y + fontSize / 2 - 2)
+ } else {
+ context.setTextAlign("left")
+ context.fillText(item.value, item.position.x + 4, item.position.y + fontSize / 2 - 2)
+ }
+ }
+ })
+ context.closePath()
+ context.stroke()
+ })
+ context.setTextAlign("left")
+ }
+
+ return {
+ center: centerPosition,
+ radius: radius,
+ angleList: coordinateAngle,
+ }
+}
+
+// 经纬度转墨卡托
+function lonlat2mercator(longitude, latitude) {
+ var mercator = Array(2)
+ var x = (longitude * 20037508.34) / 180
+ var y = Math.log(Math.tan(((90 + latitude) * Math.PI) / 360)) / (Math.PI / 180)
+ y = (y * 20037508.34) / 180
+ mercator[0] = x
+ mercator[1] = y
+ return mercator
+}
+
+// 墨卡托转经纬度
+function mercator2lonlat(longitude, latitude) {
+ var lonlat = Array(2)
+ var x = (longitude / 20037508.34) * 180
+ var y = (latitude / 20037508.34) * 180
+ y = (180 / Math.PI) * (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2)
+ lonlat[0] = x
+ lonlat[1] = y
+ return lonlat
+}
+
+function getBoundingBox(data) {
+ var bounds = {},
+ coords
+ bounds.xMin = 180
+ bounds.xMax = 0
+ bounds.yMin = 90
+ bounds.yMax = 0
+ for (var i = 0; i < data.length; i++) {
+ var coorda = data[i].geometry.coordinates
+ for (var k = 0; k < coorda.length; k++) {
+ coords = coorda[k]
+ if (coords.length == 1) {
+ coords = coords[0]
+ }
+ for (var j = 0; j < coords.length; j++) {
+ var longitude = coords[j][0]
+ var latitude = coords[j][1]
+ var point = {
+ x: longitude,
+ y: latitude,
+ }
+ bounds.xMin = bounds.xMin < point.x ? bounds.xMin : point.x
+ bounds.xMax = bounds.xMax > point.x ? bounds.xMax : point.x
+ bounds.yMin = bounds.yMin < point.y ? bounds.yMin : point.y
+ bounds.yMax = bounds.yMax > point.y ? bounds.yMax : point.y
+ }
+ }
+ }
+ return bounds
+}
+
+function coordinateToPoint(latitude, longitude, bounds, scale, xoffset, yoffset) {
+ return {
+ x: (longitude - bounds.xMin) * scale + xoffset,
+ y: (bounds.yMax - latitude) * scale + yoffset,
+ }
+}
+
+function pointToCoordinate(pointY, pointX, bounds, scale, xoffset, yoffset) {
+ return {
+ x: (pointX - xoffset) / scale + bounds.xMin,
+ y: bounds.yMax - (pointY - yoffset) / scale,
+ }
+}
+
+function isRayIntersectsSegment(poi, s_poi, e_poi) {
+ if (s_poi[1] == e_poi[1]) {
+ return false
+ }
+ if (s_poi[1] > poi[1] && e_poi[1] > poi[1]) {
+ return false
+ }
+ if (s_poi[1] < poi[1] && e_poi[1] < poi[1]) {
+ return false
+ }
+ if (s_poi[1] == poi[1] && e_poi[1] > poi[1]) {
+ return false
+ }
+ if (e_poi[1] == poi[1] && s_poi[1] > poi[1]) {
+ return false
+ }
+ if (s_poi[0] < poi[0] && e_poi[1] < poi[1]) {
+ return false
+ }
+ let xseg = e_poi[0] - ((e_poi[0] - s_poi[0]) * (e_poi[1] - poi[1])) / (e_poi[1] - s_poi[1])
+ if (xseg < poi[0]) {
+ return false
+ } else {
+ return true
+ }
+}
+
+function isPoiWithinPoly(poi, poly, mercator) {
+ let sinsc = 0
+ for (let i = 0; i < poly.length; i++) {
+ let epoly = poly[i][0]
+ if (poly.length == 1) {
+ epoly = poly[i][0]
+ }
+ for (let j = 0; j < epoly.length - 1; j++) {
+ let s_poi = epoly[j]
+ let e_poi = epoly[j + 1]
+ if (mercator) {
+ s_poi = lonlat2mercator(epoly[j][0], epoly[j][1])
+ e_poi = lonlat2mercator(epoly[j + 1][0], epoly[j + 1][1])
+ }
+ if (isRayIntersectsSegment(poi, s_poi, e_poi)) {
+ sinsc += 1
+ }
+ }
+ }
+ if (sinsc % 2 == 1) {
+ return true
+ } else {
+ return false
+ }
+}
+
+function drawMapDataPoints(series, opts, config, context) {
+ var mapOption = assign(
+ {},
+ {
+ border: true,
+ mercator: false,
+ borderWidth: 1,
+ active: true,
+ borderColor: "#666666",
+ fillOpacity: 0.6,
+ activeBorderColor: "#f04864",
+ activeFillColor: "#facc14",
+ activeFillOpacity: 1,
+ },
+ opts.extra.map,
+ )
+ var coords, point
+ var data = series
+ var bounds = getBoundingBox(data)
+ if (mapOption.mercator) {
+ var max = lonlat2mercator(bounds.xMax, bounds.yMax)
+ var min = lonlat2mercator(bounds.xMin, bounds.yMin)
+ bounds.xMax = max[0]
+ bounds.yMax = max[1]
+ bounds.xMin = min[0]
+ bounds.yMin = min[1]
+ }
+ var xScale = opts.width / Math.abs(bounds.xMax - bounds.xMin)
+ var yScale = opts.height / Math.abs(bounds.yMax - bounds.yMin)
+ var scale = xScale < yScale ? xScale : yScale
+ var xoffset = opts.width / 2 - (Math.abs(bounds.xMax - bounds.xMin) / 2) * scale
+ var yoffset = opts.height / 2 - (Math.abs(bounds.yMax - bounds.yMin) / 2) * scale
+ for (var i = 0; i < data.length; i++) {
+ context.beginPath()
+ context.setLineWidth(mapOption.borderWidth * opts.pix)
+ context.setStrokeStyle(mapOption.borderColor)
+ context.setFillStyle(hexToRgb(series[i].color, series[i].fillOpacity || mapOption.fillOpacity))
+ if (mapOption.active == true && opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.setStrokeStyle(mapOption.activeBorderColor)
+ context.setFillStyle(hexToRgb(mapOption.activeFillColor, mapOption.activeFillOpacity))
+ }
+ }
+ var coorda = data[i].geometry.coordinates
+ for (var k = 0; k < coorda.length; k++) {
+ coords = coorda[k]
+ if (coords.length == 1) {
+ coords = coords[0]
+ }
+ for (var j = 0; j < coords.length; j++) {
+ var gaosi = Array(2)
+ if (mapOption.mercator) {
+ gaosi = lonlat2mercator(coords[j][0], coords[j][1])
+ } else {
+ gaosi = coords[j]
+ }
+ point = coordinateToPoint(gaosi[1], gaosi[0], bounds, scale, xoffset, yoffset)
+ if (j === 0) {
+ context.beginPath()
+ context.moveTo(point.x, point.y)
+ } else {
+ context.lineTo(point.x, point.y)
+ }
+ }
+ context.fill()
+ if (mapOption.border == true) {
+ context.stroke()
+ }
+ }
+ }
+ if (opts.dataLabel == true) {
+ for (var i = 0; i < data.length; i++) {
+ var centerPoint = data[i].properties.centroid
+ if (centerPoint) {
+ if (mapOption.mercator) {
+ centerPoint = lonlat2mercator(data[i].properties.centroid[0], data[i].properties.centroid[1])
+ }
+ point = coordinateToPoint(centerPoint[1], centerPoint[0], bounds, scale, xoffset, yoffset)
+ let fontSize = data[i].textSize * opts.pix || config.fontSize
+ let fontColor = data[i].textColor || opts.fontColor
+ if (mapOption.active && mapOption.activeTextColor && opts.tooltip && opts.tooltip.index == i) {
+ fontColor = mapOption.activeTextColor
+ }
+ let text = data[i].properties.name
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setFillStyle(fontColor)
+ context.fillText(text, point.x - measureText(text, fontSize, context) / 2, point.y + fontSize / 2)
+ context.closePath()
+ context.stroke()
+ }
+ }
+ }
+ opts.chartData.mapData = {
+ bounds: bounds,
+ scale: scale,
+ xoffset: xoffset,
+ yoffset: yoffset,
+ mercator: mapOption.mercator,
+ }
+ drawToolTipBridge(opts, config, context, 1)
+ context.draw()
+}
+
+function normalInt(min, max, iter) {
+ iter = iter == 0 ? 1 : iter
+ var arr = []
+ for (var i = 0; i < iter; i++) {
+ arr[i] = Math.random()
+ }
+ return (
+ Math.floor(
+ (arr.reduce(function (i, j) {
+ return i + j
+ }) /
+ iter) *
+ (max - min),
+ ) + min
+ )
+}
+
+function collisionNew(area, points, width, height) {
+ var isIn = false
+ for (let i = 0; i < points.length; i++) {
+ if (points[i].area) {
+ if (area[3] < points[i].area[1] || area[0] > points[i].area[2] || area[1] > points[i].area[3] || area[2] < points[i].area[0]) {
+ if (area[0] < 0 || area[1] < 0 || area[2] > width || area[3] > height) {
+ isIn = true
+ break
+ } else {
+ isIn = false
+ }
+ } else {
+ isIn = true
+ break
+ }
+ }
+ }
+ return isIn
+}
+
+function getWordCloudPoint(opts, type, context) {
+ let points = opts.series
+ switch (type) {
+ case "normal":
+ for (let i = 0; i < points.length; i++) {
+ let text = points[i].name
+ let tHeight = points[i].textSize * opts.pix
+ let tWidth = measureText(text, tHeight, context)
+ let x, y
+ let area
+ let breaknum = 0
+ while (true) {
+ breaknum++
+ x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2
+ y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2
+ area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width / 2, y + 5 + opts.height / 2]
+ let isCollision = collisionNew(area, points, opts.width, opts.height)
+ if (!isCollision) break
+ if (breaknum == 1000) {
+ area = [-100, -100, -100, -100]
+ break
+ }
+ }
+ points[i].area = area
+ }
+ break
+ case "vertical":
+ function Spin() {
+ //获取均匀随机值，是否旋转，旋转的概率为（1-0.5）
+ if (Math.random() > 0.7) {
+ return true
+ } else {
+ return false
+ }
+ }
+ for (let i = 0; i < points.length; i++) {
+ let text = points[i].name
+ let tHeight = points[i].textSize * opts.pix
+ let tWidth = measureText(text, tHeight, context)
+ let isSpin = Spin()
+ let x, y, area, areav
+ let breaknum = 0
+ while (true) {
+ breaknum++
+ let isCollision
+ if (isSpin) {
+ x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2
+ y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2
+ area = [y - 5 - tWidth + opts.width / 2, -x - 5 + opts.height / 2, y + 5 + opts.width / 2, -x + tHeight + 5 + opts.height / 2]
+ areav = [
+ opts.width - (opts.width / 2 - opts.height / 2) - (-x + tHeight + 5 + opts.height / 2) - 5,
+ opts.height / 2 - opts.width / 2 + (y - 5 - tWidth + opts.width / 2) - 5,
+ opts.width - (opts.width / 2 - opts.height / 2) - (-x + tHeight + 5 + opts.height / 2) + tHeight,
+ opts.height / 2 - opts.width / 2 + (y - 5 - tWidth + opts.width / 2) + tWidth + 5,
+ ]
+ isCollision = collisionNew(areav, points, opts.height, opts.width)
+ } else {
+ x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2
+ y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2
+ area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width / 2, y + 5 + opts.height / 2]
+ isCollision = collisionNew(area, points, opts.width, opts.height)
+ }
+ if (!isCollision) break
+ if (breaknum == 1000) {
+ area = [-1000, -1000, -1000, -1000]
+ break
+ }
+ }
+ if (isSpin) {
+ points[i].area = areav
+ points[i].areav = area
+ } else {
+ points[i].area = area
+ }
+ points[i].rotate = isSpin
+ }
+ break
+ }
+ return points
+}
+
+function drawWordCloudDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let wordOption = assign(
+ {},
+ {
+ type: "normal",
+ autoColors: true,
+ },
+ opts.extra.word,
+ )
+ if (!opts.chartData.wordCloudData) {
+ opts.chartData.wordCloudData = getWordCloudPoint(opts, wordOption.type, context)
+ }
+ context.beginPath()
+ context.setFillStyle(opts.background)
+ context.rect(0, 0, opts.width, opts.height)
+ context.fill()
+ context.save()
+ let points = opts.chartData.wordCloudData
+ context.translate(opts.width / 2, opts.height / 2)
+ for (let i = 0; i < points.length; i++) {
+ context.save()
+ if (points[i].rotate) {
+ context.rotate((90 * Math.PI) / 180)
+ }
+ let text = points[i].name
+ let tHeight = points[i].textSize * opts.pix
+ let tWidth = measureText(text, tHeight, context)
+ context.beginPath()
+ context.setStrokeStyle(points[i].color)
+ context.setFillStyle(points[i].color)
+ context.setFontSize(tHeight)
+ if (points[i].rotate) {
+ if (points[i].areav[0] > 0) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.strokeText(
+ text,
+ (points[i].areav[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ } else {
+ context.fillText(
+ text,
+ (points[i].areav[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ }
+ } else {
+ context.fillText(
+ text,
+ (points[i].areav[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ }
+ }
+ } else {
+ if (points[i].area[0] > 0) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.strokeText(
+ text,
+ (points[i].area[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].area[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ } else {
+ context.fillText(
+ text,
+ (points[i].area[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].area[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ }
+ } else {
+ context.fillText(
+ text,
+ (points[i].area[0] + 5 - opts.width / 2) * process - (tWidth * (1 - process)) / 2,
+ (points[i].area[1] + 5 + tHeight - opts.height / 2) * process,
+ )
+ }
+ }
+ }
+ context.stroke()
+ context.restore()
+ }
+ context.restore()
+}
+
+function drawFunnelDataPoints(series, opts, config, context) {
+ let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1
+ let funnelOption = assign(
+ {},
+ {
+ type: "funnel",
+ activeWidth: 10,
+ activeOpacity: 0.3,
+ border: false,
+ borderWidth: 2,
+ borderColor: "#FFFFFF",
+ fillOpacity: 1,
+ minSize: 0,
+ labelAlign: "right",
+ linearType: "none",
+ customColor: [],
+ },
+ opts.extra.funnel,
+ )
+ let eachSpacing = (opts.height - opts.area[0] - opts.area[2]) / series.length
+ let centerPosition = {
+ x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
+ y: opts.height - opts.area[2],
+ }
+ let activeWidth = funnelOption.activeWidth * opts.pix
+ let radius = Math.min(
+ (opts.width - opts.area[1] - opts.area[3]) / 2 - activeWidth,
+ (opts.height - opts.area[0] - opts.area[2]) / 2 - activeWidth,
+ )
+ let seriesNew = getFunnelDataPoints(series, radius, funnelOption, eachSpacing, process)
+ context.save()
+ context.translate(centerPosition.x, centerPosition.y)
+ funnelOption.customColor = fillCustomColor(funnelOption.linearType, funnelOption.customColor, series, config)
+ if (funnelOption.type == "pyramid") {
+ for (let i = 0; i < seriesNew.length; i++) {
+ if (i == seriesNew.length - 1) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity))
+ context.moveTo(-activeWidth, -eachSpacing)
+ context.lineTo(-seriesNew[i].radius - activeWidth, 0)
+ context.lineTo(seriesNew[i].radius + activeWidth, 0)
+ context.lineTo(activeWidth, -eachSpacing)
+ context.lineTo(-activeWidth, -eachSpacing)
+ context.closePath()
+ context.fill()
+ }
+ }
+ seriesNew[i].funnelArea = [
+ centerPosition.x - seriesNew[i].radius,
+ centerPosition.y - eachSpacing * (i + 1),
+ centerPosition.x + seriesNew[i].radius,
+ centerPosition.y - eachSpacing * i,
+ ]
+ context.beginPath()
+ context.setLineWidth(funnelOption.borderWidth * opts.pix)
+ context.setStrokeStyle(funnelOption.borderColor)
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity)
+ if (funnelOption.linearType == "custom") {
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing)
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity))
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ fillColor = grd
+ }
+ context.setFillStyle(fillColor)
+ context.moveTo(0, -eachSpacing)
+ context.lineTo(-seriesNew[i].radius, 0)
+ context.lineTo(seriesNew[i].radius, 0)
+ context.lineTo(0, -eachSpacing)
+ context.closePath()
+ context.fill()
+ if (funnelOption.border == true) {
+ context.stroke()
+ }
+ } else {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity))
+ context.moveTo(0, 0)
+ context.lineTo(-seriesNew[i].radius - activeWidth, 0)
+ context.lineTo(-seriesNew[i + 1].radius - activeWidth, -eachSpacing)
+ context.lineTo(seriesNew[i + 1].radius + activeWidth, -eachSpacing)
+ context.lineTo(seriesNew[i].radius + activeWidth, 0)
+ context.lineTo(0, 0)
+ context.closePath()
+ context.fill()
+ }
+ }
+ seriesNew[i].funnelArea = [
+ centerPosition.x - seriesNew[i].radius,
+ centerPosition.y - eachSpacing * (i + 1),
+ centerPosition.x + seriesNew[i].radius,
+ centerPosition.y - eachSpacing * i,
+ ]
+ context.beginPath()
+ context.setLineWidth(funnelOption.borderWidth * opts.pix)
+ context.setStrokeStyle(funnelOption.borderColor)
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity)
+ if (funnelOption.linearType == "custom") {
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing)
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity))
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ fillColor = grd
+ }
+ context.setFillStyle(fillColor)
+ context.moveTo(0, 0)
+ context.lineTo(-seriesNew[i].radius, 0)
+ context.lineTo(-seriesNew[i + 1].radius, -eachSpacing)
+ context.lineTo(seriesNew[i + 1].radius, -eachSpacing)
+ context.lineTo(seriesNew[i].radius, 0)
+ context.lineTo(0, 0)
+ context.closePath()
+ context.fill()
+ if (funnelOption.border == true) {
+ context.stroke()
+ }
+ }
+ context.translate(0, -eachSpacing)
+ }
+ } else {
+ context.translate(0, -(seriesNew.length - 1) * eachSpacing)
+ for (let i = 0; i < seriesNew.length; i++) {
+ if (i == seriesNew.length - 1) {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity))
+ context.moveTo(-activeWidth - funnelOption.minSize / 2, 0)
+ context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing)
+ context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing)
+ context.lineTo(activeWidth + funnelOption.minSize / 2, 0)
+ context.lineTo(-activeWidth - funnelOption.minSize / 2, 0)
+ context.closePath()
+ context.fill()
+ }
+ }
+ seriesNew[i].funnelArea = [
+ centerPosition.x - seriesNew[i].radius,
+ centerPosition.y - eachSpacing,
+ centerPosition.x + seriesNew[i].radius,
+ centerPosition.y,
+ ]
+ context.beginPath()
+ context.setLineWidth(funnelOption.borderWidth * opts.pix)
+ context.setStrokeStyle(funnelOption.borderColor)
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity)
+ if (funnelOption.linearType == "custom") {
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing)
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity))
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ fillColor = grd
+ }
+ context.setFillStyle(fillColor)
+ context.moveTo(0, 0)
+ context.lineTo(-funnelOption.minSize / 2, 0)
+ context.lineTo(-seriesNew[i].radius, -eachSpacing)
+ context.lineTo(seriesNew[i].radius, -eachSpacing)
+ context.lineTo(funnelOption.minSize / 2, 0)
+ context.lineTo(0, 0)
+ context.closePath()
+ context.fill()
+ if (funnelOption.border == true) {
+ context.stroke()
+ }
+ } else {
+ if (opts.tooltip) {
+ if (opts.tooltip.index == i) {
+ context.beginPath()
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity))
+ context.moveTo(0, 0)
+ context.lineTo(-seriesNew[i + 1].radius - activeWidth, 0)
+ context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing)
+ context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing)
+ context.lineTo(seriesNew[i + 1].radius + activeWidth, 0)
+ context.lineTo(0, 0)
+ context.closePath()
+ context.fill()
+ }
+ }
+ seriesNew[i].funnelArea = [
+ centerPosition.x - seriesNew[i].radius,
+ centerPosition.y - eachSpacing * (seriesNew.length - i),
+ centerPosition.x + seriesNew[i].radius,
+ centerPosition.y - eachSpacing * (seriesNew.length - i - 1),
+ ]
+ context.beginPath()
+ context.setLineWidth(funnelOption.borderWidth * opts.pix)
+ context.setStrokeStyle(funnelOption.borderColor)
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity)
+ if (funnelOption.linearType == "custom") {
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing)
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity))
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity))
+ fillColor = grd
+ }
+ context.setFillStyle(fillColor)
+ context.moveTo(0, 0)
+ context.lineTo(-seriesNew[i + 1].radius, 0)
+ context.lineTo(-seriesNew[i].radius, -eachSpacing)
+ context.lineTo(seriesNew[i].radius, -eachSpacing)
+ context.lineTo(seriesNew[i + 1].radius, 0)
+ context.lineTo(0, 0)
+ context.closePath()
+ context.fill()
+ if (funnelOption.border == true) {
+ context.stroke()
+ }
+ }
+ context.translate(0, eachSpacing)
+ }
+ }
+
+ context.restore()
+ if (opts.dataLabel !== false && process === 1) {
+ drawFunnelText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition)
+ }
+ if (process === 1) {
+ drawFunnelCenterText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition)
+ }
+ return {
+ center: centerPosition,
+ radius: radius,
+ series: seriesNew,
+ }
+}
+
+function drawFunnelText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ if (item.labelShow === false) {
+ continue
+ }
+ let startX, endX, startY, fontSize
+ let text = item.formatter ? item.formatter(item, i, series, opts) : util.toFixed(item._proportion_ * 100) + "%"
+ text = item.labelText ? item.labelText : text
+ if (labelAlign == "right") {
+ if (i == series.length - 1) {
+ startX = (item.funnelArea[2] + centerPosition.x) / 2
+ } else {
+ startX = (item.funnelArea[2] + series[i + 1].funnelArea[2]) / 2
+ }
+ endX = startX + activeWidth * 2
+ startY = item.funnelArea[1] + eachSpacing / 2
+ fontSize = item.textSize * opts.pix || opts.fontSize * opts.pix
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(item.color)
+ context.setFillStyle(item.color)
+ context.beginPath()
+ context.moveTo(startX, startY)
+ context.lineTo(endX, startY)
+ context.stroke()
+ context.closePath()
+ context.beginPath()
+ context.moveTo(endX, startY)
+ context.arc(endX, startY, 2 * opts.pix, 0, 2 * Math.PI)
+ context.closePath()
+ context.fill()
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setFillStyle(item.textColor || opts.fontColor)
+ context.fillText(text, endX + 5, startY + fontSize / 2 - 2)
+ context.closePath()
+ context.stroke()
+ context.closePath()
+ }
+ if (labelAlign == "left") {
+ if (i == series.length - 1) {
+ startX = (item.funnelArea[0] + centerPosition.x) / 2
+ } else {
+ startX = (item.funnelArea[0] + series[i + 1].funnelArea[0]) / 2
+ }
+ endX = startX - activeWidth * 2
+ startY = item.funnelArea[1] + eachSpacing / 2
+ fontSize = item.textSize * opts.pix || opts.fontSize * opts.pix
+ context.setLineWidth(1 * opts.pix)
+ context.setStrokeStyle(item.color)
+ context.setFillStyle(item.color)
+ context.beginPath()
+ context.moveTo(startX, startY)
+ context.lineTo(endX, startY)
+ context.stroke()
+ context.closePath()
+ context.beginPath()
+ context.moveTo(endX, startY)
+ context.arc(endX, startY, 2, 0, 2 * Math.PI)
+ context.closePath()
+ context.fill()
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setFillStyle(item.textColor || opts.fontColor)
+ context.fillText(text, endX - 5 - measureText(text, fontSize, context), startY + fontSize / 2 - 2)
+ context.closePath()
+ context.stroke()
+ context.closePath()
+ }
+ }
+}
+
+function drawFunnelCenterText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i]
+ let startY, fontSize
+ if (item.centerText) {
+ startY = item.funnelArea[1] + eachSpacing / 2
+ fontSize = item.centerTextSize * opts.pix || opts.fontSize * opts.pix
+ context.beginPath()
+ context.setFontSize(fontSize)
+ context.setFillStyle(item.centerTextColor || "#FFFFFF")
+ context.fillText(item.centerText, centerPosition.x - measureText(item.centerText, fontSize, context) / 2, startY + fontSize / 2 - 2)
+ context.closePath()
+ context.stroke()
+ context.closePath()
+ }
+ }
+}
+
+function drawCanvas(opts, context) {
+ context.save()
+ context.translate(0, 0.5)
+ context.restore()
+ context.draw()
+}
+
+var Timing = {
+ easeIn: function easeIn(pos) {
+ return Math.pow(pos, 3)
+ },
+ easeOut: function easeOut(pos) {
+ return Math.pow(pos - 1, 3) + 1
+ },
+ easeInOut: function easeInOut(pos) {
+ if ((pos /= 0.5) < 1) {
+ return 0.5 * Math.pow(pos, 3)
+ } else {
+ return 0.5 * (Math.pow(pos - 2, 3) + 2)
+ }
+ },
+ linear: function linear(pos) {
+ return pos
+ },
+}
+
+function Animation(opts) {
+ this.isStop = false
+ opts.duration = typeof opts.duration === "undefined" ? 1000 : opts.duration
+ opts.timing = opts.timing || "easeInOut"
+ var delay = 17
+ function createAnimationFrame() {
+ if (typeof setTimeout !== "undefined") {
+ return function (step, delay) {
+ setTimeout(function () {
+ var timeStamp = +new Date()
+ step(timeStamp)
+ }, delay)
+ }
+ } else if (typeof requestAnimationFrame !== "undefined") {
+ return requestAnimationFrame
+ } else {
+ return function (step) {
+ step(null)
+ }
+ }
+ }
+ var animationFrame = createAnimationFrame()
+ var startTimeStamp = null
+ var _step = function step(timestamp) {
+ if (timestamp === null || this.isStop === true) {
+ opts.onProcess && opts.onProcess(1)
+ opts.onAnimationFinish && opts.onAnimationFinish()
+ return
+ }
+ if (startTimeStamp === null) {
+ startTimeStamp = timestamp
+ }
+ if (timestamp - startTimeStamp < opts.duration) {
+ var process = (timestamp - startTimeStamp) / opts.duration
+ var timingFunction = Timing[opts.timing]
+ process = timingFunction(process)
+ opts.onProcess && opts.onProcess(process)
+ animationFrame(_step, delay)
+ } else {
+ opts.onProcess && opts.onProcess(1)
+ opts.onAnimationFinish && opts.onAnimationFinish()
+ }
+ }
+ _step = _step.bind(this)
+ animationFrame(_step, delay)
+}
+
+Animation.prototype.stop = function () {
+ this.isStop = true
+}
+
+function drawCharts(type, opts, config, context) {
+ var _this = this
+ var series = opts.series
+ //兼容ECharts饼图类数据格式
+ if (type === "pie" || type === "ring" || type === "mount" || type === "rose" || type === "funnel") {
+ series = fixPieSeries(series, opts, config)
+ }
+ var categories = opts.categories
+ if (type === "mount") {
+ categories = []
+ for (let j = 0; j < series.length; j++) {
+ if (series[j].show !== false) categories.push(series[j].name)
+ }
+ opts.categories = categories
+ }
+ series = fillSeries(series, opts, config)
+ var duration = opts.animation ? opts.duration : 0
+ _this.animationInstance && _this.animationInstance.stop()
+ var seriesMA = null
+ if (type == "candle") {
+ let average = assign({}, opts.extra.candle.average)
+ if (average.show) {
+ seriesMA = calCandleMA(average.day, average.name, average.color, series[0].data)
+ seriesMA = fillSeries(seriesMA, opts, config)
+ opts.seriesMA = seriesMA
+ } else if (opts.seriesMA) {
+ seriesMA = opts.seriesMA = fillSeries(opts.seriesMA, opts, config)
+ } else {
+ seriesMA = series
+ }
+ } else {
+ seriesMA = series
+ }
+ /* 过滤掉show=false的series */
+ opts._series_ = series = filterSeries(series)
+ //重新计算图表区域
+ opts.area = new Array(4)
+ //复位绘图区域
+ for (let j = 0; j < 4; j++) {
+ opts.area[j] = opts.padding[j] * opts.pix
+ }
+ //通过计算三大区域：图例、X轴、Y轴的大小，确定绘图区域
+ var _calLegendData = calLegendData(seriesMA, opts, config, opts.chartData, context),
+ legendHeight = _calLegendData.area.wholeHeight,
+ legendWidth = _calLegendData.area.wholeWidth
+
+ switch (opts.legend.position) {
+ case "top":
+ opts.area[0] += legendHeight
+ break
+ case "bottom":
+ opts.area[2] += legendHeight
+ break
+ case "left":
+ opts.area[3] += legendWidth
+ break
+ case "right":
+ opts.area[1] += legendWidth
+ break
+ }
+
+ let _calYAxisData = {},
+ yAxisWidth = 0
+ if (
+ opts.type === "line" ||
+ opts.type === "column" ||
+ opts.type === "mount" ||
+ opts.type === "area" ||
+ opts.type === "mix" ||
+ opts.type === "candle" ||
+ opts.type === "scatter" ||
+ opts.type === "bubble" ||
+ opts.type === "bar"
+ ) {
+ _calYAxisData = calYAxisData(series, opts, config, context)
+ yAxisWidth = _calYAxisData.yAxisWidth
+ //如果显示Y轴标题
+ if (opts.yAxis.showTitle) {
+ let maxTitleHeight = 0
+ for (let i = 0; i < opts.yAxis.data.length; i++) {
+ maxTitleHeight = Math.max(
+ maxTitleHeight,
+ opts.yAxis.data[i].titleFontSize ? opts.yAxis.data[i].titleFontSize * opts.pix : config.fontSize,
+ )
+ }
+ opts.area[0] += maxTitleHeight
+ }
+ let rightIndex = 0,
+ leftIndex = 0
+ //计算主绘图区域左右位置
+ for (let i = 0; i < yAxisWidth.length; i++) {
+ if (yAxisWidth[i].position == "left") {
+ if (leftIndex > 0) {
+ opts.area[3] += yAxisWidth[i].width + opts.yAxis.padding * opts.pix
+ } else {
+ opts.area[3] += yAxisWidth[i].width
+ }
+ leftIndex += 1
+ } else if (yAxisWidth[i].position == "right") {
+ if (rightIndex > 0) {
+ opts.area[1] += yAxisWidth[i].width + opts.yAxis.padding * opts.pix
+ } else {
+ opts.area[1] += yAxisWidth[i].width
+ }
+ rightIndex += 1
+ }
+ }
+ } else {
+ config.yAxisWidth = yAxisWidth
+ }
+ opts.chartData.yAxisData = _calYAxisData
+
+ if (opts.categories && opts.categories.length && opts.type !== "radar" && opts.type !== "gauge" && opts.type !== "bar") {
+ opts.chartData.xAxisData = getXAxisPoints(opts.categories, opts, config)
+ let _calCategoriesData = calCategoriesData(opts.categories, opts, config, opts.chartData.xAxisData.eachSpacing, context),
+ xAxisHeight = _calCategoriesData.xAxisHeight,
+ angle = _calCategoriesData.angle
+ config.xAxisHeight = xAxisHeight
+ config._xAxisTextAngle_ = angle
+ opts.area[2] += xAxisHeight
+ opts.chartData.categoriesData = _calCategoriesData
+ } else {
+ if (opts.type === "line" || opts.type === "area" || opts.type === "scatter" || opts.type === "bubble" || opts.type === "bar") {
+ opts.chartData.xAxisData = calXAxisData(series, opts, config, context)
+ categories = opts.chartData.xAxisData.rangesFormat
+ let _calCategoriesData = calCategoriesData(categories, opts, config, opts.chartData.xAxisData.eachSpacing, context),
+ xAxisHeight = _calCategoriesData.xAxisHeight,
+ angle = _calCategoriesData.angle
+ config.xAxisHeight = xAxisHeight
+ config._xAxisTextAngle_ = angle
+ opts.area[2] += xAxisHeight
+ opts.chartData.categoriesData = _calCategoriesData
+ } else {
+ opts.chartData.xAxisData = {
+ xAxisPoints: [],
+ }
+ }
+ }
+
+ //计算右对齐偏移距离
+ if (opts.enableScroll && opts.xAxis.scrollAlign == "right" && opts._scrollDistance_ === undefined) {
+ let offsetLeft = 0,
+ xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
+ startX = opts.chartData.xAxisData.startX,
+ endX = opts.chartData.xAxisData.endX,
+ eachSpacing = opts.chartData.xAxisData.eachSpacing
+ let totalWidth = eachSpacing * (xAxisPoints.length - 1)
+ let screenWidth = endX - startX
+ offsetLeft = screenWidth - totalWidth
+ _this.scrollOption.currentOffset = offsetLeft
+ _this.scrollOption.startTouchX = offsetLeft
+ _this.scrollOption.distance = 0
+ _this.scrollOption.lastMoveTime = 0
+ opts._scrollDistance_ = offsetLeft
+ }
+
+ if (type === "pie" || type === "ring" || type === "rose") {
+ config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(seriesMA, config, context, opts)
+ }
+
+ switch (type) {
+ case "word":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function (process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawWordCloudDataPoints(series, opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "map":
+ context.clearRect(0, 0, opts.width, opts.height)
+ drawMapDataPoints(series, opts, config, context)
+ setTimeout(() => {
+ this.uevent.trigger("renderComplete")
+ }, 50)
+ break
+ case "funnel":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function (process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.funnelData = drawFunnelDataPoints(series, opts, config, context, process)
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "line":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawLineDataPoints.xAxisPoints,
+ calPoints = _drawLineDataPoints.calPoints,
+ eachSpacing = _drawLineDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "scatter":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawScatterDataPoints = drawScatterDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawScatterDataPoints.xAxisPoints,
+ calPoints = _drawScatterDataPoints.calPoints,
+ eachSpacing = _drawScatterDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "bubble":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawBubbleDataPoints = drawBubbleDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawBubbleDataPoints.xAxisPoints,
+ calPoints = _drawBubbleDataPoints.calPoints,
+ eachSpacing = _drawBubbleDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "mix":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawMixDataPoints = drawMixDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawMixDataPoints.xAxisPoints,
+ calPoints = _drawMixDataPoints.calPoints,
+ eachSpacing = _drawMixDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "column":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawColumnDataPoints.xAxisPoints,
+ calPoints = _drawColumnDataPoints.calPoints,
+ eachSpacing = _drawColumnDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "mount":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawMountDataPoints = drawMountDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawMountDataPoints.xAxisPoints,
+ calPoints = _drawMountDataPoints.calPoints,
+ eachSpacing = _drawMountDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "bar":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawXAxis(categories, opts, config, context)
+ var _drawBarDataPoints = drawBarDataPoints(series, opts, config, context, process),
+ yAxisPoints = _drawBarDataPoints.yAxisPoints,
+ calPoints = _drawBarDataPoints.calPoints,
+ eachSpacing = _drawBarDataPoints.eachSpacing
+ opts.chartData.yAxisPoints = yAxisPoints
+ opts.chartData.xAxisPoints = opts.chartData.xAxisData.xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, yAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "area":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawAreaDataPoints.xAxisPoints,
+ calPoints = _drawAreaDataPoints.calPoints,
+ eachSpacing = _drawAreaDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "ring":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process)
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "pie":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process)
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "rose":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.pieData = drawRoseDataPoints(series, opts, config, context, process)
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "radar":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process)
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ drawToolTipBridge(opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "arcbar":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.arcbarData = drawArcbarDataPoints(series, opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "gauge":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ opts.chartData.gaugeData = drawGaugeDataPoints(categories, series, opts, config, context, process)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ case "candle":
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ duration: duration,
+ onProcess: function onProcess(process) {
+ context.clearRect(0, 0, opts.width, opts.height)
+ if (opts.rotate) {
+ contextRotate(context, opts)
+ }
+ drawYAxisGrid(categories, opts, config, context)
+ drawXAxis(categories, opts, config, context)
+ var _drawCandleDataPoints = drawCandleDataPoints(series, seriesMA, opts, config, context, process),
+ xAxisPoints = _drawCandleDataPoints.xAxisPoints,
+ calPoints = _drawCandleDataPoints.calPoints,
+ eachSpacing = _drawCandleDataPoints.eachSpacing
+ opts.chartData.xAxisPoints = xAxisPoints
+ opts.chartData.calPoints = calPoints
+ opts.chartData.eachSpacing = eachSpacing
+ drawYAxis(series, opts, config, context)
+ if (opts.enableMarkLine !== false && process === 1) {
+ drawMarkLine(opts, config, context)
+ }
+ if (seriesMA) {
+ drawLegend(seriesMA, opts, config, context, opts.chartData)
+ } else {
+ drawLegend(opts.series, opts, config, context, opts.chartData)
+ }
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints)
+ drawCanvas(opts, context)
+ },
+ onAnimationFinish: function onAnimationFinish() {
+ _this.uevent.trigger("renderComplete")
+ },
+ })
+ break
+ }
+}
+
+function uChartsEvent() {
+ this.events = {}
+}
+
+uChartsEvent.prototype.addEventListener = function (type, listener) {
+ this.events[type] = this.events[type] || []
+ this.events[type].push(listener)
+}
+
+uChartsEvent.prototype.delEventListener = function (type) {
+ this.events[type] = []
+}
+
+uChartsEvent.prototype.trigger = function () {
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key]
+ }
+ var type = args[0]
+ var params = args.slice(1)
+ if (!!this.events[type]) {
+ this.events[type].forEach(function (listener) {
+ try {
+ listener.apply(null, params)
+ } catch (e) {
+ //console.log('[uCharts] '+e);
+ }
+ })
+ }
+}
+
+var uCharts = function uCharts(opts) {
+ opts.pix = opts.pixelRatio ? opts.pixelRatio : 1
+ opts.fontSize = opts.fontSize ? opts.fontSize : 13
+ opts.fontColor = opts.fontColor ? opts.fontColor : config.fontColor
+ if (opts.background == "" || opts.background == "none") {
+ opts.background = "#FFFFFF"
+ }
+ opts.title = assign({}, opts.title)
+ opts.subtitle = assign({}, opts.subtitle)
+ opts.duration = opts.duration ? opts.duration : 1000
+ opts.yAxis = assign(
+ {},
+ {
+ data: [],
+ showTitle: false,
+ disabled: false,
+ disableGrid: false,
+ gridSet: "number",
+ splitNumber: 5,
+ gridType: "solid",
+ dashLength: 4 * opts.pix,
+ gridColor: "#cccccc",
+ padding: 10,
+ fontColor: "#666666",
+ },
+ opts.yAxis,
+ )
+ opts.xAxis = assign(
+ {},
+ {
+ rotateLabel: false,
+ rotateAngle: 45,
+ disabled: false,
+ disableGrid: false,
+ splitNumber: 5,
+ calibration: false,
+ fontColor: "#666666",
+ fontSize: 13,
+ lineHeight: 20,
+ marginTop: 0,
+ gridType: "solid",
+ dashLength: 4,
+ scrollAlign: "left",
+ boundaryGap: "center",
+ axisLine: true,
+ axisLineColor: "#cccccc",
+ titleFontSize: 13,
+ titleOffsetY: 0,
+ titleOffsetX: 0,
+ titleFontColor: "#666666",
+ },
+ opts.xAxis,
+ )
+ opts.xAxis.scrollPosition = opts.xAxis.scrollAlign
+ opts.legend = assign(
+ {},
+ {
+ show: true,
+ position: "bottom",
+ float: "center",
+ backgroundColor: "rgba(0,0,0,0)",
+ borderColor: "rgba(0,0,0,0)",
+ borderWidth: 0,
+ padding: 5,
+ margin: 5,
+ itemGap: 10,
+ fontSize: opts.fontSize,
+ lineHeight: opts.fontSize,
+ fontColor: opts.fontColor,
+ formatter: {},
+ hiddenColor: "#CECECE",
+ },
+ opts.legend,
+ )
+ opts.extra = assign(
+ {
+ tooltip: {
+ legendShape: "auto",
+ },
+ },
+ opts.extra,
+ )
+ opts.rotate = opts.rotate ? true : false
+ opts.animation = opts.animation ? true : false
+ opts.rotate = opts.rotate ? true : false
+ opts.canvas2d = opts.canvas2d ? true : false
+
+ let config$$1 = assign({}, config)
+ config$$1.color = opts.color ? opts.color : config$$1.color
+ if (opts.type == "pie") {
+ config$$1.pieChartLinePadding =
+ opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix
+ }
+ if (opts.type == "ring") {
+ config$$1.pieChartLinePadding =
+ opts.dataLabel === false ? 0 : opts.extra.ring.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix
+ }
+ if (opts.type == "rose") {
+ config$$1.pieChartLinePadding =
+ opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix
+ }
+ config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pix
+
+ //屏幕旋转
+ config$$1.rotate = opts.rotate
+ if (opts.rotate) {
+ let tempWidth = opts.width
+ let tempHeight = opts.height
+ opts.width = tempHeight
+ opts.height = tempWidth
+ }
+
+ //适配高分屏
+ opts.padding = opts.padding ? opts.padding : config$$1.padding
+ config$$1.yAxisWidth = config.yAxisWidth * opts.pix
+ config$$1.fontSize = opts.fontSize * opts.pix
+ config$$1.titleFontSize = config.titleFontSize * opts.pix
+ config$$1.subtitleFontSize = config.subtitleFontSize * opts.pix
+ if (!opts.context) {
+ throw new Error("[uCharts] 未获取到context！注意：v2.0版本后，需要自行获取canvas的绘图上下文并传入opts.context！")
+ }
+ this.context = opts.context
+ if (!this.context.setTextAlign) {
+ this.context.setStrokeStyle = function (e) {
+ return (this.strokeStyle = e)
+ }
+ this.context.setLineWidth = function (e) {
+ return (this.lineWidth = e)
+ }
+ this.context.setLineCap = function (e) {
+ return (this.lineCap = e)
+ }
+ this.context.setFontSize = function (e) {
+ return (this.font = e + "px sans-serif")
+ }
+ this.context.setFillStyle = function (e) {
+ return (this.fillStyle = e)
+ }
+ this.context.setTextAlign = function (e) {
+ return (this.textAlign = e)
+ }
+ this.context.setTextBaseline = function (e) {
+ return (this.textBaseline = e)
+ }
+ this.context.setShadow = function (offsetX, offsetY, blur, color) {
+ this.shadowColor = color
+ this.shadowOffsetX = offsetX
+ this.shadowOffsetY = offsetY
+ this.shadowBlur = blur
+ }
+ this.context.draw = function () {}
+ }
+ //兼容NVUEsetLineDash
+ if (!this.context.setLineDash) {
+ this.context.setLineDash = function (e) {}
+ }
+ opts.chartData = {}
+ this.uevent = new uChartsEvent()
+ this.scrollOption = {
+ currentOffset: 0,
+ startTouchX: 0,
+ distance: 0,
+ lastMoveTime: 0,
+ }
+ this.opts = opts
+ this.config = config$$1
+ drawCharts.call(this, opts.type, opts, config$$1, this.context)
+}
+
+uCharts.prototype.updateData = function () {
+ let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}
+ this.opts = assign({}, this.opts, data)
+ this.opts.updateData = true
+ let scrollPosition = data.scrollPosition || "current"
+ switch (scrollPosition) {
+ case "current":
+ this.opts._scrollDistance_ = this.scrollOption.currentOffset
+ break
+ case "left":
+ this.opts._scrollDistance_ = 0
+ this.scrollOption = {
+ currentOffset: 0,
+ startTouchX: 0,
+ distance: 0,
+ lastMoveTime: 0,
+ }
+ break
+ case "right":
+ let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config, this.context),
+ yAxisWidth = _calYAxisData.yAxisWidth
+ this.config.yAxisWidth = yAxisWidth
+ let offsetLeft = 0
+ let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
+ xAxisPoints = _getXAxisPoints0.xAxisPoints,
+ startX = _getXAxisPoints0.startX,
+ endX = _getXAxisPoints0.endX,
+ eachSpacing = _getXAxisPoints0.eachSpacing
+ let totalWidth = eachSpacing * (xAxisPoints.length - 1)
+ let screenWidth = endX - startX
+ offsetLeft = screenWidth - totalWidth
+ this.scrollOption = {
+ currentOffset: offsetLeft,
+ startTouchX: offsetLeft,
+ distance: 0,
+ lastMoveTime: 0,
+ }
+ this.opts._scrollDistance_ = offsetLeft
+ break
+ }
+ drawCharts.call(this, this.opts.type, this.opts, this.config, this.context)
+}
+
+uCharts.prototype.zoom = function () {
+ var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.opts.xAxis.itemCount
+ if (this.opts.enableScroll !== true) {
+ console.log("[uCharts] 请启用滚动条后使用")
+ return
+ }
+ //当前屏幕中间点
+ let centerPoint =
+ Math.round(Math.abs(this.scrollOption.currentOffset) / this.opts.chartData.eachSpacing) + Math.round(this.opts.xAxis.itemCount / 2)
+ this.opts.animation = false
+ this.opts.xAxis.itemCount = val.itemCount
+ //重新计算x轴偏移距离
+ let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config, this.context),
+ yAxisWidth = _calYAxisData.yAxisWidth
+ this.config.yAxisWidth = yAxisWidth
+ let offsetLeft = 0
+ let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
+ xAxisPoints = _getXAxisPoints0.xAxisPoints,
+ startX = _getXAxisPoints0.startX,
+ endX = _getXAxisPoints0.endX,
+ eachSpacing = _getXAxisPoints0.eachSpacing
+ let centerLeft = eachSpacing * centerPoint
+ let screenWidth = endX - startX
+ let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1)
+ offsetLeft = screenWidth / 2 - centerLeft
+ if (offsetLeft > 0) {
+ offsetLeft = 0
+ }
+ if (offsetLeft < MaxLeft) {
+ offsetLeft = MaxLeft
+ }
+ this.scrollOption = {
+ currentOffset: offsetLeft,
+ startTouchX: 0,
+ distance: 0,
+ lastMoveTime: 0,
+ }
+ calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts)
+ this.opts._scrollDistance_ = offsetLeft
+ drawCharts.call(this, this.opts.type, this.opts, this.config, this.context)
+}
+
+uCharts.prototype.dobuleZoom = function (e) {
+ if (this.opts.enableScroll !== true) {
+ console.log("[uCharts] 请启用滚动条后使用")
+ return
+ }
+ const tcs = e.changedTouches
+ if (tcs.length < 2) {
+ return
+ }
+ for (var i = 0; i < tcs.length; i++) {
+ tcs[i].x = tcs[i].x ? tcs[i].x : tcs[i].clientX
+ tcs[i].y = tcs[i].y ? tcs[i].y : tcs[i].clientY
+ }
+ const ntcs = [getTouches(tcs[0], this.opts, e), getTouches(tcs[1], this.opts, e)]
+ const xlength = Math.abs(ntcs[0].x - ntcs[1].x)
+ // 记录初始的两指之间的数据
+ if (!this.scrollOption.moveCount) {
+ let cts0 = { changedTouches: [{ x: tcs[0].x, y: this.opts.area[0] / this.opts.pix + 2 }] }
+ let cts1 = { changedTouches: [{ x: tcs[1].x, y: this.opts.area[0] / this.opts.pix + 2 }] }
+ if (this.opts.rotate) {
+ cts0 = { changedTouches: [{ x: this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2, y: tcs[0].y }] }
+ cts1 = { changedTouches: [{ x: this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2, y: tcs[1].y }] }
+ }
+ const moveCurrent1 = this.getCurrentDataIndex(cts0).index
+ const moveCurrent2 = this.getCurrentDataIndex(cts1).index
+ const moveCount = Math.abs(moveCurrent1 - moveCurrent2)
+ this.scrollOption.moveCount = moveCount
+ this.scrollOption.moveCurrent1 = Math.min(moveCurrent1, moveCurrent2)
+ this.scrollOption.moveCurrent2 = Math.max(moveCurrent1, moveCurrent2)
+ return
+ }
+
+ let currentEachSpacing = xlength / this.scrollOption.moveCount
+ let itemCount = (this.opts.width - this.opts.area[1] - this.opts.area[3]) / currentEachSpacing
+ itemCount = itemCount <= 2 ? 2 : itemCount
+ itemCount = itemCount >= this.opts.categories.length ? this.opts.categories.length : itemCount
+ this.opts.animation = false
+ this.opts.xAxis.itemCount = itemCount
+ // 重新计算滚动条偏移距离
+ let offsetLeft = 0
+ let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
+ xAxisPoints = _getXAxisPoints0.xAxisPoints,
+ startX = _getXAxisPoints0.startX,
+ endX = _getXAxisPoints0.endX,
+ eachSpacing = _getXAxisPoints0.eachSpacing
+ let currentLeft = eachSpacing * this.scrollOption.moveCurrent1
+ let screenWidth = endX - startX
+ let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1)
+ offsetLeft = -currentLeft + Math.min(ntcs[0].x, ntcs[1].x) - this.opts.area[3] - eachSpacing
+ if (offsetLeft > 0) {
+ offsetLeft = 0
+ }
+ if (offsetLeft < MaxLeft) {
+ offsetLeft = MaxLeft
+ }
+ this.scrollOption.currentOffset = offsetLeft
+ this.scrollOption.startTouchX = 0
+ this.scrollOption.distance = 0
+ calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts)
+ this.opts._scrollDistance_ = offsetLeft
+ drawCharts.call(this, this.opts.type, this.opts, this.config, this.context)
+}
+
+uCharts.prototype.stopAnimation = function () {
+ this.animationInstance && this.animationInstance.stop()
+}
+
+uCharts.prototype.addEventListener = function (type, listener) {
+ this.uevent.addEventListener(type, listener)
+}
+
+uCharts.prototype.delEventListener = function (type) {
+ this.uevent.delEventListener(type)
+}
+
+uCharts.prototype.getCurrentDataIndex = function (e) {
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ if (touches) {
+ let _touches$ = getTouches(touches, this.opts, e)
+ if (this.opts.type === "pie" || this.opts.type === "ring") {
+ return findPieChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.pieData,
+ this.opts,
+ )
+ } else if (this.opts.type === "rose") {
+ return findRoseChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.pieData,
+ this.opts,
+ )
+ } else if (this.opts.type === "radar") {
+ return findRadarChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.radarData,
+ this.opts.categories.length,
+ )
+ } else if (this.opts.type === "funnel") {
+ return findFunnelChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.funnelData,
+ )
+ } else if (this.opts.type === "map") {
+ return findMapChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts,
+ )
+ } else if (this.opts.type === "word") {
+ return findWordChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.wordCloudData,
+ )
+ } else if (this.opts.type === "bar") {
+ return findBarChartCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.calPoints,
+ this.opts,
+ this.config,
+ Math.abs(this.scrollOption.currentOffset),
+ )
+ } else {
+ return findCurrentIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.calPoints,
+ this.opts,
+ this.config,
+ Math.abs(this.scrollOption.currentOffset),
+ )
+ }
+ }
+ return -1
+}
+
+uCharts.prototype.getLegendDataIndex = function (e) {
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ if (touches) {
+ let _touches$ = getTouches(touches, this.opts, e)
+ return findLegendIndex(
+ {
+ x: _touches$.x,
+ y: _touches$.y,
+ },
+ this.opts.chartData.legendData,
+ )
+ }
+ return -1
+}
+
+uCharts.prototype.touchLegend = function (e) {
+ var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ if (touches) {
+ var _touches$ = getTouches(touches, this.opts, e)
+ var index = this.getLegendDataIndex(e)
+ if (index >= 0) {
+ if (this.opts.type == "candle") {
+ this.opts.seriesMA[index].show = !this.opts.seriesMA[index].show
+ } else {
+ this.opts.series[index].show = !this.opts.series[index].show
+ }
+ this.opts.animation = option.animation ? true : false
+ this.opts._scrollDistance_ = this.scrollOption.currentOffset
+ drawCharts.call(this, this.opts.type, this.opts, this.config, this.context)
+ }
+ }
+}
+
+uCharts.prototype.showToolTip = function (e) {
+ var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ if (!touches) {
+ console.log("[uCharts] 未获取到event坐标信息")
+ }
+ var _touches$ = getTouches(touches, this.opts, e)
+ var currentOffset = this.scrollOption.currentOffset
+ var opts = assign({}, this.opts, {
+ _scrollDistance_: currentOffset,
+ animation: false,
+ })
+ if (
+ this.opts.type === "line" ||
+ this.opts.type === "area" ||
+ this.opts.type === "column" ||
+ this.opts.type === "scatter" ||
+ this.opts.type === "bubble"
+ ) {
+ var current = this.getCurrentDataIndex(e)
+ var index = option.index == undefined ? current.index : option.index
+ if (index > -1 || index.length > 0) {
+ var seriesData = getSeriesDataItem(this.opts.series, index, current.group)
+ if (seriesData.length !== 0) {
+ var _getToolTipData = getToolTipData(seriesData, this.opts, index, current.group, this.opts.categories, option),
+ textList = _getToolTipData.textList,
+ offset = _getToolTipData.offset
+ offset.y = _touches$.y
+ opts.tooltip = {
+ textList: option.textList !== undefined ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ group: current.group,
+ }
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "mount") {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e).index : option.index
+ if (index > -1) {
+ var opts = assign({}, this.opts, { animation: false })
+ var seriesData = assign({}, opts._series_[index])
+ var textList = [
+ {
+ text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ": " + seriesData.data,
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == "auto" ? seriesData.legendShape : this.opts.extra.tooltip.legendShape,
+ },
+ ]
+ var offset = {
+ x: opts.chartData.calPoints[index].x,
+ y: _touches$.y,
+ }
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "bar") {
+ var current = this.getCurrentDataIndex(e)
+ var index = option.index == undefined ? current.index : option.index
+ if (index > -1 || index.length > 0) {
+ var seriesData = getSeriesDataItem(this.opts.series, index, current.group)
+ if (seriesData.length !== 0) {
+ var _getToolTipData = getToolTipData(seriesData, this.opts, index, current.group, this.opts.categories, option),
+ textList = _getToolTipData.textList,
+ offset = _getToolTipData.offset
+ offset.x = _touches$.x
+ opts.tooltip = {
+ textList: option.textList !== undefined ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "mix") {
+ var current = this.getCurrentDataIndex(e)
+ var index = option.index == undefined ? current.index : option.index
+ if (index > -1) {
+ var currentOffset = this.scrollOption.currentOffset
+ var opts = assign({}, this.opts, {
+ _scrollDistance_: currentOffset,
+ animation: false,
+ })
+ var seriesData = getSeriesDataItem(this.opts.series, index)
+ if (seriesData.length !== 0) {
+ var _getMixToolTipData = getMixToolTipData(seriesData, this.opts, index, this.opts.categories, option),
+ textList = _getMixToolTipData.textList,
+ offset = _getMixToolTipData.offset
+ offset.y = _touches$.y
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "candle") {
+ var current = this.getCurrentDataIndex(e)
+ var index = option.index == undefined ? current.index : option.index
+ if (index > -1) {
+ var currentOffset = this.scrollOption.currentOffset
+ var opts = assign({}, this.opts, {
+ _scrollDistance_: currentOffset,
+ animation: false,
+ })
+ var seriesData = getSeriesDataItem(this.opts.series, index)
+ if (seriesData.length !== 0) {
+ var _getToolTipData = getCandleToolTipData(
+ this.opts.series[0].data,
+ seriesData,
+ this.opts,
+ index,
+ this.opts.categories,
+ this.opts.extra.candle,
+ option,
+ ),
+ textList = _getToolTipData.textList,
+ offset = _getToolTipData.offset
+ offset.y = _touches$.y
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "pie" || this.opts.type === "ring" || this.opts.type === "rose" || this.opts.type === "funnel") {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index
+ if (index > -1) {
+ var opts = assign({}, this.opts, { animation: false })
+ var seriesData = assign({}, opts._series_[index])
+ var textList = [
+ {
+ text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ": " + seriesData.data,
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == "auto" ? seriesData.legendShape : this.opts.extra.tooltip.legendShape,
+ },
+ ]
+ var offset = {
+ x: _touches$.x,
+ y: _touches$.y,
+ }
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "map") {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index
+ if (index > -1) {
+ var opts = assign({}, this.opts, { animation: false })
+ var seriesData = assign({}, this.opts.series[index])
+ seriesData.name = seriesData.properties.name
+ var textList = [
+ {
+ text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == "auto" ? seriesData.legendShape : this.opts.extra.tooltip.legendShape,
+ },
+ ]
+ var offset = {
+ x: _touches$.x,
+ y: _touches$.y,
+ }
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ opts.updateData = false
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "word") {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index
+ if (index > -1) {
+ var opts = assign({}, this.opts, { animation: false })
+ var seriesData = assign({}, this.opts.series[index])
+ var textList = [
+ {
+ text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == "auto" ? seriesData.legendShape : this.opts.extra.tooltip.legendShape,
+ },
+ ]
+ var offset = {
+ x: _touches$.x,
+ y: _touches$.y,
+ }
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ opts.updateData = false
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+ if (this.opts.type === "radar") {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index
+ if (index > -1) {
+ var opts = assign({}, this.opts, { animation: false })
+ var seriesData = getSeriesDataItem(this.opts.series, index)
+ if (seriesData.length !== 0) {
+ var textList = seriesData.map((item) => {
+ return {
+ text: option.formatter ? option.formatter(item, this.opts.categories[index], index, this.opts) : item.name + ": " + item.data,
+ color: item.color,
+ legendShape: this.opts.extra.tooltip.legendShape == "auto" ? item.legendShape : this.opts.extra.tooltip.legendShape,
+ }
+ })
+ var offset = {
+ x: _touches$.x,
+ y: _touches$.y,
+ }
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index,
+ }
+ }
+ }
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ }
+}
+
+uCharts.prototype.translate = function (distance) {
+ this.scrollOption = {
+ currentOffset: distance,
+ startTouchX: distance,
+ distance: 0,
+ lastMoveTime: 0,
+ }
+ let opts = assign({}, this.opts, {
+ _scrollDistance_: distance,
+ animation: false,
+ })
+ drawCharts.call(this, this.opts.type, opts, this.config, this.context)
+}
+
+uCharts.prototype.scrollStart = function (e) {
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ var _touches$ = getTouches(touches, this.opts, e)
+ if (touches && this.opts.enableScroll === true) {
+ this.scrollOption.startTouchX = _touches$.x
+ }
+}
+
+uCharts.prototype.scroll = function (e) {
+ if (this.scrollOption.lastMoveTime === 0) {
+ this.scrollOption.lastMoveTime = Date.now()
+ }
+ let Limit = this.opts.touchMoveLimit || 60
+ let currMoveTime = Date.now()
+ let duration = currMoveTime - this.scrollOption.lastMoveTime
+ if (duration < Math.floor(1000 / Limit)) return
+ if (this.scrollOption.startTouchX == 0) return
+ this.scrollOption.lastMoveTime = currMoveTime
+ var touches = null
+ if (e.changedTouches) {
+ touches = e.changedTouches[0]
+ } else {
+ touches = e.mp.changedTouches[0]
+ }
+ if (touches && this.opts.enableScroll === true) {
+ var _touches$ = getTouches(touches, this.opts, e)
+ var _distance
+ _distance = _touches$.x - this.scrollOption.startTouchX
+ var currentOffset = this.scrollOption.currentOffset
+ var validDistance = calValidDistance(this, currentOffset + _distance, this.opts.chartData, this.config, this.opts)
+ this.scrollOption.distance = _distance = validDistance - currentOffset
+ var opts = assign({}, this.opts, {
+ _scrollDistance_: currentOffset + _distance,
+ animation: false,
+ })
+ this.opts = opts
+ drawCharts.call(this, opts.type, opts, this.config, this.context)
+ return currentOffset + _distance
+ }
+}
+
+uCharts.prototype.scrollEnd = function (e) {
+ if (this.opts.enableScroll === true) {
+ var _scrollOption = this.scrollOption,
+ currentOffset = _scrollOption.currentOffset,
+ distance = _scrollOption.distance
+ this.scrollOption.currentOffset = currentOffset + distance
+ this.scrollOption.distance = 0
+ this.scrollOption.moveCount = 0
+ }
+}
+
+export default uCharts
diff --git a/src/components/u-charts/u-charts.min.js b/src/components/u-charts/u-charts.min.js
new file mode 100644
index 0000000..0902ecd
--- /dev/null
+++ b/src/components/u-charts/u-charts.min.js
@@ -0,0 +1,18 @@
+/*
+ * uCharts (R)
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360/快手）、Vue、Taro等支持canvas的框架平台
+ * Copyright (C) 2021 QIUN (R) 秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts (R) 官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+"use strict";var config={version:"v2.5.0-20230101",yAxisWidth:15,xAxisHeight:22,padding:[10,10,10,10],rotate:false,fontSize:13,fontColor:"#666666",dataPointShape:["circle","circle","circle","circle"],color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],linearColor:["#0EE2F8","#2BDCA8","#FA7D8D","#EB88E2","#2AE3A0","#0EE2F8","#EB88E2","#6773E3","#F78A85"],pieChartLinePadding:15,pieChartTextPadding:5,titleFontSize:20,subtitleFontSize:15,radarLabelTextMargin:13};var assign=function(e,...t){if(e==null){throw new TypeError("[uCharts] Cannot convert undefined or null to object")}if(!t||t.length<=0){return e}function i(e,a){for(let t in a){e[t]=e[t]&&e[t].toString()==="[object Object]"?i(e[t],a[t]):e[t]=a[t]}return e}t.forEach(t=>{e=i(e,t)});return e};var util={toFixed:function t(e,a){a=a||2;if(this.isFloat(e)){e=e.toFixed(a)}return e},isFloat:function t(e){return e%1!==0},approximatelyEqual:function t(e,a){return Math.abs(e-a)<1e-10},isSameSign:function t(e,a){return Math.abs(e)===e&&Math.abs(a)===a||Math.abs(e)!==e&&Math.abs(a)!==a},isSameXCoordinateArea:function t(e,a){return this.isSameSign(e.x,a.x)},isCollision:function t(e,a){e.end={};e.end.x=e.start.x+e.width;e.end.y=e.start.y-e.height;a.end={};a.end.x=a.start.x+a.width;a.end.y=a.start.y-a.height;var i=a.start.x>e.end.x||a.end.xe.start.y||a.start.y1){if(r.extra.mount.widthRatio>2)r.extra.mount.widthRatio=2;n+=(r.extra.mount.widthRatio-1)*a.eachSpacing}var l=e;if(e>=0){l=0;t.uevent.trigger("scrollLeft");t.scrollOption.position="left";r.xAxis.scrollPosition="left"}else if(Math.abs(e)>=n-o){l=o-n;t.uevent.trigger("scrollRight");t.scrollOption.position="right";r.xAxis.scrollPosition="right"}else{t.scrollOption.position=e;r.xAxis.scrollPosition=e}return l}function isInAngleRange(t,e,a){function i(t){while(t<0){t+=2*Math.PI}while(t>2*Math.PI){t-=2*Math.PI}return t}t=i(t);e=i(e);a=i(a);if(e>a){a+=2*Math.PI;if(t=e&&t<=a}function createCurveControlPoints(t,e){function a(t,e){if(t[e-1]&&t[e+1]){return t[e].y>=Math.max(t[e-1].y,t[e+1].y)||t[e].y<=Math.min(t[e-1].y,t[e+1].y)}else{return false}}function c(t,e){if(t[e-1]&&t[e+1]){return t[e].x>=Math.max(t[e-1].x,t[e+1].x)||t[e].x<=Math.min(t[e-1].x,t[e+1].x)}else{return false}}var i=.2;var r=.2;var o=null;var n=null;var l=null;var s=null;if(e<1){o=t[0].x+(t[1].x-t[0].x)*i;n=t[0].y+(t[1].y-t[0].y)*i}else{o=t[e].x+(t[e+1].x-t[e-1].x)*i;n=t[e].y+(t[e+1].y-t[e-1].y)*i}if(e>t.length-3){var h=t.length-1;l=t[h].x-(t[h].x-t[h-1].x)*r;s=t[h].y-(t[h].y-t[h-1].y)*r}else{l=t[e+1].x-(t[e+2].x-t[e].x)*r;s=t[e+1].y-(t[e+2].y-t[e].y)*r}if(a(t,e+1)){s=t[e+1].y}if(a(t,e)){n=t[e].y}if(c(t,e+1)){l=t[e+1].x}if(c(t,e)){o=t[e].x}if(n>=Math.max(t[e].y,t[e+1].y)||n<=Math.min(t[e].y,t[e+1].y)){n=t[e].y}if(s>=Math.max(t[e].y,t[e+1].y)||s<=Math.min(t[e].y,t[e+1].y)){s=t[e+1].y}if(o>=Math.max(t[e].x,t[e+1].x)||o<=Math.min(t[e].x,t[e+1].x)){o=t[e].x}if(l>=Math.max(t[e].x,t[e+1].x)||l<=Math.min(t[e].x,t[e+1].x)){l=t[e+1].x}return{ctrA:{x:o,y:n},ctrB:{x:l,y:s}}}function convertCoordinateOrigin(t,e,a){return{x:a.x+t,y:a.y-e}}function avoidCollision(t,e){if(e){while(util.isCollision(t,e)){if(t.start.x>0){t.start.y--}else if(t.start.x<0){t.start.y++}else{if(t.start.y>0){t.start.y++}else{t.start.y--}}}}return t}function fixPieSeries(e,a,t){let i=[];if(e.length>0&&e[0].data.constructor.toString().indexOf("Array")>-1){a._pieSeries_=e;let t=e[0].data;for(var r=0;r=1e4){a=1e3}else if(i>=1e3){a=100}else if(i>=100){a=10}else if(i>=10){a=5}else if(i>=1){a=1}else if(i>=.1){a=.1}else if(i>=.01){a=.01}else if(i>=.001){a=.001}else if(i>=1e-4){a=1e-4}else if(i>=1e-5){a=1e-5}else{a=1e-6}return{minRange:findRange(t,"lower",a),maxRange:findRange(e,"upper",a)}}function measureText(a,t,e){var i=0;a=String(a);e=false;if(e!==false&&e!==undefined&&e.setFontSize&&e.measureText){e.setFontSize(t);return e.measureText(a).width}else{var a=a.split("");for(let e=0;e-1;if(n){let t=filterSeries(e);for(var l=0;l5&&arguments[5]!==undefined?arguments[5]:{};var l=a.chartData.calPoints?a.chartData.calPoints:[];let s={};if(r.length>0){let e=[];for(let t=0;t0){e=o[i]}return{text:n.formatter?n.formatter(t,e,i,a):t.name+": "+t.data,color:t.color,legendShape:a.extra.tooltip.legendShape=="auto"?t.legendShape:a.extra.tooltip.legendShape}});var h={x:Math.round(s.x),y:Math.round(s.y)};return{textList:e,offset:h}}function getMixToolTipData(t,e,a,i){var r=arguments.length>4&&arguments[4]!==undefined?arguments[4]:{};var o=e.chartData.xAxisPoints[a]+e.chartData.eachSpacing/2;var n=t.map(function(t){return{text:r.formatter?r.formatter(t,i[a],a,e):t.name+": "+t.data,color:t.color,disableLegend:t.disableLegend?true:false,legendShape:e.extra.tooltip.legendShape=="auto"?t.legendShape:e.extra.tooltip.legendShape}});n=n.filter(function(t){if(t.disableLegend!==true){return t}});var l={x:Math.round(o),y:0};return{textList:n,offset:l}}function getCandleToolTipData(o,e,n,l,i,t){var r=arguments.length>6&&arguments[6]!==undefined?arguments[6]:{};var a=n.chartData.calPoints;let s=t.color.upFill;let h=t.color.downFill;let c=[s,s,h,s];var d=[];e.map(function(t){if(l==0){if(t.data[1]-t.data[0]<0){c[1]=h}else{c[1]=s}}else{if(t.data[0]o[l-1][1]){c[2]=s}if(t.data[3]4&&arguments[4]!==undefined?arguments[4]:0;var l={index:-1,group:[]};var i=e.chartData.eachSpacing/2;let r=[];if(n&&n.length>0){if(!e.categories){i=0}else{for(let t=1;tt){l.index=e}})}}}return l}function findBarChartCurrentIndex(a,t,e,i){var r=arguments.length>4&&arguments[4]!==undefined?arguments[4]:0;var o={index:-1,group:[]};var n=e.chartData.eachSpacing/2;let l=e.chartData.yAxisPoints;if(t&&t.length>0){if(isInExactChartArea(a,e,i)){l.forEach(function(t,e){if(a.y+r+n>t){o.index=e}})}}return o}function findLegendIndex(o,t,e){let n=-1;let l=0;if(isInExactLegendArea(o,t.area)){let i=t.points;let r=-1;for(let t=0,e=i.length;tt[0]-l&&o.xt[1]-l&&o.ye.start.x&&t.xe.start.y&&t.y=e.area[3]-10&&t.y>=e.area[0]&&t.y<=e.height-e.area[2]}function findRadarChartCurrentIndex(t,e,a){var r=2*Math.PI/a;var o=-1;if(isInExactPieChartArea(t,e.center,e.radius)){var n=function t(e){if(e<0){e+=2*Math.PI}if(e>2*Math.PI){e-=2*Math.PI}return e};var l=Math.atan2(e.center.y-t.y,t.x-e.center.x);l=-1*l;if(l<0){l+=2*Math.PI}var i=e.angleList.map(function(t){t=n(-1*t);return t});i.forEach(function(t,e){var a=n(t-r/2);var i=n(t+r/2);if(i=a&&l<=i||l+2*Math.PI>=a&&l+2*Math.PI<=i){o=e}})}return o}function findFunnelChartCurrentIndex(t,e){var a=-1;for(var i=0,r=e.series.length;io.funnelArea[0]&&t.xo.funnelArea[1]&&t.yo.area[0]&&t.xo.area[1]&&t.ys.width-s.area[1]-s.area[3]){i.push(n);o.push(r-s.legend.itemGap*s.pix);r=e;n=[t]}else{r+=e;n.push(t)}}if(n.length){i.push(n);o.push(r-s.legend.itemGap*s.pix);c.widthArr=o;let t=Math.max.apply(null,o);switch(s.legend.float){case"left":c.area.start.x=s.area[3];c.area.end.x=s.area[3]+t+2*d;break;case"right":c.area.start.x=s.width-s.area[1]-t-2*d;c.area.end.x=s.width-s.area[1];break;default:c.area.start.x=(s.width-t)/2-d;c.area.end.x=(s.width+t)/2+d}c.area.width=t+2*d;c.area.wholeWidth=t+2*d;c.area.height=i.length*u+2*d;c.area.wholeHeight=i.length*u+2*d+2*x;c.points=i}}else{let t=l.length;let e=s.height-s.area[0]-s.area[2]-2*x-2*d;let a=Math.min(Math.floor(e/u),t);c.area.height=a*u+d*2;c.area.wholeHeight=a*u+d*2;switch(s.legend.float){case"top":c.area.start.y=s.area[0]+x;c.area.end.y=s.area[0]+x+c.area.height;break;case"bottom":c.area.start.y=s.height-s.area[2]-x-c.area.height;c.area.end.y=s.height-s.area[2]-x;break;default:c.area.start.y=(s.height-c.area.height)/2;c.area.end.y=(s.height+c.area.height)/2}let i=t%a===0?t/a:Math.floor(t/a+1);let r=[];for(let e=0;ei){i=t}}c.widthArr.push(i);c.heightArr.push(a.length*u+d*2)}let e=0;for(let t=0;t4&&arguments[4]!==undefined?arguments[4]:-1;var i;if(c=="stack"){i=dataCombineStack(t,e.categories.length)}else{i=dataCombine(t)}var r=[];i=i.filter(function(t){if(typeof t==="object"&&t!==null){if(t.constructor.toString().indexOf("Array")>-1){return t!==null}else{return t.value!==null}}else{return t!==null}});i.map(function(t){if(typeof t==="object"){if(t.constructor.toString().indexOf("Array")>-1){if(e.type=="candle"){t.map(function(t){r.push(t)})}else{r.push(t[0])}}else{r.push(t.value)}}else{r.push(t)}});var o=0;var n=0;if(r.length>0){o=Math.min.apply(this,r);n=Math.max.apply(this,r)}if(a>-1){if(typeof e.xAxis.data[a].min==="number"){o=Math.min(e.xAxis.data[a].min,o)}if(typeof e.xAxis.data[a].max==="number"){n=Math.max(e.xAxis.data[a].max,n)}}else{if(typeof e.xAxis.min==="number"){o=Math.min(e.xAxis.min,o)}if(typeof e.xAxis.max==="number"){n=Math.max(e.xAxis.max,n)}}if(o===n){var d=n||10;n+=d}var l=o;var x=n;var f=[];var p=(x-l)/e.xAxis.splitNumber;for(var s=0;s<=e.xAxis.splitNumber;s++){f.push(l+p*s)}return f}function calXAxisData(t,e,a,i){var r=assign({},{type:""},e.extra.bar);var o={angle:0,xAxisHeight:e.xAxis.lineHeight*e.pix+e.xAxis.marginTop*e.pix};o.ranges=getXAxisTextList(t,e,a,r.type);o.rangesFormat=o.ranges.map(function(t){t=util.toFixed(t,2);return t});var n=o.ranges.map(function(t){t=util.toFixed(t,2);return t});o=Object.assign(o,getXAxisPoints(n,e,a));var l=o.eachSpacing;var s=n.map(function(t){return measureText(t,e.xAxis.fontSize*e.pix,i)});if(e.xAxis.disabled===true){o.xAxisHeight=0}return o}function getRadarDataPoints(r,o,n,a,t){var l=arguments.length>5&&arguments[5]!==undefined?arguments[5]:1;var e=t.extra.radar||{};e.max=e.max||0;var s=Math.max(e.max,Math.max.apply(null,dataCombine(a)));var h=[];for(let e=0;e2&&arguments[2]!==undefined?arguments[2]:1;var o=0;var n=0;for(let e=0;e4&&arguments[4]!==undefined?arguments[4]:1;for(let t=0;t4&&arguments[4]!==undefined?arguments[4]:1;var l=0;var s=0;var h=[];for(let e=0;e2&&arguments[2]!==undefined?arguments[2]:1;if(o==1){o=.999999}for(let a=0;a=2){t._proportion_=t._proportion_%2}}return i}function getGaugeArcbarDataPoints(i,r){var o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;if(o==1){o=.999999}for(let a=0;a=2){t._proportion_=t._proportion_%2}}return i}function getGaugeAxisPoints(e,a,t){let i;if(t=2){e[t]._endAngle_=e[t]._endAngle_%2}r=e[t]._endAngle_}return e}function getGaugeDataPoints(i,r,o){let n=arguments.length>3&&arguments[3]!==undefined?arguments[3]:1;for(let a=0;a=o.oldData){e._proportion_=(e._endAngle_-e._oldAngle_)*n+o.oldAngle}else{e._proportion_=e._oldAngle_-(e._oldAngle_-e._endAngle_)*n}if(e._proportion_>=2){e._proportion_=e._proportion_%2}}return i}function getPieTextMaxLength(i,r,o,n){i=getPieDataPoints(i);let l=0;for(let a=0;a0){t.width=Math.min(t.width,+n.extra.mix.column.width*n.pix)}if(n.extra.column&&n.extra.column.width&&+n.extra.column.width>0){t.width=Math.min(t.width,+n.extra.column.width*n.pix)}if(t.width<=0){t.width=1}t.x+=(o+.5-r/2)*(t.width+e);return t})}function fixBarData(t,i,r,o,e,n){return t.map(function(t){if(t===null){return null}var e=0;var a=0;e=n.extra.bar.seriesGap*n.pix||0;a=n.extra.bar.categoryGap*n.pix||0;e=Math.min(e,i/r);a=Math.min(a,i/r);t.width=Math.ceil((i-2*a-e*(r-1))/r);if(n.extra.bar&&n.extra.bar.width&&+n.extra.bar.width>0){t.width=Math.min(t.width,+n.extra.bar.width*n.pix)}if(t.width<=0){t.width=1}t.y+=(o+.5-r/2)*(t.width+e);return t})}function fixColumeMeterData(t,e,a,i,r,o,n){var l=o.extra.column.categoryGap*o.pix||0;return t.map(function(t){if(t===null){return null}t.width=e-2*l;if(o.extra.column&&o.extra.column.width&&+o.extra.column.width>0){t.width=Math.min(t.width,+o.extra.column.width*o.pix)}if(i>0){t.width-=n}return t})}function fixColumeStackData(t,a,e,i,r,o,n){var l=o.extra.column.categoryGap*o.pix||0;return t.map(function(t,e){if(t===null){return null}t.width=Math.ceil(a-2*l);if(o.extra.column&&o.extra.column.width&&+o.extra.column.width>0){t.width=Math.min(t.width,+o.extra.column.width*o.pix)}if(t.width<=0){t.width=1}return t})}function fixBarStackData(t,a,e,i,r,o,n){var l=o.extra.bar.categoryGap*o.pix||0;return t.map(function(t,e){if(t===null){return null}t.width=Math.ceil(a-2*l);if(o.extra.bar&&o.extra.bar.width&&+o.extra.bar.width>0){t.width=Math.min(t.width,+o.extra.bar.width*o.pix)}if(t.width<=0){t.width=1}return t})}function getXAxisPoints(t,e,h){var a=e.width-e.area[1]-e.area[3];var i=e.enableScroll?Math.min(e.xAxis.itemCount,t.length):t.length;if((e.type=="line"||e.type=="area"||e.type=="scatter"||e.type=="bubble"||e.type=="bar")&&i>1&&e.xAxis.boundaryGap=="justify"){i-=1}var r=0;if(e.type=="mount"&&e.extra&&e.extra.mount&&e.extra.mount.widthRatio&&e.extra.mount.widthRatio>1){if(e.extra.mount.widthRatio>2)e.extra.mount.widthRatio=2;r=e.extra.mount.widthRatio-1;i+=r}var o=a/i;var n=[];var l=e.area[3];var s=e.width-e.area[1];t.forEach(function(t,e){n.push(l+r/2*o+e*o)});if(e.xAxis.boundaryGap!=="justify"){if(e.enableScroll===true){n.push(l+r*o+t.length*o)}else{n.push(s)}}return{xAxisPoints:n,startX:l,endX:s,eachSpacing:o}}function getCandleDataPoints(t,l,s,h,c,d,a){var x=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var e=[];var f=d.height-d.area[0]-d.area[2];t.forEach(function(t,o){if(t===null){e.push(null)}else{var n=[];t.forEach(function(t,e){var a={};a.x=h[o]+Math.round(c/2);var i=t.value||t;var r=f*(i-l)/(s-l);r*=x;a.y=d.height-Math.round(r)-d.area[2];n.push(a)});e.push(n)}});return e}function getDataPoints(t,a,n,l,s,h,e){var c=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var d="center";if(h.type=="line"||h.type=="area"||h.type=="scatter"||h.type=="bubble"){d=h.xAxis.boundaryGap}var x=[];var f=h.height-h.area[0]-h.area[2];var p=h.width-h.area[1]-h.area[3];t.forEach(function(i,t){if(i===null){x.push(null)}else{var r={};r.color=i.color;r.x=l[t];var o=i;if(typeof i==="object"&&i!==null){if(i.constructor.toString().indexOf("Array")>-1){let t,e,a;t=[].concat(h.chartData.xAxisData.ranges);e=t.shift();a=t.pop();o=i[1];r.x=h.area[3]+p*(i[0]-e)/(a-e);if(h.type=="bubble"){r.r=i[2];r.t=i[3]}}else{o=i.value}}if(d=="center"){r.x+=s/2}var e=f*(o-a)/(n-a);e*=c;r.y=h.height-e-h.area[2];x.push(r)}});return x}function getLineDataPoints(t,a,n,l,s,h,e,p,c){var c=arguments.length>8&&arguments[8]!==undefined?arguments[8]:1;var d=h.xAxis.boundaryGap;var x=[];var f=h.height-h.area[0]-h.area[2];var u=h.width-h.area[1]-h.area[3];t.forEach(function(i,t){if(i===null){x.push(null)}else{var r={};r.color=i.color;if(p.animation=="vertical"){r.x=l[t];var o=i;if(typeof i==="object"&&i!==null){if(i.constructor.toString().indexOf("Array")>-1){let t,e,a;t=[].concat(h.chartData.xAxisData.ranges);e=t.shift();a=t.pop();o=i[1];r.x=h.area[3]+u*(i[0]-e)/(a-e)}else{o=i.value}}if(d=="center"){r.x+=s/2}var e=f*(o-a)/(n-a);e*=c;r.y=h.height-e-h.area[2];x.push(r)}else{r.x=l[0]+s*t*c;var o=i;if(d=="center"){r.x+=s/2}var e=f*(o-a)/(n-a);r.y=h.height-e-h.area[2];x.push(r)}}});return x}function getColumnDataPoints(t,a,n,l,s,h,e,i,c){var c=arguments.length>8&&arguments[8]!==undefined?arguments[8]:1;var d=[];var x=h.height-h.area[0]-h.area[2];var f=h.width-h.area[1]-h.area[3];t.forEach(function(i,t){if(i===null){d.push(null)}else{var r={};r.color=i.color;r.x=l[t];var o=i;if(typeof i==="object"&&i!==null){if(i.constructor.toString().indexOf("Array")>-1){let t,e,a;t=[].concat(h.chartData.xAxisData.ranges);e=t.shift();a=t.pop();o=i[1];r.x=h.area[3]+f*(i[0]-e)/(a-e)}else{o=i.value}}r.x+=s/2;var e=x*(o*c-a)/(n-a);r.y=h.height-e-h.area[2];d.push(r)}});return d}function getMountDataPoints(t,o,n,l,s,h,e,a){var c=arguments.length>8&&arguments[8]!==undefined?arguments[8]:1;var d=[];var x=h.height-h.area[0]-h.area[2];var i=h.width-h.area[1]-h.area[3];var f=s*e.widthRatio;t.forEach(function(t,e){if(t===null){d.push(null)}else{var a={};a.color=t.color;a.x=l[e];a.x+=s/2;var i=t.data;var r=x*(i*c-o)/(n-o);a.y=h.height-r-h.area[2];a.value=i;a.width=f;d.push(a)}});return d}function getBarDataPoints(t,o,n,l,e,s,a){var h=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var c=[];var i=s.height-s.area[0]-s.area[2];var d=s.width-s.area[1]-s.area[3];t.forEach(function(t,e){if(t===null){c.push(null)}else{var a={};a.color=t.color;a.y=l[e];var i=t;if(typeof t==="object"&&t!==null){i=t.value}var r=d*(i-o)/(n-o);r*=h;a.height=r;a.value=i;a.x=r+s.area[3];c.push(a)}});return c}function getStackDataPoints(t,s,h,c,g,d,e,x,y){var f=arguments.length>9&&arguments[9]!==undefined?arguments[9]:1;var p=[];var u=d.height-d.area[0]-d.area[2];t.forEach(function(t,e){if(t===null){p.push(null)}else{var a={};a.color=t.color;a.x=c[e]+Math.round(g/2);if(x>0){var i=0;for(let t=0;t<=x;t++){i+=y[t].data[e]}var r=i-t;var o=u*(i-s)/(h-s);var n=u*(r-s)/(h-s)}else{var i=t;if(typeof t==="object"&&t!==null){i=t.value}var o=u*(i-s)/(h-s);var n=0}var l=n;o*=f;l*=f;a.y=d.height-Math.round(o)-d.area[2];a.y0=d.height-Math.round(l)-d.area[2];p.push(a)}});return p}function getBarStackDataPoints(t,s,h,c,e,d,a,x,g){var f=arguments.length>9&&arguments[9]!==undefined?arguments[9]:1;var p=[];var u=d.width-d.area[1]-d.area[3];t.forEach(function(t,e){if(t===null){p.push(null)}else{var a={};a.color=t.color;a.y=c[e];if(x>0){var i=0;for(let t=0;t<=x;t++){i+=g[t].data[e]}var r=i-t;var o=u*(i-s)/(h-s);var n=u*(r-s)/(h-s)}else{var i=t;if(typeof t==="object"&&t!==null){i=t.value}var o=u*(i-s)/(h-s);var n=0}var l=n;o*=f;l*=f;a.height=o-l;a.x=d.area[3]+o;a.x0=d.area[3]+l;p.push(a)}});return p}function getYAxisTextList(t,e,h,c,a){var d=arguments.length>5&&arguments[5]!==undefined?arguments[5]:-1;var i;if(c=="stack"){i=dataCombineStack(t,e.categories.length)}else{i=dataCombine(t)}var r=[];i=i.filter(function(t){if(typeof t==="object"&&t!==null){if(t.constructor.toString().indexOf("Array")>-1){return t!==null}else{return t.value!==null}}else{return t!==null}});i.map(function(t){if(typeof t==="object"){if(t.constructor.toString().indexOf("Array")>-1){if(e.type=="candle"){t.map(function(t){r.push(t)})}else{r.push(t[1])}}else{r.push(t.value)}}else{r.push(t)}});var o=a.min||0;var n=a.max||0;if(r.length>0){o=Math.min.apply(this,r);n=Math.max.apply(this,r)}if(o===n){if(n==0){n=10}else{o=0}}var l=getDataRange(o,n);var x=a.min===undefined||a.min===null?l.minRange:a.min;var f=a.max===undefined||a.max===null?l.maxRange:a.max;var p=(f-x)/e.yAxis.splitNumber;var u=[];for(var s=0;s<=e.yAxis.splitNumber;s++){u.push(x+p*s)}return u.reverse()}function calYAxisData(a,o,e,n){var l=assign({},{type:""},o.extra.column);var t=o.yAxis.data.length;var s=new Array(t);if(t>0){for(let e=0;e{return t+(i.unit||"")}}i.categories=i.categories||o.categories;h[r]=i.categories}else{if(!i.formatter){i.formatter=(t,e,a)=>{return util.toFixed(t,i.tofix||0)+(i.unit||"")}}h[r]=getYAxisTextList(s[r],o,e,l.type,i,r)}let a=i.fontSize*o.pix||e.fontSize;d[r]={position:i.position?i.position:"left",width:0};c[r]=h[r].map(function(t,e){t=i.formatter(t,e,o);d[r].width=Math.max(d[r].width,measureText(t,a,n)+5);return t});let t=i.calibration?4*o.pix:0;d[r].width+=t+3*o.pix;if(i.disabled===true){d[r].width=0}}}else{var h=new Array(1);var c=new Array(1);var d=new Array(1);if(o.type==="bar"){h[0]=o.categories;if(!o.yAxis.formatter){o.yAxis.formatter=(t,e,a)=>{return t+(a.yAxis.unit||"")}}}else{if(!o.yAxis.formatter){o.yAxis.formatter=(t,e,a)=>{return t.toFixed(a.yAxis.tofix)+(a.yAxis.unit||"")}}h[0]=getYAxisTextList(a,o,e,l.type,{})}d[0]={position:"left",width:0};var i=o.yAxis.fontSize*o.pix||e.fontSize;c[0]=h[0].map(function(t,e){t=o.yAxis.formatter(t,e,o);d[0].width=Math.max(d[0].width,measureText(t,i,n)+5);return t});d[0].width+=3*o.pix;if(o.yAxis.disabled===true){d[0]={position:"left",width:0};o.yAxis.data[0]={disabled:true}}else{o.yAxis.data[0]={disabled:false,position:"left",max:o.yAxis.max,min:o.yAxis.min,formatter:o.yAxis.formatter};if(o.type==="bar"){o.yAxis.data[0].categories=o.categories;o.yAxis.data[0].type="categories"}}}return{rangesFormat:c,ranges:h,yAxisWidth:d}}function calTooltipYAxisData(r,t,o,e,a){let n=[].concat(o.chartData.yAxisData.ranges);let l=o.height-o.area[0]-o.area[2];let s=o.area[0];let h=[];for(let i=0;i0&&r.tooltip.group.includes(n)==false){return}var l=typeof r.tooltip.index==="number"?r.tooltip.index:r.tooltip.index[r.tooltip.group.indexOf(n)];i.beginPath();if(o.activeType=="hollow"){i.setStrokeStyle(e);i.setFillStyle(r.background);i.setLineWidth(2*r.pix)}else{i.setStrokeStyle("#ffffff");i.setFillStyle(e);i.setLineWidth(1*r.pix)}if(a==="diamond"){t.forEach(function(t,e){if(t!==null&&l==e){i.moveTo(t.x,t.y-4.5);i.lineTo(t.x-4.5,t.y);i.lineTo(t.x,t.y+4.5);i.lineTo(t.x+4.5,t.y);i.lineTo(t.x,t.y-4.5)}})}else if(a==="circle"){t.forEach(function(t,e){if(t!==null&&l==e){i.moveTo(t.x+2.5*r.pix,t.y);i.arc(t.x,t.y,3*r.pix,0,2*Math.PI,false)}})}else if(a==="square"){t.forEach(function(t,e){if(t!==null&&l==e){i.moveTo(t.x-3.5,t.y-3.5);i.rect(t.x-3.5,t.y-3.5,7,7)}})}else if(a==="triangle"){t.forEach(function(t,e){if(t!==null&&l==e){i.moveTo(t.x,t.y-4.5);i.lineTo(t.x-4.5,t.y+4.5);i.lineTo(t.x+4.5,t.y+4.5);i.lineTo(t.x,t.y-4.5)}})}else if(a==="none"){return}i.closePath();i.fill();i.stroke()}function drawRingTitle(t,e,a,i){var r=t.title.fontSize||e.titleFontSize;var o=t.subtitle.fontSize||e.subtitleFontSize;var n=t.title.name||"";var l=t.subtitle.name||"";var c=t.title.color||t.fontColor;var d=t.subtitle.color||t.fontColor;var x=n?r:0;var f=l?o:0;var s=5;if(l){var p=measureText(l,o*t.pix,a);var u=i.x-p/2+(t.subtitle.offsetX||0)*t.pix;var h=i.y+o*t.pix/2+(t.subtitle.offsetY||0)*t.pix;if(n){h+=(x*t.pix+s)/2}a.beginPath();a.setFontSize(o*t.pix);a.setFillStyle(d);a.fillText(l,u,h);a.closePath();a.stroke()}if(n){var g=measureText(n,r*t.pix,a);var y=i.x-g/2+(t.title.offsetX||0);var v=i.y+r*t.pix/2+(t.title.offsetY||0)*t.pix;if(l){v-=(f*t.pix+s)/2}a.beginPath();a.setFontSize(r*t.pix);a.setFillStyle(c);a.fillText(n,y,v);a.closePath();a.stroke()}}function drawPointText(t,o,n,l,s){var h=o.data;var c=o.textOffset?o.textOffset:0;t.forEach(function(t,e){if(t!==null){l.beginPath();var a=o.textSize?o.textSize*s.pix:n.fontSize;l.setFontSize(a);l.setFillStyle(o.textColor||s.fontColor);var i=h[e];if(typeof h[e]==="object"&&h[e]!==null){if(h[e].constructor.toString().indexOf("Array")>-1){i=h[e][1]}else{i=h[e].value}}var r=o.formatter?o.formatter(i,e,o,s):i;l.setTextAlign("center");l.fillText(String(r),t.x,t.y-4+c*s.pix);l.closePath();l.stroke();l.setTextAlign("left")}})}function drawColumePointText(t,n,l,s,h){var c=n.data;var d=n.textOffset?n.textOffset:0;var x=h.extra.column.labelPosition;t.forEach(function(t,e){if(t!==null){s.beginPath();var a=n.textSize?n.textSize*h.pix:l.fontSize;s.setFontSize(a);s.setFillStyle(n.textColor||h.fontColor);var i=c[e];if(typeof c[e]==="object"&&c[e]!==null){if(c[e].constructor.toString().indexOf("Array")>-1){i=c[e][1]}else{i=c[e].value}}var r=n.formatter?n.formatter(i,e,n,h):i;s.setTextAlign("center");var o=t.y-4*h.pix+d*h.pix;if(t.y>n.zeroPoints){o=t.y+d*h.pix+a}if(x=="insideTop"){o=t.y+a+d*h.pix;if(t.y>n.zeroPoints){o=t.y-d*h.pix-4*h.pix}}if(x=="center"){o=t.y+d*h.pix+(h.height-h.area[2]-t.y+a)/2;if(n.zeroPointsn.zeroPoints){o=t.y-d*h.pix-(t.y-n.zeroPoints-a)/2}if(h.extra.column.type=="stack"){o=t.y+d*h.pix+(t.y0-t.y+a)/2}}if(x=="bottom"){o=h.height-h.area[2]+d*h.pix-4*h.pix;if(n.zeroPointsn.zeroPoints){o=n.zeroPoints-d*h.pix+a+2*h.pix}if(h.extra.column.type=="stack"){o=t.y0+d*h.pix-4*h.pix}}s.fillText(String(r),t.x,o);s.closePath();s.stroke();s.setTextAlign("left")}})}function drawMountPointText(t,n,l,s,h,c){var e=n.data;var d=n.textOffset?n.textOffset:0;var a=h.extra.mount.labelPosition;t.forEach(function(t,e){if(t!==null){s.beginPath();var a=n[e].textSize?n[e].textSize*h.pix:l.fontSize;s.setFontSize(a);s.setFillStyle(n[e].textColor||h.fontColor);var i=t.value;var r=n[e].formatter?n[e].formatter(i,e,n,h):i;s.setTextAlign("center");var o=t.y-4*h.pix+d*h.pix;if(t.y>c){o=t.y+d*h.pix+a}s.fillText(String(r),t.x,o);s.closePath();s.stroke();s.setTextAlign("left")}})}function drawBarPointText(t,o,n,l,s){var h=o.data;var e=o.textOffset?o.textOffset:0;t.forEach(function(t,e){if(t!==null){l.beginPath();var a=o.textSize?o.textSize*s.pix:n.fontSize;l.setFontSize(a);l.setFillStyle(o.textColor||s.fontColor);var i=h[e];if(typeof h[e]==="object"&&h[e]!==null){i=h[e].value}var r=o.formatter?o.formatter(i,e,o,s):i;l.setTextAlign("left");l.fillText(String(r),t.x+4*s.pix,t.y+a/2-3);l.closePath();l.stroke()}})}function drawGaugeLabel(e,a,i,r,o,n){a-=e.width/2+e.labelOffset*r.pix;a=a<10?10:a;let t;if(e.endAngle=2){l=l%2}s+=x}}function drawRadarLabel(t,s,h,c,d,x){var f=c.extra.radar||{};t.forEach(function(t,e){if(f.labelPointShow===true&&c.categories[e]!==""){var a={x:s*Math.cos(t),y:s*Math.sin(t)};var i=convertCoordinateOrigin(a.x,a.y,h);x.setFillStyle(f.labelPointColor);x.beginPath();x.arc(i.x,i.y,f.labelPointRadius*c.pix,0,2*Math.PI,false);x.closePath();x.fill()}if(f.labelShow===true){var r={x:(s+d.radarLabelTextMargin*c.pix)*Math.cos(t),y:(s+d.radarLabelTextMargin*c.pix)*Math.sin(t)};var o=convertCoordinateOrigin(r.x,r.y,h);var n=o.x;var l=o.y;if(util.approximatelyEqual(r.x,0)){n-=measureText(c.categories[e]||"",d.fontSize,x)/2}else if(r.x<0){n-=measureText(c.categories[e]||"",d.fontSize,x)}x.beginPath();x.setFontSize(d.fontSize);x.setFillStyle(f.labelColor||c.fontColor);x.fillText(c.categories[e]||"",n,l+d.fontSize/2);x.closePath();x.stroke()}})}function drawPieText(n,d,x,f,t,l){var p=x.pieChartLinePadding;var u=[];var g=null;var y=n.map(function(t,e){var a=t.formatter?t.formatter(t,e,n,d):util.toFixed(t._proportion_.toFixed(4)*100)+"%";a=t.labelText?t.labelText:a;var i=2*Math.PI-(t._start_+2*Math.PI*t._proportion_/2);if(t._rose_proportion_){i=2*Math.PI-(t._start_+2*Math.PI*t._rose_proportion_/2)}var r=t.color;var o=t._radius_;return{arc:i,text:a,color:r,radius:o,textColor:t.textColor,textSize:t.textSize,labelShow:t.labelShow}});for(let c=0;c=0?e+x.pieChartTextPadding:e-x.pieChartTextPadding;let n=a;let l=measureText(t.text,t.textSize*d.pix||x.fontSize,f);let s=n;if(g&&util.isSameXCoordinateArea(g.start,{x:o})){if(o>0){s=Math.min(n,g.start.y)}else if(e<0){s=Math.max(n,g.start.y)}else{if(n>0){s=Math.max(n,g.start.y)}else{s=Math.min(n,g.start.y)}}}if(o<0){o-=l}let h={lineStart:{x:i,y:r},lineEnd:{x:e,y:a},start:{x:o,y:s},width:l,height:x.fontSize,text:t.text,color:t.color,textColor:t.textColor,textSize:t.textSize};g=avoidCollision(h,g);u.push(g)}for(let n=0;nr?r:o.activeWidth;var n=e.area[0];var l=e.height-e.area[2];i.beginPath();i.setFillStyle(hexToRgb(o.activeBgColor,o.activeBgOpacity));i.rect(t-o.activeWidth/2,n,o.activeWidth,l-n);i.closePath();i.fill();i.setFillStyle("#FFFFFF")}function drawBarToolTipSplitArea(t,e,a,i,r){var o=assign({},{activeBgColor:"#000000",activeBgOpacity:.08},e.extra.bar);var n=e.area[3];var l=e.width-e.area[1];i.beginPath();i.setFillStyle(hexToRgb(o.activeBgColor,o.activeBgOpacity));i.rect(n,t-r/2,l-n,r);i.closePath();i.fill();i.setFillStyle("#FFFFFF")}function drawToolTip(e,r,o,a,n,i,f){var l=assign({},{showBox:true,showArrow:true,showCategory:false,bgColor:"#000000",bgOpacity:.7,borderColor:"#000000",borderWidth:0,borderRadius:0,borderOpacity:.7,boxPadding:3,fontColor:"#FFFFFF",fontSize:13,lineHeight:20,legendShow:true,legendShape:"auto",splitLine:true},o.extra.tooltip);if(l.showCategory==true&&o.categories){e.unshift({text:o.categories[o.tooltip.index],color:null})}var s=l.fontSize*o.pix;var p=l.lineHeight*o.pix;var h=l.boxPadding*o.pix;var c=s;var u=5*o.pix;if(l.legendShow==false){c=0;u=0}var d=l.showArrow?8*o.pix:0;var g=false;if(o.type=="line"||o.type=="mount"||o.type=="area"||o.type=="candle"||o.type=="mix"){if(l.splitLine==true){drawToolTipSplitLine(o.tooltip.offset.x,o,a,n)}}r=assign({x:0,y:0},r);r.y-=8*o.pix;var y=e.map(function(t){return measureText(t.text,s,n)});var x=c+u+4*h+Math.max.apply(null,y);var v=2*h+e.length*p;if(l.showBox==false){return}if(r.x-Math.abs(o._scrollDistance_||0)+d+x>o.width){g=true}if(v+r.y>o.height){r.y=o.height-v}n.beginPath();n.setFillStyle(hexToRgb(l.bgColor,l.bgOpacity));n.setLineWidth(l.borderWidth*o.pix);n.setStrokeStyle(hexToRgb(l.borderColor,l.borderOpacity));var t=l.borderRadius;if(g){if(x+d>o.width){r.x=o.width+Math.abs(o._scrollDistance_||0)+d+(x-o.width)}if(x>r.x){r.x=o.width+Math.abs(o._scrollDistance_||0)+d+(x-o.width)}if(l.showArrow){n.moveTo(r.x,r.y+10*o.pix);n.lineTo(r.x-d,r.y+10*o.pix+5*o.pix)}n.arc(r.x-d-t,r.y+v-t,t,0,Math.PI/2,false);n.arc(r.x-d-Math.round(x)+t,r.y+v-t,t,Math.PI/2,Math.PI,false);n.arc(r.x-d-Math.round(x)+t,r.y+t,t,-Math.PI,-Math.PI/2,false);n.arc(r.x-d-t,r.y+t,t,-Math.PI/2,0,false);if(l.showArrow){n.lineTo(r.x-d,r.y+10*o.pix-5*o.pix);n.lineTo(r.x,r.y+10*o.pix)}}else{if(l.showArrow){n.moveTo(r.x,r.y+10*o.pix);n.lineTo(r.x+d,r.y+10*o.pix-5*o.pix)}n.arc(r.x+d+t,r.y+t,t,-Math.PI,-Math.PI/2,false);n.arc(r.x+d+Math.round(x)-t,r.y+t,t,-Math.PI/2,0,false);n.arc(r.x+d+Math.round(x)-t,r.y+v-t,t,0,Math.PI/2,false);n.arc(r.x+d+t,r.y+v-t,t,Math.PI/2,Math.PI,false);if(l.showArrow){n.lineTo(r.x+d,r.y+10*o.pix+5*o.pix);n.lineTo(r.x,r.y+10*o.pix)}}n.closePath();n.fill();if(l.borderWidth>0){n.stroke()}if(l.legendShow){e.forEach(function(t,e){if(t.color!==null){n.beginPath();n.setFillStyle(t.color);var a=r.x+d+2*h;var i=r.y+(p-s)/2+p*e+h+1;if(g){a=r.x-x-d+2*h}switch(t.legendShape){case"line":n.moveTo(a,i+.5*c-2*o.pix);n.fillRect(a,i+.5*c-2*o.pix,c,4*o.pix);break;case"triangle":n.moveTo(a+7.5*o.pix,i+.5*c-5*o.pix);n.lineTo(a+2.5*o.pix,i+.5*c+5*o.pix);n.lineTo(a+12.5*o.pix,i+.5*c+5*o.pix);n.lineTo(a+7.5*o.pix,i+.5*c-5*o.pix);break;case"diamond":n.moveTo(a+7.5*o.pix,i+.5*c-5*o.pix);n.lineTo(a+2.5*o.pix,i+.5*c);n.lineTo(a+7.5*o.pix,i+.5*c+5*o.pix);n.lineTo(a+12.5*o.pix,i+.5*c);n.lineTo(a+7.5*o.pix,i+.5*c-5*o.pix);break;case"circle":n.moveTo(a+7.5*o.pix,i+.5*c);n.arc(a+7.5*o.pix,i+.5*c,5*o.pix,0,2*Math.PI);break;case"rect":n.moveTo(a,i+.5*c-5*o.pix);n.fillRect(a,i+.5*c-5*o.pix,15*o.pix,10*o.pix);break;case"square":n.moveTo(a+2*o.pix,i+.5*c-5*o.pix);n.fillRect(a+2*o.pix,i+.5*c-5*o.pix,10*o.pix,10*o.pix);break;default:n.moveTo(a,i+.5*c-5*o.pix);n.fillRect(a,i+.5*c-5*o.pix,15*o.pix,10*o.pix)}n.closePath();n.fill()}})}e.forEach(function(t,e){var a=r.x+d+2*h+c+u;if(g){a=r.x-x-d+2*h+c+u}var i=r.y+p*e+(p-s)/2-1+h+s;n.beginPath();n.setFontSize(s);n.setTextBaseline("normal");n.setFillStyle(l.fontColor);n.fillText(t.text,a,i);n.closePath();n.stroke()})}function drawColumnDataPoints(T,b,S,w){let A=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let t=b.chartData.xAxisData,P=t.xAxisPoints,C=t.eachSpacing;let D=assign({},{type:"group",width:C/2,meterBorder:4,meterFillColor:"#FFFFFF",barBorderCircle:false,barBorderRadius:[],seriesGap:2,linearType:"none",linearOpacity:1,customColor:[],colorStop:0,labelPosition:"outside"},b.extra.column);let M=[];w.save();let L=-2;let F=P.length+2;if(b._scrollDistance_&&b._scrollDistance_!==0&&b.enableScroll===true){w.translate(b._scrollDistance_,0);L=Math.floor(-b._scrollDistance_/C)-2;F=L+b.xAxis.itemCount+4}if(b.tooltip&&b.tooltip.textList&&b.tooltip.textList.length&&A===1){drawToolTipSplitArea(b.tooltip.offset.x,b,S,w,C)}D.customColor=fillCustomColor(D.linearType,D.customColor,T,S);T.forEach(function(a,i){let e,t,o;e=[].concat(b.chartData.yAxisData.ranges[a.index]);t=e.pop();o=e.shift();let x=b.height-b.area[0]-b.area[2];let f=x*(0-t)/(o-t);let n=b.height-Math.round(f)-b.area[2];a.zeroPoints=n;var p=a.data;switch(D.type){case"group":var r=getColumnDataPoints(p,t,o,P,C,b,S,n,A);var u=getStackDataPoints(p,t,o,P,C,b,S,i,T,A);M.push(u);r=fixColumeData(r,C,T.length,i,S,b);for(let t=0;tL&&tn?n:o.y;const d=o.width;const s=Math.abs(n-o.y);if(D.barBorderCircle){D.barBorderRadius=[d/2,d/2,0,0]}if(o.y>n){D.barBorderRadius=[0,0,d/2,d/2]}let[t,e,a,i]=D.barBorderRadius;let r=Math.min(d/2,s/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;w.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);w.arc(h+d-e,c+e,e,-Math.PI/2,0);w.arc(h+d-a,c+s-a,a,0,Math.PI/2);w.arc(h+i,c+s-i,i,Math.PI/2,Math.PI)}else{w.moveTo(l,o.y);w.lineTo(l+o.width,o.y);w.lineTo(l+o.width,n);w.lineTo(l,n);w.lineTo(l,o.y);w.setLineWidth(1);w.setStrokeStyle(y)}w.setFillStyle(g);w.closePath();w.fill()}};break;case"stack":var r=getStackDataPoints(p,t,o,P,C,b,S,i,T,A);M.push(r);r=fixColumeStackData(r,C,T.length,i,S,b,T);for(let e=0;eL&&e0){s-=m}w.setFillStyle(g);w.moveTo(l,t.y);w.fillRect(l,t.y,t.width,s);w.closePath();w.fill()}};break;case"meter":var r=getDataPoints(p,t,o,P,C,b,S,A);M.push(r);r=fixColumeMeterData(r,C,T.length,i,S,b,D.meterBorder);for(let t=0;tL&&t0){w.setStrokeStyle(a.color);w.setLineWidth(D.meterBorder*b.pix)}if(i==0){w.setFillStyle(D.meterFillColor)}else{w.setFillStyle(o.color||a.color)}var l=o.x-o.width/2;var s=b.height-o.y-b.area[2];if(D.barBorderRadius&&D.barBorderRadius.length===4||D.barBorderCircle===true){const h=l;const c=o.y;const d=o.width;const s=n-o.y;if(D.barBorderCircle){D.barBorderRadius=[d/2,d/2,0,0]}let[t,e,a,i]=D.barBorderRadius;let r=Math.min(d/2,s/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;w.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);w.arc(h+d-e,c+e,e,-Math.PI/2,0);w.arc(h+d-a,c+s-a,a,0,Math.PI/2);w.arc(h+i,c+s-i,i,Math.PI/2,Math.PI);w.fill()}else{w.moveTo(l,o.y);w.lineTo(l+o.width,o.y);w.lineTo(l+o.width,n);w.lineTo(l,n);w.lineTo(l,o.y);w.fill()}if(i==0&&D.meterBorder>0){w.closePath();w.stroke()}}}break}});if(b.dataLabel!==false&&A===1){T.forEach(function(t,e){let a,i,r;a=[].concat(b.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;switch(D.type){case"group":var n=getColumnDataPoints(o,i,r,P,C,b,S,A);n=fixColumeData(n,C,T.length,e,S,b);drawColumePointText(n,t,S,w,b);break;case"stack":var n=getStackDataPoints(o,i,r,P,C,b,S,e,T,A);drawColumePointText(n,t,S,w,b);break;case"meter":var n=getDataPoints(o,i,r,P,C,b,S,A);drawColumePointText(n,t,S,w,b);break}})}w.restore();return{xAxisPoints:P,calPoints:M,eachSpacing:C}}function drawMountDataPoints(i,r,o,n){let f=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let t=r.chartData.xAxisData,p=t.xAxisPoints,l=t.eachSpacing;let s=assign({},{type:"mount",widthRatio:1,borderWidth:1,barBorderCircle:false,barBorderRadius:[],linearType:"none",linearOpacity:1,customColor:[],colorStop:0},r.extra.mount);s.widthRatio=s.widthRatio<=0?0:s.widthRatio;s.widthRatio=s.widthRatio>=2?2:s.widthRatio;let e=[];n.save();let u=-2;let g=p.length+2;if(r._scrollDistance_&&r._scrollDistance_!==0&&r.enableScroll===true){n.translate(r._scrollDistance_,0);u=Math.floor(-r._scrollDistance_/l)-2;g=u+r.xAxis.itemCount+4}s.customColor=fillCustomColor(s.linearType,s.customColor,i,o);let y,v,m;y=[].concat(r.chartData.yAxisData.ranges[0]);v=y.pop();m=y.shift();let T=r.height-r.area[0]-r.area[2];let b=T*(0-v)/(m-v);let h=r.height-Math.round(b)-r.area[2];var c=getMountDataPoints(i,v,m,p,l,r,s,h,f);switch(s.type){case"bar":for(let t=0;tu&&th?h:o.y;const C=o.width;const S=Math.abs(h-o.y);if(s.barBorderCircle){s.barBorderRadius=[C/2,C/2,0,0]}if(o.y>h){s.barBorderRadius=[0,0,C/2,C/2]}let[t,e,a,i]=s.barBorderRadius;let r=Math.min(C/2,S/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;n.arc(A+t,P+t,t,-Math.PI,-Math.PI/2);n.arc(A+C-e,P+e,e,-Math.PI/2,0);n.arc(A+C-a,P+S-a,a,0,Math.PI/2);n.arc(A+i,P+S-i,i,Math.PI/2,Math.PI)}else{n.moveTo(d,o.y);n.lineTo(d+o.width,o.y);n.lineTo(d+o.width,h);n.lineTo(d,h);n.lineTo(d,o.y)}n.setStrokeStyle(w);n.setFillStyle(a);if(s.borderWidth>0){n.setLineWidth(s.borderWidth*r.pix);n.closePath();n.stroke()}n.fill()}};break;case"triangle":for(let e=0;eu&&e0){n.setLineWidth(s.borderWidth*r.pix);n.stroke()}n.fill()}};break;case"mount":for(let e=0;eu&&e0){n.setLineWidth(s.borderWidth*r.pix);n.stroke()}n.fill()}};break;case"sharp":for(let e=0;eu&&e0){n.setLineWidth(s.borderWidth*r.pix);n.stroke()}n.fill()}};break}if(r.dataLabel!==false&&f===1){let t,e,a;t=[].concat(r.chartData.yAxisData.ranges[0]);e=t.pop();a=t.shift();var c=getMountDataPoints(i,e,a,p,l,r,s,h,f);drawMountPointText(c,i,o,n,r,h)}n.restore();return{xAxisPoints:p,calPoints:c,eachSpacing:l}}function drawBarDataPoints(y,v,m,T){let b=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let S=[];let w=(v.height-v.area[0]-v.area[2])/v.categories.length;for(let t=0;tC&&tr?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(g+i,c+i,i,-Math.PI,-Math.PI/2);T.arc(o.x-t,c+t,t,-Math.PI/2,0);T.arc(o.x-e,c+h-e,e,0,Math.PI/2);T.arc(g+a,c+h-a,a,Math.PI/2,Math.PI)}else{T.moveTo(n,r);T.lineTo(o.x,r);T.lineTo(o.x,r+o.width);T.lineTo(n,r+o.width);T.lineTo(n,r);T.setLineWidth(1);T.setStrokeStyle(u)}T.setFillStyle(l);T.closePath();T.fill()}};break;case"stack":var i=getBarStackDataPoints(x,e,d,S,w,v,m,t,y,b);P.push(i);i=fixBarStackData(i,w,y.length,t,m,v,y);for(let e=0;eC&&e5&&arguments[5]!==undefined?arguments[5]:1;var s=assign({},{color:{},average:{}},h.extra.candle);s.color=assign({},{upLine:"#f04864",upFill:"#f04864",downLine:"#2fc25b",downFill:"#2fc25b"},s.color);s.average=assign({},{show:false,name:[],day:[],color:c.color},s.average);h.extra.candle=s;let a=h.chartData.xAxisData,x=a.xAxisPoints,f=a.eachSpacing;let y=[];d.save();let p=-2;let v=x.length+2;let u=0;let m=h.width+f;if(h._scrollDistance_&&h._scrollDistance_!==0&&h.enableScroll===true){d.translate(h._scrollDistance_,0);p=Math.floor(-h._scrollDistance_/f)-2;v=p+h.xAxis.itemCount+4;u=-h._scrollDistance_-f*2+h.area[3];m=u+(h.xAxis.itemCount+4)*f}if(s.average.show||t){t.forEach(function(e,t){let a,i,r;a=[].concat(h.chartData.yAxisData.ranges[e.index]);i=a.pop();r=a.shift();var o=e.data;var n=getDataPoints(o,i,r,x,f,h,c,g);var l=splitPoints(n,e);for(let t=0;tu){d.moveTo(t.x,t.y);a=1}if(e>0&&t.x>u&&t.xp&&e0){d.setStrokeStyle(s.color.upLine);d.setFillStyle(s.color.upFill);d.setLineWidth(1*h.pix);d.moveTo(t[3].x,t[3].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[1].x-f/4,t[1].y);d.lineTo(t[0].x-f/4,t[0].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[2].x,t[2].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[0].x+f/4,t[0].y);d.lineTo(t[1].x+f/4,t[1].y);d.lineTo(t[1].x,t[1].y);d.moveTo(t[3].x,t[3].y)}else{d.setStrokeStyle(s.color.downLine);d.setFillStyle(s.color.downFill);d.setLineWidth(1*h.pix);d.moveTo(t[3].x,t[3].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[0].x-f/4,t[0].y);d.lineTo(t[1].x-f/4,t[1].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[2].x,t[2].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[1].x+f/4,t[1].y);d.lineTo(t[0].x+f/4,t[0].y);d.lineTo(t[0].x,t[0].y);d.moveTo(t[3].x,t[3].y)}d.closePath();d.fill();d.stroke()}}});d.restore();return{xAxisPoints:x,calPoints:y,eachSpacing:f}}function drawAreaDataPoints(t,s,h,c){var d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var x=assign({},{type:"straight",opacity:.2,addLine:false,width:2,gradient:false,activeType:"none"},s.extra.area);let e=s.chartData.xAxisData,f=e.xAxisPoints,p=e.eachSpacing;let y=s.height-s.area[2];let v=[];c.save();let u=0;let g=s.width+p;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);u=-s._scrollDistance_-p*2+s.area[3];g=u+(s.xAxis.itemCount+4)*p}t.forEach(function(e,t){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[e.index]);i=a.pop();r=a.shift();let o=e.data;let n=getDataPoints(o,i,r,f,p,s,h,d);v.push(n);let l=splitPoints(n,e);for(let t=0;t1){let t=r[0];let e=r[r.length-1];c.moveTo(t.x,t.y);let i=0;if(x.type==="curve"){for(let a=0;au){c.moveTo(e.x,e.y);i=1}if(a>0&&e.x>u&&e.xu){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>u&&t.xu){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>u&&t.xu){c.moveTo(e.x,e.y);i=1}if(a>0&&e.x>u&&e.xu){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>u&&t.xu){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>u&&t.x4&&arguments[4]!==undefined?arguments[4]:1;var i=assign({},{type:"circle"},s.extra.scatter);let e=s.chartData.xAxisData,x=e.xAxisPoints,f=e.eachSpacing;var r=[];c.save();let a=0;let o=s.width+f;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);a=-s._scrollDistance_-f*2+s.area[3];o=a+(s.xAxis.itemCount+4)*f}t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,x,f,s,h,d);c.beginPath();c.setStrokeStyle(t.color);c.setFillStyle(t.color);c.setLineWidth(1*s.pix);var l=t.pointShape;if(l==="diamond"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x,t.y-4.5);c.lineTo(t.x-4.5,t.y);c.lineTo(t.x,t.y+4.5);c.lineTo(t.x+4.5,t.y);c.lineTo(t.x,t.y-4.5)}})}else if(l==="circle"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x+2.5*s.pix,t.y);c.arc(t.x,t.y,3*s.pix,0,2*Math.PI,false)}})}else if(l==="square"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x-3.5,t.y-3.5);c.rect(t.x-3.5,t.y-3.5,7,7)}})}else if(l==="triangle"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x,t.y-4.5);c.lineTo(t.x-4.5,t.y+4.5);c.lineTo(t.x+4.5,t.y+4.5);c.lineTo(t.x,t.y-4.5)}})}else if(l==="triangle"){return}c.closePath();c.fill();c.stroke()});if(s.dataLabel!==false&&d===1){t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,x,f,s,h,d);drawPointText(n,t,h,c,s)})}c.restore();return{xAxisPoints:x,calPoints:r,eachSpacing:f}}function drawBubbleDataPoints(a,l,s,h){var c=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var d=assign({},{opacity:1,border:2},l.extra.bubble);let t=l.chartData.xAxisData,x=t.xAxisPoints,f=t.eachSpacing;var i=[];h.save();let e=0;let r=l.width+f;if(l._scrollDistance_&&l._scrollDistance_!==0&&l.enableScroll===true){h.translate(l._scrollDistance_,0);e=-l._scrollDistance_-f*2+l.area[3];r=e+(l.xAxis.itemCount+4)*f}a.forEach(function(i,t){let e,a,r;e=[].concat(l.chartData.yAxisData.ranges[i.index]);a=e.pop();r=e.shift();var o=i.data;var n=getDataPoints(o,a,r,x,f,l,s,c);h.beginPath();h.setStrokeStyle(i.color);h.setLineWidth(d.border*l.pix);h.setFillStyle(hexToRgb(i.color,d.opacity));n.forEach(function(t,e){h.moveTo(t.x+t.r,t.y);h.arc(t.x,t.y,t.r*l.pix,0,2*Math.PI,false)});h.closePath();h.fill();h.stroke();if(l.dataLabel!==false&&c===1){n.forEach(function(t,e){h.beginPath();var a=i.textSize*l.pix||s.fontSize;h.setFontSize(a);h.setFillStyle(i.textColor||"#FFFFFF");h.setTextAlign("center");h.fillText(String(t.t),t.x,t.y+a/2);h.closePath();h.stroke();h.setTextAlign("left")})}});h.restore();return{xAxisPoints:x,calPoints:i,eachSpacing:f}}function drawLineDataPoints(t,d,x,f){var p=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var u=assign({},{type:"straight",width:2,activeType:"none",linearType:"none",onShadow:false,animation:"vertical"},d.extra.line);u.width*=d.pix;let e=d.chartData.xAxisData,g=e.xAxisPoints,y=e.eachSpacing;var T=[];f.save();let v=0;let m=d.width+y;if(d._scrollDistance_&&d._scrollDistance_!==0&&d.enableScroll===true){f.translate(d._scrollDistance_,0);v=-d._scrollDistance_-y*2+d.area[3];m=v+(d.xAxis.itemCount+4)*y}t.forEach(function(e,c){f.beginPath();f.setStrokeStyle(e.color);f.moveTo(-1e4,-1e4);f.lineTo(-10001,-10001);f.stroke();let t,a,i;t=[].concat(d.chartData.yAxisData.ranges[e.index]);a=t.pop();i=t.shift();var r=e.data;var o=getLineDataPoints(r,a,i,g,y,d,x,u,p);T.push(o);var n=splitPoints(o,e);if(e.lineType=="dash"){let t=e.dashLength?e.dashLength:8;t*=d.pix;f.setLineDash([t,t])}f.beginPath();var l=e.color;if(u.linearType!=="none"&&e.linearColor&&e.linearColor.length>0){var s=f.createLinearGradient(d.chartData.xAxisData.startX,d.height/2,d.chartData.xAxisData.endX,d.height/2);for(var h=0;h0){f.setShadow(e.setShadow[0],e.setShadow[1],e.setShadow[2],e.setShadow[3])}else{f.setShadow(0,0,0,"rgba(0,0,0,0)")}f.setLineWidth(u.width);n.forEach(function(i,t){if(i.length===1){f.moveTo(i[0].x,i[0].y)}else{f.moveTo(i[0].x,i[0].y);let a=0;if(u.type==="curve"){for(let e=0;ev){f.moveTo(t.x,t.y);a=1}if(e>0&&t.x>v&&t.xv){f.moveTo(t.x,t.y);a=1}if(e>0&&t.x>v&&t.xv){f.moveTo(t.x,t.y);a=1}if(e>0&&t.x>v&&t.x4&&arguments[4]!==undefined?arguments[4]:1;let e=v.chartData.xAxisData,b=e.xAxisPoints,S=e.eachSpacing;let w=assign({},{width:S/2,barBorderCircle:false,barBorderRadius:[],seriesGap:2,linearType:"none",linearOpacity:1,customColor:[],colorStop:0},v.extra.mix.column);let A=assign({},{opacity:.2,gradient:false},v.extra.mix.area);let M=assign({},{width:2},v.extra.mix.line);let L=v.height-v.area[2];let F=[];var _=0;var k=0;t.forEach(function(t,e){if(t.type=="column"){k+=1}});T.save();let R=-2;let I=b.length+2;let P=0;let C=v.width+S;if(v._scrollDistance_&&v._scrollDistance_!==0&&v.enableScroll===true){T.translate(v._scrollDistance_,0);R=Math.floor(-v._scrollDistance_/S)-2;I=R+v.xAxis.itemCount+4;P=-v._scrollDistance_-S*2+v.area[3];C=P+(v.xAxis.itemCount+4)*S}w.customColor=fillCustomColor(w.linearType,w.customColor,t,m);t.forEach(function(n,t){let o,x,f;o=[].concat(v.chartData.yAxisData.ranges[n.index]);x=o.pop();f=o.shift();var p=n.data;var a=getDataPoints(p,x,f,b,S,v,m,D);F.push(a);if(n.type=="column"){a=fixColumeData(a,S,k,_,m,v);for(let t=0;tR&&tr?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);T.arc(h+d-e,c+e,e,-Math.PI/2,0);T.arc(h+d-a,c+s-a,a,0,Math.PI/2);T.arc(h+i,c+s-i,i,Math.PI/2,Math.PI)}else{T.moveTo(l,o.y);T.lineTo(l+o.width,o.y);T.lineTo(l+o.width,v.height-v.area[2]);T.lineTo(l,v.height-v.area[2]);T.lineTo(l,o.y);T.setLineWidth(1);T.setStrokeStyle(u)}T.setFillStyle(e);T.closePath();T.fill()}}_+=1}if(n.type=="area"){let e=splitPoints(a,n);for(let t=0;t1){var r=i[0];let t=i[i.length-1];T.moveTo(r.x,r.y);let a=0;if(n.style==="curve"){for(let e=0;eP){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>P&&t.xP){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>P&&t.xP){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>P&&t.xP){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>P&&t.x1){if(h.extra.mount.widthRatio>2)h.extra.mount.widthRatio=2;l+=(h.extra.mount.widthRatio-1)*f}var s=n*n/l;var y=0;if(h._scrollDistance_){y=-h._scrollDistance_*n/l}d.beginPath();d.setLineCap("round");d.setLineWidth(6*h.pix);d.setStrokeStyle(h.xAxis.scrollBackgroundColor||"#EFEBEF");d.moveTo(t,o);d.lineTo(a,o);d.stroke();d.closePath();d.beginPath();d.setLineCap("round");d.setLineWidth(6*h.pix);d.setStrokeStyle(h.xAxis.scrollColor||"#A6A6A6");d.moveTo(t+y,o);d.lineTo(t+y+s,o);d.stroke();d.closePath();d.setLineCap("butt")}d.save();if(h._scrollDistance_&&h._scrollDistance_!==0){d.translate(h._scrollDistance_,0)}if(h.xAxis.calibration===true){d.setStrokeStyle(h.xAxis.gridColor||"#cccccc");d.setLineCap("butt");d.setLineWidth(1*h.pix);x.forEach(function(t,e){if(e>0){d.beginPath();d.moveTo(t-f/2,u);d.lineTo(t-f/2,u+3*h.pix);d.closePath();d.stroke()}})}if(h.xAxis.disableGrid!==true){d.setStrokeStyle(h.xAxis.gridColor||"#cccccc");d.setLineCap("butt");d.setLineWidth(1*h.pix);if(h.xAxis.gridType=="dash"){d.setLineDash([h.xAxis.dashLength*h.pix,h.xAxis.dashLength*h.pix])}h.xAxis.gridEval=h.xAxis.gridEval||1;x.forEach(function(t,e){if(e%h.xAxis.gridEval==0){d.beginPath();d.moveTo(t,u);d.lineTo(t,i);d.stroke()}});d.setLineDash([])}if(h.xAxis.disabled!==true){let t=r.length;if(h.xAxis.labelCount){if(h.xAxis.itemCount){t=Math.ceil(r.length/h.xAxis.itemCount*h.xAxis.labelCount)}else{t=h.xAxis.labelCount}t-=1}let e=Math.ceil(r.length/t);let a=[];let i=r.length;for(let t=0;t=h.area[3]-1&&n-Math.abs(o)<=h.width-h.area[1]+1){d.beginPath();d.setFontSize(g);d.setFillStyle(h.xAxis.fontColor||h.fontColor);d.fillText(String(a),x[e]+i,u+h.xAxis.marginTop*h.pix+(h.xAxis.lineHeight-h.xAxis.fontSize)*h.pix/2+h.xAxis.fontSize*h.pix);d.closePath();d.stroke()}})}else{a.forEach(function(t,e){var a=h.xAxis.formatter?h.xAxis.formatter(t):t;var i=h._scrollDistance_||0;var r=p=="center"?x[e]+f/2:x[e];if(r-Math.abs(i)>=h.area[3]-1&&r-Math.abs(i)<=h.width-h.area[1]+1){d.save();d.beginPath();d.setFontSize(g);d.setFillStyle(h.xAxis.fontColor||h.fontColor);var o=measureText(String(a),g,d);var n=x[e];if(p=="center"){n=x[e]+f/2}var l=0;if(h.xAxis.scrollShow){l=6*h.pix}var s=u+h.xAxis.marginTop*h.pix+g-g*Math.abs(Math.sin(c._xAxisTextAngle_));if(h.xAxis.rotateAngle<0){n-=g/2;o=0}else{n+=g/2;o=-o}d.translate(n,s);d.rotate(-1*c._xAxisTextAngle_);d.fillText(String(a),o,0);d.closePath();d.stroke();d.restore()}})}}d.restore();if(h.xAxis.title){d.beginPath();d.setFontSize(h.xAxis.titleFontSize*h.pix);d.setFillStyle(h.xAxis.titleFontColor);d.fillText(String(h.xAxis.title),h.width-h.area[1]+h.xAxis.titleOffsetX*h.pix,h.height-h.area[2]+h.xAxis.marginTop*h.pix+(h.xAxis.lineHeight-h.xAxis.titleFontSize)*h.pix/2+(h.xAxis.titleFontSize+h.xAxis.titleOffsetY)*h.pix);d.closePath();d.stroke()}if(h.xAxis.axisLine){d.beginPath();d.setStrokeStyle(h.xAxis.axisLineColor);d.setLineWidth(1*h.pix);d.moveTo(t,h.height-h.area[2]);d.lineTo(a,h.height-h.area[2]);d.stroke()}}function drawYAxisGrid(c,e,d,a){if(e.yAxis.disableGrid===true){return}let t=e.height-e.area[0]-e.area[2];let i=t/e.yAxis.splitNumber;let r=e.area[3];let o=e.chartData.xAxisData.xAxisPoints,n=e.chartData.xAxisData.eachSpacing;let l=n*(o.length-1);if(e.type=="mount"&&e.extra&&e.extra.mount&&e.extra.mount.widthRatio&&e.extra.mount.widthRatio>1){if(e.extra.mount.widthRatio>2)e.extra.mount.widthRatio=2;l+=(e.extra.mount.widthRatio-1)*n}let x=r+l;let s=[];let h=1;if(e.xAxis.axisLine===false){h=0}for(let t=h;t4&&arguments[4]!==undefined?arguments[4]:1;var n=assign({},{activeOpacity:.5,activeRadius:10,offsetAngle:0,labelWidth:15,ringWidth:30,customRadius:0,border:false,borderWidth:2,borderColor:"#FFFFFF",centerColor:"#FFFFFF",linearType:"none",customColor:[]},r.type=="pie"?r.extra.pie:r.extra.ring);var l={x:r.area[3]+(r.width-r.area[1]-r.area[3])/2,y:r.area[0]+(r.height-r.area[0]-r.area[2])/2};if(e.pieChartLinePadding==0){e.pieChartLinePadding=n.activeRadius*r.pix}var i=Math.min((r.width-r.area[1]-r.area[3])/2-e.pieChartLinePadding-e.pieChartTextPadding-e._pieTextMaxLength_,(r.height-r.area[0]-r.area[2])/2-e.pieChartLinePadding-e.pieChartTextPadding);i=i<10?10:i;if(n.customRadius>0){i=n.customRadius*r.pix}t=getPieDataPoints(t,i,a);var h=n.activeRadius*r.pix;n.customColor=fillCustomColor(n.linearType,n.customColor,t,e);t=t.map(function(t){t._start_+=n.offsetAngle*Math.PI/180;return t});t.forEach(function(t,e){if(r.tooltip){if(r.tooltip.index==e){o.beginPath();o.setFillStyle(hexToRgb(t.color,n.activeOpacity||.5));o.moveTo(l.x,l.y);o.arc(l.x,l.y,t._radius_+h,t._start_,t._start_+2*t._proportion_*Math.PI);o.closePath();o.fill()}}o.beginPath();o.setLineWidth(n.borderWidth*r.pix);o.lineJoin="round";o.setStrokeStyle(n.borderColor);var a=t.color;if(n.linearType=="custom"){var i;if(o.createCircularGradient){i=o.createCircularGradient(l.x,l.y,t._radius_)}else{i=o.createRadialGradient(l.x,l.y,0,l.x,l.y,t._radius_)}i.addColorStop(0,hexToRgb(n.customColor[t.linearIndex],1));i.addColorStop(1,hexToRgb(t.color,1));a=i}o.setFillStyle(a);o.moveTo(l.x,l.y);o.arc(l.x,l.y,t._radius_,t._start_,t._start_+2*t._proportion_*Math.PI);o.closePath();o.fill();if(n.border==true){o.stroke()}});if(r.type==="ring"){var s=i*.6;if(typeof n.ringWidth==="number"&&n.ringWidth>0){s=Math.max(0,i-n.ringWidth*r.pix)}o.beginPath();o.setFillStyle(n.centerColor);o.moveTo(l.x,l.y);o.arc(l.x,l.y,s,0,2*Math.PI);o.closePath();o.fill()}if(r.dataLabel!==false&&a===1){drawPieText(t,r,e,o,i,l)}if(a===1&&r.type==="ring"){drawRingTitle(r,e,o,l)}return{center:l,radius:i,series:t}}function drawRoseDataPoints(t,r,e,o){var a=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var n=assign({},{type:"area",activeOpacity:.5,activeRadius:10,offsetAngle:0,labelWidth:15,border:false,borderWidth:2,borderColor:"#FFFFFF",linearType:"none",customColor:[]},r.extra.rose);if(e.pieChartLinePadding==0){e.pieChartLinePadding=n.activeRadius*r.pix}var l={x:r.area[3]+(r.width-r.area[1]-r.area[3])/2,y:r.area[0]+(r.height-r.area[0]-r.area[2])/2};var i=Math.min((r.width-r.area[1]-r.area[3])/2-e.pieChartLinePadding-e.pieChartTextPadding-e._pieTextMaxLength_,(r.height-r.area[0]-r.area[2])/2-e.pieChartLinePadding-e.pieChartTextPadding);i=i<10?10:i;var s=n.minRadius||i*.5;if(i4&&arguments[4]!==undefined?arguments[4]:1;var o=assign({},{startAngle:.75,endAngle:.25,type:"default",direction:"cw",lineCap:"round",width:12,gap:2,linearType:"none",customColor:[]},i.extra.arcbar);a=getArcbarDataPoints(a,o,e);var n;if(o.centerX||o.centerY){n={x:o.centerX?o.centerX:i.width/2,y:o.centerY?o.centerY:i.height/2}}else{n={x:i.width/2,y:i.height/2}}var l;if(o.radius){l=o.radius}else{l=Math.min(n.x,n.y);l-=5*i.pix;l-=o.width/2}l=l<10?10:l;o.customColor=fillCustomColor(o.linearType,o.customColor,a,t);for(let e=0;e5&&arguments[5]!==undefined?arguments[5]:1;var f=assign({},{type:"default",startAngle:.75,endAngle:.25,width:15,labelOffset:13,splitLine:{fixRadius:0,splitNumber:10,width:15,color:"#FFFFFF",childNumber:5,childWidth:5},pointer:{width:15,color:"auto"}},c.extra.gauge);if(f.oldAngle==undefined){f.oldAngle=f.startAngle}if(f.oldData==undefined){f.oldData=0}n=getGaugeAxisPoints(n,f.startAngle,f.endAngle);var p={x:c.width/2,y:c.height/2};var u=Math.min(p.x,p.y);u-=5*c.pix;u-=f.width/2;u=u<10?10:u;var g=u-f.width;var y=0;if(f.type=="progress"){var v=u-f.width*3;d.beginPath();let t=d.createLinearGradient(p.x,p.y-v,p.x,p.y+v);t.addColorStop("0",hexToRgb(h[0].color,.3));t.addColorStop("1.0",hexToRgb("#FFFFFF",.1));d.setFillStyle(t);d.arc(p.x,p.y,v,0,2*Math.PI,false);d.fill();d.setLineWidth(f.width);d.setStrokeStyle(hexToRgb(h[0].color,.3));d.setLineCap("round");d.beginPath();d.arc(p.x,p.y,g,f.startAngle*Math.PI,f.endAngle*Math.PI,false);d.stroke();if(f.endAnglet/o){d.setStrokeStyle(hexToRgb(h[0].color,1))}else{d.setStrokeStyle(hexToRgb(h[0].color,.3))}d.setLineWidth(3*c.pix);d.moveTo(i,0);d.lineTo(r,0);d.stroke();d.rotate(a*Math.PI)}d.restore();h=getGaugeArcbarDataPoints(h,f,x);d.setLineWidth(f.width);d.setStrokeStyle(h[0].color);d.setLineCap("round");d.beginPath();d.arc(p.x,p.y,g,f.startAngle*Math.PI,h[0]._proportion_*Math.PI,false);d.stroke();let l=u-f.width*2.5;d.save();d.translate(p.x,p.y);d.rotate((h[0]._proportion_-1)*Math.PI);d.beginPath();d.setLineWidth(f.width/3);let s=d.createLinearGradient(0,-l*.6,0,l*.6);s.addColorStop("0",hexToRgb("#FFFFFF",0));s.addColorStop("0.5",hexToRgb(h[0].color,1));s.addColorStop("1.0",hexToRgb("#FFFFFF",0));d.setStrokeStyle(s);d.arc(0,0,l,.85*Math.PI,1.15*Math.PI,false);d.stroke();d.beginPath();d.setLineWidth(1);d.setStrokeStyle(h[0].color);d.setFillStyle(h[0].color);d.moveTo(-l-f.width/3/2,-4);d.lineTo(-l-f.width/3/2-4,0);d.lineTo(-l-f.width/3/2,4);d.lineTo(-l-f.width/3/2,-4);d.stroke();d.fill();d.restore()}else{d.setLineWidth(f.width);d.setLineCap("butt");for(let e=0;e4&&arguments[4]!==undefined?arguments[4]:1;var s=assign({},{gridColor:"#cccccc",gridType:"radar",gridEval:1,axisLabel:false,axisLabelTofix:0,labelShow:true,labelColor:"#666666",labelPointShow:false,labelPointRadius:3,labelPointColor:"#cccccc",opacity:.2,gridCount:3,border:false,borderWidth:2,linearType:"none",customColor:[]},n.extra.radar);var a=getRadarCoordinateSeries(n.categories.length);var h={x:n.area[3]+(n.width-n.area[1]-n.area[3])/2,y:n.area[0]+(n.height-n.area[0]-n.area[2])/2};var r=(n.width-n.area[1]-n.area[3])/2;var d=(n.height-n.area[0]-n.area[2])/2;var c=Math.min(r-(getMaxTextListLength(n.categories,i.fontSize,l)+i.radarLabelTextMargin),d-i.radarLabelTextMargin);c-=i.radarLabelTextMargin*n.pix;c=c<10?10:c;c=s.radius?s.radius:c;l.beginPath();l.setLineWidth(1*n.pix);l.setStrokeStyle(s.gridColor);a.forEach(function(t,e){var a=convertCoordinateOrigin(c*Math.cos(t),c*Math.sin(t),h);l.moveTo(h.x,h.y);if(e%s.gridEval==0){l.lineTo(a.x,a.y)}});l.stroke();l.closePath();var x=function t(i){var r={};l.beginPath();l.setLineWidth(1*n.pix);l.setStrokeStyle(s.gridColor);if(s.gridType=="radar"){a.forEach(function(t,e){var a=convertCoordinateOrigin(c/s.gridCount*i*Math.cos(t),c/s.gridCount*i*Math.sin(t),h);if(e===0){r=a;l.moveTo(a.x,a.y)}else{l.lineTo(a.x,a.y)}});l.lineTo(r.x,r.y)}else{var e=convertCoordinateOrigin(c/s.gridCount*i*Math.cos(1.5),c/s.gridCount*i*Math.sin(1.5),h);l.arc(h.x,h.y,h.y-e.y,0,2*Math.PI,false)}l.stroke();l.closePath()};for(var e=1;e<=s.gridCount;e++){x(e)}s.customColor=fillCustomColor(s.linearType,s.customColor,o,i);var f=getRadarDataPoints(a,h,c,o,n,t);f.forEach(function(t,e){l.beginPath();l.setLineWidth(s.borderWidth*n.pix);l.setStrokeStyle(t.color);var a=hexToRgb(t.color,s.opacity);if(s.linearType=="custom"){var i;if(l.createCircularGradient){i=l.createCircularGradient(h.x,h.y,c)}else{i=l.createRadialGradient(h.x,h.y,0,h.x,h.y,c)}i.addColorStop(0,hexToRgb(s.customColor[o[e].linearIndex],s.opacity));i.addColorStop(1,hexToRgb(t.color,s.opacity));a=i}l.setFillStyle(a);t.data.forEach(function(t,e){if(e===0){l.moveTo(t.position.x,t.position.y)}else{l.lineTo(t.position.x,t.position.y)}});l.closePath();l.fill();if(s.border===true){l.stroke()}l.closePath();if(n.dataPointShape!==false){var r=t.data.map(function(t){return t.position});drawPointShape(r,t.color,t.pointShape,l,n)}});if(s.axisLabel===true){const p=Math.max(s.max,Math.max.apply(null,dataCombine(o)));const u=c/s.gridCount;const g=n.fontSize*n.pix;l.setFontSize(g);l.setFillStyle(n.fontColor);l.setTextAlign("left");for(var e=0;eh.x?e.xMax:h.x;e.yMin=e.yMinh.y?e.yMax:h.y}}}return e}function coordinateToPoint(t,e,a,i,r,o){return{x:(e-a.xMin)*i+r,y:(a.yMax-t)*i+o}}function pointToCoordinate(t,e,a,i,r,o){return{x:(e-r)/i+a.xMin,y:a.yMax-(t-o)/i}}function isRayIntersectsSegment(t,e,a){if(e[1]==a[1]){return false}if(e[1]>t[1]&&a[1]>t[1]){return false}if(e[1]t[1]){return false}if(a[1]==t[1]&&e[1]>t[1]){return false}if(e[0]a[t].area[2]||e[1]>a[t].area[3]||e[2]i||e[3]>r){o=true;break}else{o=false}}else{o=true;break}}}return o}function getWordCloudPoint(c,t,d){let x=c.series;switch(t){case"normal":for(let l=0;l.7){return true}else{return false}};for(let h=0;h4&&arguments[4]!==undefined?arguments[4]:1;let a=assign({},{type:"normal",autoColors:true},r.extra.word);if(!r.chartData.wordCloudData){r.chartData.wordCloudData=getWordCloudPoint(r,a.type,o)}o.beginPath();o.setFillStyle(r.background);o.rect(0,0,r.width,r.height);o.fill();o.save();let l=r.chartData.wordCloudData;o.translate(r.width/2,r.height/2);for(let i=0;i0){if(r.tooltip){if(r.tooltip.index==i){o.strokeText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}else{o.fillText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}}else{o.fillText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}}}else{if(l[i].area[0]>0){if(r.tooltip){if(r.tooltip.index==i){o.strokeText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}else{o.fillText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}}else{o.fillText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}}}o.stroke();o.restore()}o.restore()}function drawFunnelDataPoints(t,e,c,a){let d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let i=assign({},{type:"funnel",activeWidth:10,activeOpacity:.3,border:false,borderWidth:2,borderColor:"#FFFFFF",fillOpacity:1,minSize:0,labelAlign:"right",linearType:"none",customColor:[]},e.extra.funnel);let r=(e.height-e.area[0]-e.area[2])/t.length;let o={x:e.area[3]+(e.width-e.area[1]-e.area[3])/2,y:e.height-e.area[2]};let n=i.activeWidth*e.pix;let x=Math.min((e.width-e.area[1]-e.area[3])/2-n,(e.height-e.area[0]-e.area[2])/2-n);let l=getFunnelDataPoints(t,x,i,r,d);a.save();a.translate(o.x,o.y);i.customColor=fillCustomColor(i.linearType,i.customColor,t,c);if(i.type=="pyramid"){for(let t=0;t0){l.area[3]+=i[t].width+l.yAxis.padding*l.pix}else{l.area[3]+=i[t].width}a+=1}else if(i[t].position=="right"){if(e>0){l.area[1]+=i[t].width+l.yAxis.padding*l.pix}else{l.area[1]+=i[t].width}e+=1}}}else{n.yAxisWidth=i}l.chartData.yAxisData=f;if(l.categories&&l.categories.length&&l.type!=="radar"&&l.type!=="gauge"&&l.type!=="bar"){l.chartData.xAxisData=getXAxisPoints(l.categories,l,n);let t=calCategoriesData(l.categories,l,n,l.chartData.xAxisData.eachSpacing,s),e=t.xAxisHeight,a=t.angle;n.xAxisHeight=e;n._xAxisTextAngle_=a;l.area[2]+=e;l.chartData.categoriesData=t}else{if(l.type==="line"||l.type==="area"||l.type==="scatter"||l.type==="bubble"||l.type==="bar"){l.chartData.xAxisData=calXAxisData(c,l,n,s);d=l.chartData.xAxisData.rangesFormat;let t=calCategoriesData(d,l,n,l.chartData.xAxisData.eachSpacing,s),e=t.xAxisHeight,a=t.angle;n.xAxisHeight=e;n._xAxisTextAngle_=a;l.area[2]+=e;l.chartData.categoriesData=t}else{l.chartData.xAxisData={xAxisPoints:[]}}}if(l.enableScroll&&l.xAxis.scrollAlign=="right"&&l._scrollDistance_===undefined){let t=0,e=l.chartData.xAxisData.xAxisPoints,a=l.chartData.xAxisData.startX,i=l.chartData.xAxisData.endX,r=l.chartData.xAxisData.eachSpacing;let o=r*(e.length-1);let n=i-a;t=n-o;h.scrollOption.currentOffset=t;h.scrollOption.startTouchX=t;h.scrollOption.distance=0;h.scrollOption.lastMoveTime=0;l._scrollDistance_=t}if(t==="pie"||t==="ring"||t==="rose"){n._pieTextMaxLength_=l.dataLabel===false?0:getPieTextMaxLength(x,n,s,l)}switch(t){case"word":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function(t){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawWordCloudDataPoints(c,l,n,s,t);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"map":s.clearRect(0,0,l.width,l.height);drawMapDataPoints(c,l,n,s);setTimeout(()=>{this.uevent.trigger("renderComplete")},50);break;case"funnel":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function(t){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.funnelData=drawFunnelDataPoints(c,l,n,s,t);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,t);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"line":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawLineDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"scatter":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawScatterDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"bubble":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawBubbleDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"mix":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawMixDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"column":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawColumnDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"mount":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawMountDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"bar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawXAxis(d,l,n,s);var a=drawBarDataPoints(c,l,n,s,e),i=a.yAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.yAxisPoints=i;l.chartData.xAxisPoints=l.chartData.xAxisData.xAxisPoints;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"area":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawAreaDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"ring":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawPieDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"pie":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawPieDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"rose":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawRoseDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"radar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.radarData=drawRadarDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"arcbar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.arcbarData=drawArcbarDataPoints(c,l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"gauge":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.gaugeData=drawGaugeDataPoints(d,c,l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"candle":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawCandleDataPoints(c,x,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}if(x){drawLegend(x,l,n,s,l.chartData)}else{drawLegend(l.series,l,n,s,l.chartData)}drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break}}function uChartsEvent(){this.events={}}uChartsEvent.prototype.addEventListener=function(t,e){this.events[t]=this.events[t]||[];this.events[t].push(e)};uChartsEvent.prototype.delEventListener=function(t){this.events[t]=[]};uChartsEvent.prototype.trigger=function(){for(var t=arguments.length,e=Array(t),a=0;a0&&arguments[0]!==undefined?arguments[0]:{};this.opts=assign({},this.opts,t);this.opts.updateData=true;let c=t.scrollPosition||"current";switch(c){case"current":this.opts._scrollDistance_=this.scrollOption.currentOffset;break;case"left":this.opts._scrollDistance_=0;this.scrollOption={currentOffset:0,startTouchX:0,distance:0,lastMoveTime:0};break;case"right":let t=calYAxisData(this.opts.series,this.opts,this.config,this.context),e=t.yAxisWidth;this.config.yAxisWidth=e;let a=0;let i=getXAxisPoints(this.opts.categories,this.opts,this.config),r=i.xAxisPoints,o=i.startX,n=i.endX,l=i.eachSpacing;let s=l*(r.length-1);let h=n-o;a=h-s;this.scrollOption={currentOffset:a,startTouchX:a,distance:0,lastMoveTime:0};this.opts._scrollDistance_=a;break}drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)};uCharts.prototype.zoom=function(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.opts.xAxis.itemCount;if(this.opts.enableScroll!==true){console.log("[uCharts] 请启用滚动条后使用");return}let e=Math.round(Math.abs(this.scrollOption.currentOffset)/this.opts.chartData.eachSpacing)+Math.round(this.opts.xAxis.itemCount/2);this.opts.animation=false;this.opts.xAxis.itemCount=t.itemCount;let a=calYAxisData(this.opts.series,this.opts,this.config,this.context),i=a.yAxisWidth;this.config.yAxisWidth=i;let r=0;let o=getXAxisPoints(this.opts.categories,this.opts,this.config),h=o.xAxisPoints,c=o.startX,d=o.endX,n=o.eachSpacing;let x=n*e;let l=d-c;let s=l-n*(h.length-1);r=l/2-x;if(r>0){r=0}if(r=this.opts.categories.length?this.opts.categories.length:r;this.opts.animation=false;this.opts.xAxis.itemCount=r;let o=0;let n=getXAxisPoints(this.opts.categories,this.opts,this.config),x=n.xAxisPoints,f=n.startX,p=n.endX,l=n.eachSpacing;let u=l*this.scrollOption.moveCurrent1;let g=p-f;let y=g-l*(x.length-1);o=-u+Math.min(i[0].x,i[1].x)-this.opts.area[3]-l;if(o>0){o=0}if(o1&&arguments[1]!==undefined?arguments[1]:{};var a=null;if(t.changedTouches){a=t.changedTouches[0]}else{a=t.mp.changedTouches[0]}if(a){var i=getTouches(a,this.opts,t);var r=this.getLegendDataIndex(t);if(r>=0){if(this.opts.type=="candle"){this.opts.seriesMA[r].show=!this.opts.seriesMA[r].show}else{this.opts.series[r].show=!this.opts.series[r].show}this.opts.animation=e.animation?true:false;this.opts._scrollDistance_=this.scrollOption.currentOffset;drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)}}};uCharts.prototype.showToolTip=function(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var c=null;if(t.changedTouches){c=t.changedTouches[0]}else{c=t.mp.changedTouches[0]}if(!c){console.log("[uCharts] 未获取到event坐标信息")}var a=getTouches(c,this.opts,t);var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});if(this.opts.type==="line"||this.opts.type==="area"||this.opts.type==="column"||this.opts.type==="scatter"||this.opts.type==="bubble"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1||o.length>0){var n=getSeriesDataItem(this.opts.series,o,r.group);if(n.length!==0){var l=getToolTipData(n,this.opts,o,r.group,this.opts.categories,e),s=l.textList,h=l.offset;h.y=a.y;i.tooltip={textList:e.textList!==undefined?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o,group:r.group}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="mount"){var o=e.index==undefined?this.getCurrentDataIndex(t).index:e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},i._series_[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,i):n.name+": "+n.data,color:n.color,legendShape:this.opts.extra.tooltip.legendShape=="auto"?n.legendShape:this.opts.extra.tooltip.legendShape}];var h={x:i.chartData.calPoints[o].x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="bar"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1||o.length>0){var n=getSeriesDataItem(this.opts.series,o,r.group);if(n.length!==0){var l=getToolTipData(n,this.opts,o,r.group,this.opts.categories,e),s=l.textList,h=l.offset;h.x=a.x;i.tooltip={textList:e.textList!==undefined?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="mix"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1){var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var x=getMixToolTipData(n,this.opts,o,this.opts.categories,e),s=x.textList,h=x.offset;h.y=a.y;i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="candle"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1){var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var l=getCandleToolTipData(this.opts.series[0].data,n,this.opts,o,this.opts.categories,this.opts.extra.candle,e),s=l.textList,h=l.offset;h.y=a.y;i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="pie"||this.opts.type==="ring"||this.opts.type==="rose"||this.opts.type==="funnel"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},i._series_[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,i):n.name+": "+n.data,color:n.color,legendShape:this.opts.extra.tooltip.legendShape=="auto"?n.legendShape:this.opts.extra.tooltip.legendShape}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="map"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},this.opts.series[o]);n.name=n.properties.name;var s=[{text:e.formatter?e.formatter(n,undefined,o,this.opts):n.name,color:n.color,legendShape:this.opts.extra.tooltip.legendShape=="auto"?n.legendShape:this.opts.extra.tooltip.legendShape}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}i.updateData=false;drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="word"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},this.opts.series[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,this.opts):n.name,color:n.color,legendShape:this.opts.extra.tooltip.legendShape=="auto"?n.legendShape:this.opts.extra.tooltip.legendShape}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}i.updateData=false;drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="radar"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var s=n.map(t=>{return{text:e.formatter?e.formatter(t,this.opts.categories[o],o,this.opts):t.name+": "+t.data,color:t.color,legendShape:this.opts.extra.tooltip.legendShape=="auto"?t.legendShape:this.opts.extra.tooltip.legendShape}});var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}};uCharts.prototype.translate=function(t){this.scrollOption={currentOffset:t,startTouchX:t,distance:0,lastMoveTime:0};let e=assign({},this.opts,{_scrollDistance_:t,animation:false});drawCharts.call(this,this.opts.type,e,this.config,this.context)};uCharts.prototype.scrollStart=function(t){var e=null;if(t.changedTouches){e=t.changedTouches[0]}else{e=t.mp.changedTouches[0]}var a=getTouches(e,this.opts,t);if(e&&this.opts.enableScroll===true){this.scrollOption.startTouchX=a.x}};uCharts.prototype.scroll=function(t){if(this.scrollOption.lastMoveTime===0){this.scrollOption.lastMoveTime=Date.now()}let e=this.opts.touchMoveLimit||60;let a=Date.now();let i=a-this.scrollOption.lastMoveTime;if(i({
swiperList: [
{
@@ -44,6 +47,12 @@ onShow(() => {
onHide(() => {
})
+const doMenu = async (v: any) => {
+ console.log("tabbarStore:", tabbarStore);
+ await tabbarStore.componetTabbarList(v.page)
+ tabbarStore.jumpFirstTabbar()
+}
+
// 获取通知公告列表
const getNoticeList = async () => {
try {
@@ -128,8 +137,8 @@ const getAppMenuList = async () => {
-
+
{{ v.title }}
diff --git a/src/pages/tabbar/cabinet.vue b/src/pages/tabbar/cabinet.vue
new file mode 100644
index 0000000..7a9dee7
--- /dev/null
+++ b/src/pages/tabbar/cabinet.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+ {{ item.hardName }} {{ item.deviceCode }}
+
+
+
+ 货柜详情
+
+
+
+ 货柜补货
+
+
+
+ 商品上架
+
+
+
+
+
+
+
+
diff --git a/src/pages/tabbar/canteen.vue b/src/pages/tabbar/canteen.vue
index d310986..07251be 100644
--- a/src/pages/tabbar/canteen.vue
+++ b/src/pages/tabbar/canteen.vue
@@ -15,16 +15,12 @@ const state = reactive({
})
onLoad(() => {
- const app = getApp({ allowDefault: true })
- if (app._initTabbar) {
- app._initTabbar()
- }
})
-onShow(() => {
- const app = getApp({ allowDefault: true })
- if (app._initTabbar) {
- app._initTabbar()
+onShow(async () => {
+ const app: any = getApp({ allowDefault: true })
+ if (app?.globalData?._initTabbar) {
+ await app.globalData._initTabbar()
}
if (pageRef.value) {
pageRef.value.reload(false)
diff --git a/src/pages/tabbar/canteenAnalyse.vue b/src/pages/tabbar/canteenAnalyse.vue
new file mode 100644
index 0000000..73d42e3
--- /dev/null
+++ b/src/pages/tabbar/canteenAnalyse.vue
@@ -0,0 +1,218 @@
+
+
+
+
+ 菜品分类购买数量占比图
+
+
+
+
+
+
+ 近一周各食堂购买数量趋势图
+
+
+
+
+
+
+
+ 个人菜品喜好排行
+
+
+ 排名
+ 菜品名称
+ 分类
+ 购买数量
+
+
+
+
+
+ {{ index + 1 }}
+
+ {{ index + 1 }}
+
+
+
+ {{ item.productName || "未知菜品" }}
+
+
+
+
+ {{ item.classifyName || "未分类" }}
+
+
+
+
+ {{ item.payCount }}次
+
+
+
+
+
+ 暂无菜品喜好数据
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/tabbar/coopMerchant.vue b/src/pages/tabbar/coopMerchant.vue
new file mode 100644
index 0000000..e50daae
--- /dev/null
+++ b/src/pages/tabbar/coopMerchant.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
+
+
+ 搜 索
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ v.name }}
+
+
+
+
+
+
+
+ {{ v.phone }}
+
+
+ {{ v.deptName.length > 5 ? v.deptName.substring(0, 5)
+ + "..." :
+ v.deptName }}
+
+
+ 营业时间：
+ {{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}
+ {{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}
+ {{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}
+
+
+
+ 地址:
+ {{ v.addressDes }}
+
+
+
+
+
+
+
diff --git a/src/pages/tabbar/selfMerchant.vue b/src/pages/tabbar/selfMerchant.vue
new file mode 100644
index 0000000..4e8599f
--- /dev/null
+++ b/src/pages/tabbar/selfMerchant.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+ {{ v.name }}
+ {{ v.deptName }}
+
+
+
+
+ {{ v.phone }}
+
+
+ {{ v.jobTime == ",," ? "" : "营业时间：" }}
+ {{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}
+ {{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}
+ {{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}
+
+
+
+ 地址:
+ {{ v.addressDes }}
+
+
+
+
+
+
+
diff --git a/src/sheep/api/door.ts b/src/sheep/api/door.ts
new file mode 100644
index 0000000..b6c69f7
--- /dev/null
+++ b/src/sheep/api/door.ts
@@ -0,0 +1,151 @@
+import request from "@/sheep/utils/request"
+
+export default {
+ /**
+ * app获取智能柜授权信息
+ * @param doorHardId 智能柜设备id
+ * @param cabinetNo 货柜编号
+ */
+ appGetAuthHardDoor: (data: { doorHardId: any; cabinetNo: any }) =>
+ request({
+ url: "hard/hard-auth/app/get-auth-hard-door",
+ method: "POST",
+ data,
+ }),
+ /**
+ * app获取智能柜授权信息
+ * @param authId 授权id
+ * @param authStatus 是否授权
+ */
+ appAuthHardDoor: (data: { authId: any; authStatus: any }) =>
+ request({
+ url: "hard/hard-auth/app/get-auth-hard-door",
+ method: "POST",
+ data,
+ }),
+ /**
+ * app查询智能柜列表(有分页)
+ */
+ hardDoorPage: (params: any) =>
+ request({
+ url: "hard/hard-door-manager/app/page",
+ method: "GET",
+ params,
+ }),
+
+ /**
+ * app查询智能柜详情
+ * @param hardDoorId 智能柜id
+ */
+ hardDoorDetail: (params: { hardDoorId: any }): Promise =>
+ request({
+ url: "hard/hard-door-manager/app/detail",
+ method: "GET",
+ params,
+ }),
+
+ /**
+ * 上架
+ * @param id 绑定id
+ * @param hardSpuId 商品id
+ */
+ putaway: (data: { id: any; hardSpuId: any }): Promise =>
+ request({
+ url: "hard/hard-spu/app/putaway",
+ method: "POST",
+ data,
+ }),
+
+ /**
+ * 下架
+ * @param id 绑定id
+ * @param hardSpuId 商品id
+ */
+ unPutaway: (data: { id: any; hardSpuId: any }) =>
+ request({
+ url: "hard/hard-spu/app/un-putaway",
+ method: "POST",
+ data,
+ }),
+ /**
+ * app查询货柜补货商品列表
+ * @param hardDoorId 智能柜编号
+ * @param cabinetNo 货柜编号
+ */
+ cabinetPutawayList: (params: { hardDoorId: any; cabinetNo: any }): Promise =>
+ request({
+ url: "hard/hard-spu/app/cabinet-putaway-list",
+ method: "GET",
+ params,
+ }),
+
+ /**
+ * app查询货柜商品列表
+ * @param hardId 智能柜编号
+ * @param cabinetNo 货柜编号
+ */
+ cabinetList: (params: { hardId: any; cabinetNo: any }): Promise =>
+ request({
+ url: "hard/hard-spu/app/cabinet-list",
+ method: "GET",
+ params,
+ }),
+
+ /**
+ * 补货完成
+ * @param flowId
+ * @param list
+ */
+ repertoryDone: (data: { flowId: any; list: Array<{ hardSpuId: any; plusCount: any }> }): Promise =>
+ request({
+ url: "hard/hard-spu-repertory/app/repertory-done",
+ method: "POST",
+ data,
+ }),
+
+ /**
+ * 补货开门
+ * @param hardDoorId 智能柜编号
+ * @param cabinetNo 货柜编号
+ */
+ openRepertory: (data: { hardDoorId: string; cabinetNo: string }): Promise =>
+ request({
+ url: "hard/hard-door-flow/app/open-repertory",
+ method: "POST",
+ data,
+ }),
+
+ /**
+ * app商品列表
+ * @param name
+ * @param skuType
+ */
+ hardDoorSpuPage: (params: { name: any; skuType: any }): Promise =>
+ request({
+ url: "hard/hard-spu/app/page",
+ method: "GET",
+ params,
+ }),
+ /**
+ * app检修开门
+ * @param hardDoorId 智能柜id
+ * @param cabinetNo 货柜编号
+ */
+ openAccess: (data: { hardDoorId: string; cabinetNo: string }): Promise =>
+ request({
+ url: "hard/hard-door-flow/app/open-access",
+ method: "POST",
+ data,
+ }),
+ /**
+ * app检修关门
+ * @param hardDoorId 智能柜id
+ * @param cabinetNo 货柜编号
+ */
+ closeAccess: (data: { hardDoorId: string; cabinetNo: string }): Promise =>
+ request({
+ url: "hard/hard-door-flow/app/close-access",
+ method: "POST",
+ data,
+ }),
+}
diff --git a/src/sheep/api/index.ts b/src/sheep/api/index.ts
index f3d36fb..7ab9c26 100644
--- a/src/sheep/api/index.ts
+++ b/src/sheep/api/index.ts
@@ -7,6 +7,7 @@ export { default as applyApi } from "./apply"
export { default as adApi } from "./ad"
export { default as appApi } from "./app"
export { default as boxesApi } from "./boxes"
+export { default as doorApi } from "./door"
export { default as faceApi } from "./face"
export { default as feedbackApi } from "./feedback"
export { default as foodApi } from "./food"
diff --git a/src/sheep/components/base/base-just-flot-nav/base-just-flot-nav.vue b/src/sheep/components/base/base-just-flot-nav/base-just-flot-nav.vue
index a6746e4..ff93608 100644
--- a/src/sheep/components/base/base-just-flot-nav/base-just-flot-nav.vue
+++ b/src/sheep/components/base/base-just-flot-nav/base-just-flot-nav.vue
@@ -1,6 +1,9 @@
-
-
-
+
+
+
+
@@ -58,19 +70,25 @@ function getNavTop() {
align-items: center;
&_center {
+ display: flex;
+ align-items: center;
+ height: 56rpx;
+ border-radius: 28rpx;
background: #fff;
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
- border-radius: 28rpx;
- width: 56rpx;
- height: 56rpx;
- display: flex;
- justify-content: center;
- align-items: center;
z-index: 100;
+ &_line {
+ width: 1rpx;
+ height: 25rpx;
+ background: #999;
+ }
+
&>.icon {
- font-size: 32rpx;
- color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 56rpx;
}
}
}
diff --git a/src/sheep/components/base/base-nav/base-nav.vue b/src/sheep/components/base/base-nav/base-nav.vue
index 6705753..c014c6c 100644
--- a/src/sheep/components/base/base-nav/base-nav.vue
+++ b/src/sheep/components/base/base-nav/base-nav.vue
@@ -1,7 +1,9 @@
@@ -102,6 +111,11 @@ function initBackStyle() {
+
+
diff --git a/src/sheep/stores/tabbar.ts b/src/sheep/stores/tabbar.ts
new file mode 100644
index 0000000..e550a77
--- /dev/null
+++ b/src/sheep/stores/tabbar.ts
@@ -0,0 +1,185 @@
+import { defineStore } from "pinia"
+
+import { getLaunchParam, getAppInfo } from "../utils/app"
+import { jump } from "../router/index"
+
+type TabbarItem = {
+ pagePath: string
+ text: string
+ iconPath: string
+ selectedIconPath: string
+ launchParam: string[]
+ auth: string[]
+}
+
+type StoreState = {
+ tabbarList: Array
+ launchParam: string | null
+ currentRoute: string
+}
+
+const TABBAR_CONSTANT: Array = [
+ {
+ pagePath: "/pages/tabbar/canteen",
+ text: "食堂",
+ iconPath: "/static/tabbar/canteen.png",
+ selectedIconPath: "/static/tabbar/canteen-select.png",
+ launchParam: ["canteen"],
+ auth: [],
+ },
+ {
+ pagePath: "/pages/tabbar/canteenAnalyse",
+ text: "喜好分析",
+ iconPath: "/static/tabbar/canteen-analyse.png",
+ selectedIconPath: "/static/tabbar/canteen-analyse-select.png",
+ launchParam: ["canteen"],
+ auth: [],
+ },
+ {
+ pagePath: "/pages/tabbar/selfMerchant",
+ text: "自营商家",
+ iconPath: "/static/tabbar/self-merchant.png",
+ selectedIconPath: "/static/tabbar/self-merchant-select.png",
+ launchParam: ["selfMerchant"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/coopMerchant",
+ text: "合作商家",
+ iconPath: "/static/tabbar/coop-merchant.png",
+ selectedIconPath: "/static/tabbar/coop-merchant-select.png",
+ launchParam: ["coopMerchant"],
+ auth: ["user"],
+ },
+ // 在线商城(商品展示)
+ {
+ pagePath: "/pages/tabbar/onlineShop",
+ text: "在线商城",
+ iconPath: "/static/tabbar/online-shop.png",
+ selectedIconPath: "/static/tabbar/online-shop-select.png",
+ launchParam: ["onlineShop"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/prosperityShop",
+ text: "共富商城",
+ iconPath: "/static/tabbar/prosperity-shop.png",
+ selectedIconPath: "/static/tabbar/prosperity-shop-select.png",
+ launchParam: ["prosperityShop"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/prosperityShopMchList",
+ text: "共富商城",
+ iconPath: "/static/tabbar/prosperity-shop.png",
+ selectedIconPath: "/static/tabbar/prosperity-shop-select.png",
+ launchParam: ["prosperityShopMchList"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/cabinet",
+ text: "智能柜",
+ iconPath: "/static/tabbar/cabinet.png",
+ selectedIconPath: "/static/tabbar/cabinet-select.png",
+ launchParam: [],
+ auth: ["doorAdmin"],
+ },
+ {
+ pagePath: "/pages/tabbar/order",
+ text: "订单",
+ iconPath: "/static/tabbar/order.png",
+ selectedIconPath: "/static/tabbar/order-select.png",
+ launchParam: ["canteen", "selfMerchant", "coopMerchant", "onlineShop", "prosperityShop"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/flowStatistics",
+ text: "流水统计",
+ iconPath: "/static/tabbar/order.png",
+ selectedIconPath: "/static/tabbar/order-select.png",
+ launchParam: [],
+ auth: ["merchant"],
+ },
+ {
+ pagePath: "/pages/tabbar/individualOrder",
+ text: "订单",
+ iconPath: "/static/tabbar/order.png",
+ selectedIconPath: "/static/tabbar/order-select.png",
+ launchParam: [],
+ auth: ["merchant"],
+ },
+ {
+ pagePath: "/pages/tabbar/integrated",
+ text: "综合服务",
+ iconPath: "/static/tabbar/integrated.png",
+ selectedIconPath: "/static/tabbar/integrated-select.png",
+ launchParam: ["integrated"],
+ auth: ["user"],
+ },
+ {
+ pagePath: "/pages/tabbar/my",
+ text: "我的",
+ iconPath: "/static/tabbar/my.png",
+ selectedIconPath: "/static/tabbar/my-select.png",
+ launchParam: ["canteen", "selfMerchant", "onlineShop", "coopMerchant", "integrated", "prosperityShop", "prosperityShopMchList"],
+ auth: ["user", "merchant", "doorAdmin"],
+ },
+]
+
+// tabbar
+export const useTabbarStore = defineStore("tabbarStore", {
+ state: (): StoreState => ({
+ tabbarList: [],
+ launchParam: null,
+ currentRoute: "/pages/root/dashboard",
+ }),
+ getters: {
+ isTabbar(state) {
+ return state.tabbarList.some((item) => item.pagePath === `/${state.currentRoute}`)
+ },
+ activeIndex(state) {
+ return state.tabbarList.findIndex((item) => item.pagePath === `/${state.currentRoute}`)
+ },
+ pageTabbarList(state) {
+ return state.tabbarList.map((item) => {
+ return {
+ title: item.text,
+ icon: item.iconPath,
+ selectedIcon: item.selectedIconPath,
+ }
+ })
+ },
+ },
+ actions: {
+ async componetTabbarList(launchParam?: string) {
+ let _launchParam = ""
+ if (launchParam) {
+ _launchParam = getLaunchParam(launchParam)
+ } else {
+ _launchParam = getLaunchParam()
+ }
+ if (this.launchParam === _launchParam) return
+ const appInfo = await getAppInfo()
+ if (!_launchParam || !appInfo) return
+ const tabbarList: Array = []
+ TABBAR_CONSTANT.forEach((item, index) => {
+ const visible = item.launchParam.includes(_launchParam)
+ if (visible) {
+ tabbarList.push(item)
+ }
+ })
+ this.tabbarList = tabbarList
+ },
+ jumpFirstTabbar() {
+ const firstTabbar = this.tabbarList[0]
+ if (!firstTabbar) {
+ return
+ }
+ jump(firstTabbar.pagePath, {}, 3)
+ },
+ setCurrentRoute(route: string) {
+ console.log("设置route:", route)
+ this.currentRoute = route
+ },
+ },
+})
diff --git a/src/sheep/utils/app.ts b/src/sheep/utils/app.ts
index ec1cebb..268e679 100644
--- a/src/sheep/utils/app.ts
+++ b/src/sheep/utils/app.ts
@@ -18,6 +18,23 @@ export const getAppInfo = async (): Promise => {
return APPENV.WECHAT
}
-export const getLaunchParam = () => {
- return "canteen"
+// 获取url的params参数对象
+export function getUrlParams(url: string) {
+ const reg = /([^?&=]+)=([^?&=]+)/g
+ const params: any = {}
+ url.replace(reg, (_, k, v) => {
+ params[k] = decodeURIComponent(v)
+ return _
+ })
+ return params
+}
+
+export const getLaunchParam = (url?: string) => {
+ if (!url) {
+ const pages = getCurrentPages()
+ const currentPage = pages[pages.length - 1]
+ url = currentPage?.route ?? ""
+ }
+ const params = getUrlParams(url)
+ return params?.launchParam
}
diff --git a/src/static/page/door-info.svg b/src/static/page/door-info.svg
new file mode 100644
index 0000000..c071f4f
--- /dev/null
+++ b/src/static/page/door-info.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/static/page/door-putaway.svg b/src/static/page/door-putaway.svg
new file mode 100644
index 0000000..dfa53eb
--- /dev/null
+++ b/src/static/page/door-putaway.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/static/page/open-door.svg b/src/static/page/open-door.svg
new file mode 100644
index 0000000..eb3f874
--- /dev/null
+++ b/src/static/page/open-door.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/static/tabbar/cabinet-select.png b/src/static/tabbar/cabinet-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..77c01060ad08dd9d2dd9e4174975f11f1b3507fc
GIT binary patch
literal 4682
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
literal 0
HcmV?d00001
diff --git a/src/static/tabbar/canteen-analyse-select.png b/src/static/tabbar/canteen-analyse-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..c039e079163eff85fef2a7d01ef9a66c9f984d70
GIT binary patch
literal 4410
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
Kwd|o;;C}&twKWX@
literal 0
HcmV?d00001
diff --git a/src/static/tabbar/canteen-analyse.png b/src/static/tabbar/canteen-analyse.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae2c284e6110b9803b55dc7fd03d824a9287ab2c
GIT binary patch
literal 4257
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
literal 0
HcmV?d00001
diff --git a/src/static/tabbar/coop-merchant.png b/src/static/tabbar/coop-merchant.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffb65d11d23c5b5725e8333c98d0dcfd93f168ce
GIT binary patch
literal 493
zcmVPx$r%6OXRA@u(n4wO@KoExiX=+hO#JvF$fgljx0D~Z4Dz*(c6fb~8acQ?n1qi_L
z0wjPUXkGw;A;Dpr4%tFUo0RKbuF0{zsk-L2oBx}CX0{zd?b2Fv{ob|TMNw=;QS@MR
zlYlv3pE%}#NezjM=a_2_P14)wiUQ_91b!Wh<9N;Uyk`eAPm*|~lo~eCO00000NkvXXu0mjfVrJJ7
literal 0
HcmV?d00001
diff --git a/src/static/tabbar/integrated-select.png b/src/static/tabbar/integrated-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..208c9151ba04ed3827791f089a34d77a3815497d
GIT binary patch
literal 3923
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
IG4mz<2T;WWHvj+t
literal 0
HcmV?d00001
diff --git a/src/static/tabbar/online-shop-select.png b/src/static/tabbar/online-shop-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ab5fcb512229428aa5a052073d6e8073487bb1c
GIT binary patch
literal 5113
zcmcIo`8(8K*#6ANV8*`hGGqyneakXqYiJCitRYLbY$0omeJM=HE;}KTC2LG5<6GIX
zW?!--Swcv>Q|}M&U-15L&bh9$+~+*!+}C;T=SeWaUZbVrq5=SbRu8RhOlpaL3ygwP
z*O=EnBQ+3T<7=8g?EudP05CV`X`@U7ZMO158m;~P`+lAMxvNQW#J<8mQe85lLW5ocKa3$B17l&BN
z|3~E*=F4mo0}B7joA(@ilMsVm$O{?V_F4UI@u+LkdHc_w?>|4y%;)vdM`&Ph@Ox>1
z47V@=`q}_T+wDxr9LNXWV^CMi0=T0GA;MBB;3=()if5=P3RZ`rl5xpURsrwfhkcey
zs5Ei3#&}f2$6-dhsK?3Nd^Z_LBat*YPRYptx1-<8(ep?KyC@dNq07F0&`Cte^80J7
z(a2SbsiuMl!=;1J$am056oMQoj*Ks>iV>&ke(H1xi@?yI^n6X7iv@kOZOAoLLSvQB)-7;xsk6iDX?(!p9}
zVFUv)ysb}R_H~(vUZ{*5I!EJG>~E_Qur*)_tBi*$AxMZP8``5MXL4MAf`?qz(Or7J
zG<`CVT&RpJaYcBG_sN-4&gzYL6BV*R!yE^t4EUrVJ{z@EUY+DZ24K+q3+|*H3>gQD
zFa$A@vBvJvzZe(v^jHxD-h5;jzpHAWG-MhoBad!kyiEa^l{4%Xh~fFJ|KEaYdS1gz
z7qAt`@3o+H?hlUSyWj(uqZ=OX&tG%Nl{3aN`;KR
zTOkxxy35lCy~jkHK|IyIg=xq~RM7eb*s7$X8Ycr0|J!Yu!UkxD8FY!`!LjKZ|7gr7JzK2(f}H1cE$>1csYlqtn(W#fE6
zU7Gr!qBD13QnnHle5hG*`waCDP63uBiREk$uAw$5b}sdgJ!#O(9D;5j
z0cp$_?~SSudU>5|&<8^hge+53j>aYHu=IB^#&_0yDeICK&GD6uD1|=ecHE0;d?<(Q
zdfLbjoV=pa?-NW}Lkrs_<9woeYs|h4>uaM=>|-n&G=%
z=A4>{jP`n9xp(@HkQl}~dwk2W+r<+vU{W-jAyn0Z=h}fVgjZnc19FFozoWQkeeSK!
z@-x4pv0_wr9Iyjr7ihgp&wwyD00Q(Af7mp8&kTBq*5Acj%H|kCGpCu}`v+$b+>zcf
zZXZ?*tCJxy@=>O_a;)f|3X~2UYSTOJbUD+2*03qfU3
zai(!vC(0&DCKk+iu
zn@+e+9-^sIGcEQ|ky-{z^Y@2{1q#z+U;}TVb2`AgqN0
zr5<;yto{;KI$9`h);+OJ72BAAx*7ywz
zQSZBWw|sSq=LMhiVI-rZA(~m!9{pa9Iz8Dag)5`W;@_C-nRo0YGvvG1??*
zlRv%~O+l7h^@7He)KxZr|n;9~izXY@W6u6(#rL;E$gHZ-uHPn77OG8u7kSH0Rl4@nPhE
zNvgspAB>$lsJ+zU$t^qodXW0Bk#yjH-_JPJA0}S2i|@r=Y1&PC@igQP-tD3rh+MTz
zvFKR}ontbu1cT}lew<37)3Cq@eKrG8nHse~!AkszxpdHtczUKNTs&9QW5|)i;j_Ia
zSlZBDGg2d*9()J?BqsPs5V(6{bCa2%R1pqE$CI^@xvUJs!)c7^yU62pJB9yniw30g
zM@*O^0tTe!+l`MM@VZK5KxPipe?cMXz~Zl)R-xnRD&aIEGk!39=$CY(f$3amyj@tc
z#7n8N0q&??`s=s2RcxM{VG_P}yg?%|Hz8cV$wx0n^(sn!`wiLXwc)wwE~ABu&Kl)K
zI$Y8E^#O4jU6kGMJfK0n0&MNl3ku^b<;0S8w_~VQXWnSx0M8AIJ)X40QyF4e#dA6fLp6FMNz
zHBoeJixc#!M4lD7%3t7$zDu@VZ9u(tdMu2?X?%xvA9?m);Bs7d0d`A5Q&QTSk#-SO
zrMt7KZ)AzR7MlT=ljemw?Ud#~N69B9AX={Gv!sOVY-a!kr_J+;o<7Jf$LA&G@MrLQ
zGq=gFzL2jW7)HqjZZmw28Vov<7sH244=q%px@Cc#f_uOMm$D$vJJ+pW_MYF5GL+b#
zMh&+=k7)txi{Vg)h3b5yjeCjj6;5J{EUwUv1(=5(q{UhLE8}VE}eCi$!1?
z61v@^OmlMSv{DVHpxsTULO37^iIFOVsIEEB6_n;A}C_3wnGs;Z~estoxd?R@tWWF%`0X^v2WYfh=jvnx@6QZiiEGG
z+&4lu+lLj`%X;1qzlOu&>1@~^Te-G-+R!j*s5*Uxa88pg1Sh~~s*ox{l|kw>BabCX
z0yx3wz7ahWq5US}tUIR8nxk~Yu&;1Dr5)H0k%!wLaSHJ+$3~{NxY_I{9(BsNEM5FG
z@qq4t4;;+IrwOM+_cVVaC8?wy>d{F1@8Kj9oM{C;rQ^XRhqb?QhGs+9@d_s
zv*VIHcEfLFq1eYTd3Dl8x!f{k9PIXdec-~M%)^6p{{GVmuN%k?U>no~1s>`&-+t!R
zUVG(0%-{=|-uZi!#>*-*9lp!&_$iy>uCIPX3_G3wVu};5=@BqD(9E0hxWnHZS3MfH
zdNJ`sjW1=eIeFROuTB0hJnN
z6xm8CVr55>MeSalthl<-{r68K4dW%6s(;2NgAomop{Z$!gx-D6>8%pFRvF@s=9{7d
zib5@(0&Q`aoe)Bmx-iL8z}2K;NGXQlmq_75h8@S;rupg&U1_Jf7%ZPZkrcZGPTM+n
zJ!)5Xr7}HNW<{^1D6I@4KCP=Fybs$0Bd|uz#u7gudtsWs&UpQNx@)5YVeA1R<1AGt
z@5Jx}d_Kf{l%4w1DlZdCoG{xrKhZ36&4>4zZ$3DS*E*w-=`f<_0}0Gj4+dEDe&lk`
z2iF|_*VNwe!_p5+%R~zxKg+AudL;s9=H%UvZYTS?GBh{a=BkJ)ZC{01*MLDq^xF4b
z@p?bQuIeQ2y$l72Y8(ipU%6Xm$K+R~ObX6cI}SBU;5R1+eT5$ehfuBKzPI*HvM)%1
z=mG5L^fj#PO)&@BkdNffCi%MK^<{HnpcBp-d;{yL066mnzA_~l66m~j%2iq*Ts*!z
zA!SRy`}N*`h4f5Ir9S|5JgN#~yfTh>bz-U3_Ke}KlV)UEAQBf=6*;naL2j>|?Y;+I
z-*?>vy(C?LyMLub1PMFvye`S}F!p=O$0n3+*r$;c$WTT7wH{6h=D;)~p7m*y+*U<&
z4QE&cajtVJ!!SqSsTE1MS9(SIdf}fmp^uz2JBAfoW(;LOsJE{o-WJQ|p;#qCBXciR
z*AD`*c3|f-jb#1g&>xbe;Iv55-lcuKoAmg!pBxfu3CnBq1Z)qRW}nHR
zX@`@GD`R>c|(Q`$2>_`y@nhti96H%goLsi!#9
zA3wY4G$6#ehA
zTJ+3F(SI$`ch;Je4p_0r%#@0gQVeD*t)7yknSfolkm*yc;bG9n3p~20{asc;t(f)F
zx&_#3+$3c--F!25vGK|8sTFBppBeg!>UEq`{_#q
z=ZR21NBIQ(K97+j*8bVQQF9O;r0^ow6w$S0Vz^sS_|+xQ_Qa8oC2n)nT4kUDy)>7pzDRke+^s(__s6qimJ!5QupA{rMxesG
zzl!OwvZC?j1ECQ!zv-{X>aHB_S7PMQHPZWV@KxxGoqDwknUzS)2ZgoCdIQgqImQiJ
z;ep}<=h5!Ho`hvz26J>2Ca)>1Z{!Fr4k6~6ksTks-0nSYblC9tqdW3bDYdvh3_>TI
zG^l0GPs>DK{^g(hd&9x>)_5#K_RYFewQ$wJb3O((!F7)WD#z2DvS%kO@8Z2Z!mN5S#F8f*GleMR0Y3rrC$lkDVudEOh(G?A1D~6IR%KQaQohE;I}}0e2fmdvijYGcUaXV??Payk
zyad|!d)!#nBJA>Y0aZty^jozai`B6olnn+js6nwTFU2qog
zUSv_64n81%n`&zS#XSOZ0DxB2C8}Q!uvtoDFR^y;Z5An*jSNs6ZPK2W3LPI!Tr(L-7gARqchUI4pE7NlTwLibPO+S`8dG
zSRqqT%le=VPcBZ*b1*UwwJM7Cnwi|1Dbe9lK5{qoqj|?75~{_V=rF9?6~YbFIdF%_
z;xmPAi#x1CAX!k|zIFX2qqv>m|NNMdMe|G*rgyjz7sL|Ic8<}zws>#LUbwJYd|Lmx
z%B^OSTO`>C+5-FPB!508)5-ncJA>%nh=__iVz4?SC?aq0j)j~OOG0V(@|9aH*~X2;
zr6E?;n^Fib1M%@wr&VL0ztqT(fZT;j?(pc(R??`BCk?JIMv}RYl)7D_w=?z{WHpH<
zKG%v!f7EH0@0@|%LV=3c*4Ai6Bv&)qG;&QPC;7nH;voW_NS2}en*S;vDg1hA~KWt0;5zhUd{SgzdrO5Ocnxs(u^ZCe}87m%X_?+MDl%#y(Q`H&q5;d3A#7t
z^y261a77WjTUgh@!pryV?CkE+*fJ%QGD!vdRb2w_d7$UvfAQ+v6D%#-w_owZoWs%?
zfg3^lXEc{S8^WvbcA8kr=U3XgRwS)pa<)9JYq6P|cf?`0kR|v8QC$yWv#TEF{wbuj
z>G9#vP!bIE{0Z95GKy#K1hQN5wsfvW6D#Bl)cI0MA4BEPxtHx_U?T0w+o1(DNhNL2
zPVAt}SIaly!a)3aaE;f3t!p=qUFoIX^ome=w)O!{TFMHBx5-c5y=4;o9u4l;0`DZ~&_2
znbc0IlP_zq3=eb=UWI781xW10GzW%Ty~n