sh-chart 1.5.2

package/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true
+	},
+	extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
+	plugins: ['vue', 'prettier'],
+	parserOptions: {
+		parser: '@babel/eslint-parser',
+		requireConfigFile: false
+	},
+	rules: {
+		'prettier/prettier': 'error',
+		'no-console': 'off',
+		'no-debugger': 'off',
+		'no-unused-vars': 'off',
+		'no-empty': 'off',
+		'vue/no-v-html': 'off',
+		'vue/require-default-prop': 'off'
+	}
+}

package/README.en.md

@@ -0,0 +1,36 @@
+# sh-chart
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,39 @@
+# sh-chart
+
+#### 介绍
+{**以下是 Gitee 平台说明，您可以替换此简介**
+Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
+无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "sh-chart",
+  "version": "1.5.2",
+  "description": "基于echart二次封装",
+  "main": "packages/index.js",
+  "scripts": {
+    "lib": "vue-cli-service build --target lib packages/index.js --name sh-chart --dest lib"
+  },
+  "keywords": [
+    "sh-chart"
+  ],
+  "author": "神秘的sh",
+  "license": "ISC",
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "core-js": "^3.8.3",
+    "echarts": "^5.4.0",
+    "sh-tools": "^1.2.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "babel-loader": "^9.1.2",
+    "compression-webpack-plugin": "~6.1.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "html-webpack-tags-plugin": "^3.0.2",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0"
+  }
+}

package/packages/components/global-components/mixin/autoResize.js

@@ -0,0 +1,152 @@
+let _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
+let _toConsumableArray2 = _interopRequireDefault(require('@babel/runtime/helpers/toConsumableArray'))
+var _typeof2 = _interopRequireDefault(require('@babel/runtime/helpers/typeof'))
+
+function debounce(delay, callback) {
+	let lastTime
+	return function () {
+		clearTimeout(lastTime)
+		const [that, args] = [this, arguments]
+		lastTime = setTimeout(() => {
+			callback.apply(that, args)
+		}, delay)
+	}
+}
+
+function observerDomResize(dom, callback) {
+	const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+	const observer = new MutationObserver(callback)
+	observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+	return observer
+}
+
+export default {
+	data() {
+		return {
+			dom: '',
+
+			width: 0,
+			height: 0,
+
+			debounceInitWHFun: '',
+
+			domObserver: ''
+		}
+	},
+	methods: {
+		uuid(hasHyphen) {
+			return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+				const r = (Math.random() * 16) | 0
+				const v = c === 'x' ? r : (r & 0x3) | 0x8
+				return v.toString(16)
+			})
+		},
+		fade(color, percent) {
+			return this.$vUtils.fade(color, percent)
+		},
+		randomExtend(minNum, maxNum) {
+			if (arguments.length === 1) {
+				return parseInt(Math.random() * minNum + 1, 10)
+			} else {
+				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+			}
+		},
+		deepMerge(target, merged) {
+			for (var key in merged) {
+				if (target[key] && (0, _typeof2['default'])(target[key]) === 'object') {
+					this.deepMerge(target[key], merged[key])
+					continue
+				}
+				if ((0, _typeof2['default'])(merged[key]) === 'object') {
+					target[key] = (0, _util.deepClone)(merged[key], true)
+					continue
+				}
+				target[key] = merged[key]
+			}
+			return target
+		},
+		getCircleRadianPoint(x, y, radius, radian) {
+			return [x + cos(radian) * radius, y + sin(radian) * radius]
+		},
+		getTwoPointDistance(pointOne, pointTwo) {
+			let minusX = Math.abs(pointOne[0] - pointTwo[0])
+			let minusY = Math.abs(pointOne[1] - pointTwo[1])
+			return Math.sqrt(minusX * minusX + minusY * minusY)
+		},
+		getPolylineLength(points) {
+			let lineSegments = new Array(points.length - 1).fill(0).map(function (foo, i) {
+				return [points[i], points[i + 1]]
+			})
+			let lengths = lineSegments.map(function (item) {
+				return this.getTwoPointDistance.apply(void 0, (0, _toConsumableArray2['default'])(item))
+			})
+			return this.$vUtils.sum(lengths)
+		},
+		async autoResizeMixinInit() {
+			const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
+
+			await initWH(false)
+
+			getDebounceInitWHFun()
+
+			bindDomResizeCallback()
+
+			if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
+		},
+		initWH(resize = true) {
+			const { $nextTick, $refs, ref, onResize } = this
+
+			return new Promise(resolve => {
+				$nextTick(_ => {
+					const dom = (this.dom = $refs[ref])
+
+					this.width = dom ? dom.clientWidth : 0
+					this.height = dom ? dom.clientHeight : 0
+
+					if (!dom) {
+						console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+					} else if (!this.width || !this.height) {
+						console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+					}
+
+					if (typeof onResize === 'function' && resize) onResize()
+
+					resolve()
+				})
+			})
+		},
+		getDebounceInitWHFun() {
+			const { initWH } = this
+
+			this.debounceInitWHFun = debounce(100, initWH)
+		},
+		bindDomResizeCallback() {
+			const { dom, debounceInitWHFun } = this
+
+			this.domObserver = observerDomResize(dom, debounceInitWHFun)
+
+			window.addEventListener('resize', debounceInitWHFun)
+		},
+		unbindDomResizeCallback() {
+			let { domObserver, debounceInitWHFun } = this
+
+			if (!domObserver) return
+
+			domObserver.disconnect()
+			domObserver.takeRecords()
+			domObserver = null
+
+			window.removeEventListener('resize', debounceInitWHFun)
+		}
+	},
+	mounted() {
+		const { autoResizeMixinInit } = this
+
+		autoResizeMixinInit()
+	},
+	beforeDestroy() {
+		const { unbindDomResizeCallback } = this
+
+		unbindDomResizeCallback()
+	}
+}

package/packages/components/global-components/sh-border/components/border1.vue

@@ -0,0 +1,70 @@
+<template>
+	<div :ref="ref" class="sh-border-box-1">
+		<svg class="border" :width="width" :height="height">
+			<polygon
+				:fill="backgroundColor"
+				:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+        38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+        85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+        ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+        ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+        ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+        ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+        ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+		</svg>
+
+		<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
+			<polygon :fill="mergedColor[0]" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+				<animate attributeName="fill" :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`" dur="0.5s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+			<polygon :fill="mergedColor[1]" points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+				<animate attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`" dur="0.5s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+			<polygon :fill="mergedColor[0]" points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+				<animate attributeName="fill" :values="`${mergedColor[0]};${mergedColor[1]};transparent`" dur="1s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder1',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-1 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border {
+		position: absolute;
+		display: block;
+		&.right-top {
+			right: 0;
+			transform: rotateY(180deg);
+		}
+		&.left-bottom {
+			bottom: 0;
+			transform: rotateX(180deg);
+		}
+		&.right-bottom {
+			right: 0;
+			bottom: 0;
+			transform: rotateX(180deg) rotateY(180deg);
+		}
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border10.vue

@@ -0,0 +1,54 @@
+<template>
+	<div :ref="ref" class="sh-border-box-10">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height} 4, ${height} 0, ${height - 4} 0, 4`" />
+		</svg>
+
+		<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border-svg-container`">
+			<polygon :fill="mergedColor[1]" points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder10',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-10 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border-radius: 6px;
+	.border-svg-container {
+		position: absolute;
+		display: block;
+	}
+	.right-top {
+		right: 0;
+		transform: rotateY(180deg);
+	}
+	.left-bottom {
+		bottom: 0;
+		transform: rotateX(180deg);
+	}
+	.right-bottom {
+		right: 0;
+		bottom: 0;
+		transform: rotateX(180deg) rotateY(180deg);
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border11.vue

@@ -0,0 +1,207 @@
+<template>
+	<div :ref="ref" class="sh-border-box-11">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+					<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+					<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+					<feFlood :flood-color="mergedColor[1]" result="glowColor" />
+					<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+					<feMerge>
+						<feMergeNode in="softGlowColored" />
+						<feMergeNode in="SourceGraphic" />
+					</feMerge>
+				</filter>
+			</defs>
+
+			<polygon
+				:fill="backgroundColor"
+				:points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+			<polyline
+				:stroke="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				fill="transparent"
+				:points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				fill="transparent"
+				:points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				:fill="fade(mergedColor[1] || defaultColor[1], 30)"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `" />
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="1"
+				:points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `">
+				<animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.7"
+				:points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `">
+				<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.5"
+				:points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `">
+				<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="1"
+				:points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `">
+				<animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.7"
+				:points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `">
+				<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.5"
+				:points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `">
+				<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<text class="border-box-11-title" :x="`${width / 2}`" y="32" fill="#fff" font-size="18" text-anchor="middle" dominant-baseline="middle">
+				{{ title }}
+			</text>
+
+			<polygon
+				:fill="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `" />
+
+			<polygon
+				:fill="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder11',
+	mixins: [mixin],
+	props: {
+		titleWidth: {
+			type: Number,
+			default: 250
+		},
+		title: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: {
+		filterId() {
+			return `border-box-11-filterId-${this.borderId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-11 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		& > polyline {
+			fill: none;
+			stroke-width: 1;
+		}
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>