1.28 更换echarts文件
This commit is contained in:
尚政杰
@@ -0,0 +1,316 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const DIR_CCW = "counterclockwise";
|
||||
const DIR_CW = "clockwise";
|
||||
const generateId = () => {
|
||||
const base = 999999 * Math.random();
|
||||
return Math.round(base) + 1e5;
|
||||
};
|
||||
const _sfc_main = {
|
||||
name: "zui-progress-circle",
|
||||
components: {},
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
/**
|
||||
* 当前位置
|
||||
*
|
||||
* [0, 1]
|
||||
*/
|
||||
position: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 环形起止位置
|
||||
*/
|
||||
range: {
|
||||
type: [Array],
|
||||
default: () => [0, 360]
|
||||
},
|
||||
/**
|
||||
* 方向
|
||||
*/
|
||||
direction: {
|
||||
type: String,
|
||||
default: DIR_CW,
|
||||
validator(val) {
|
||||
return [DIR_CCW, DIR_CW].includes(val);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 环形宽度
|
||||
*/
|
||||
ringWidth: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
/**
|
||||
* 端点效果
|
||||
*
|
||||
* round | butt | square
|
||||
*/
|
||||
linecap: {
|
||||
type: String,
|
||||
default: "round"
|
||||
},
|
||||
/**
|
||||
* 纹理贴图，组件支持配置前景和背景2个贴图
|
||||
*
|
||||
* 贴图可以是一个颜色，一个渐变填充，一个 base64 编码的图片。3种贴图可以搭配使用
|
||||
*
|
||||
*/
|
||||
texture: {
|
||||
type: [String, Array],
|
||||
default: () => ["#1BB507", "#E2D8D8"]
|
||||
},
|
||||
pointer: String,
|
||||
pointerOffset: Number,
|
||||
/**
|
||||
* 修复遮盖问题
|
||||
*/
|
||||
fixOverlay: Boolean,
|
||||
debug: Boolean
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
preset() {
|
||||
const preset = {};
|
||||
preset.start = this.range[0];
|
||||
preset.end = this.range[0] > this.range[1] ? this.range[1] + 360 : this.range[1];
|
||||
preset.ringRadius = (this.size - this.ringWidth) / 2;
|
||||
preset.ringCenter = this.size / 2;
|
||||
preset.ringPerimeter = 2 * Math.PI * preset.ringRadius;
|
||||
preset.ringLength = (preset.end - preset.start) * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringStart = preset.start * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringEnd = preset.end * Math.PI * preset.ringRadius / 180;
|
||||
if (/^(ccw|counterclockwise)$/i.test(this.direction))
|
||||
preset.direction = DIR_CCW;
|
||||
else
|
||||
preset.direction = DIR_CW;
|
||||
return preset;
|
||||
},
|
||||
textureFG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[0], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#1BB507", textureSize);
|
||||
}
|
||||
},
|
||||
textureBG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[1], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#E2D8D8", textureSize);
|
||||
}
|
||||
},
|
||||
hasBackground() {
|
||||
return !!this.textureBG;
|
||||
},
|
||||
svgDataUrl() {
|
||||
let svg = this.createSVG();
|
||||
svg = `data:image/svg+xml,${encodeURIComponent(svg.replace(/ +/g, " "))}`;
|
||||
return svg;
|
||||
},
|
||||
style() {
|
||||
const style = {
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`,
|
||||
"--zui-progress-circle-ring-size": `${this.size}px`,
|
||||
"--zui-progress-circle-ring-width": `${this.ringWidth}px`
|
||||
};
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
},
|
||||
pointerStyle() {
|
||||
const style = {};
|
||||
const { start, end, ringRadius } = this.preset;
|
||||
let rotate = (end - start) * this.position + start;
|
||||
if (this.linecap === "round" || this.linecap === "butt") {
|
||||
rotate += this.ringWidth / 3 * 180 / (Math.PI * ringRadius);
|
||||
}
|
||||
const offset = this.pointerOffset || 0;
|
||||
style["--zui-progress-circle-pointer-rotate"] = `translate(-${offset}px, -50%) rotate(${rotate}deg)`;
|
||||
style["--zui-progress-circle-pointer-center"] = `${offset}px 50%`;
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTexture(texture, textureSize) {
|
||||
if (!texture)
|
||||
return void 0;
|
||||
if (/^#[0-9a-f]+/i.test(texture)) {
|
||||
return {
|
||||
type: "color",
|
||||
value: texture
|
||||
};
|
||||
}
|
||||
const defId = generateId();
|
||||
if (/Gradient>/i.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(
|
||||
/<(\w+Gradient) /,
|
||||
`<$1 id="def_${defId}" `
|
||||
);
|
||||
}
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (Object.prototype.toString.call(texture) === "[object Array]") {
|
||||
texture = this.createGradient(defId, texture.slice(1), texture[0]);
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (/<pattern /.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(/<pattern /, `<$1 id="def_${defId}" `);
|
||||
}
|
||||
} else {
|
||||
texture = this.createPattern(`def_${defId}`, texture, textureSize);
|
||||
}
|
||||
return {
|
||||
type: "pattern",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 创建渐变填充
|
||||
*
|
||||
* @param {color[]} stops 渐变颜色
|
||||
* @param {number} angle 渐变填充角度
|
||||
*/
|
||||
createGradient(id, stops, angle) {
|
||||
const step = 100 / (stops.length - 1);
|
||||
const stopNodes = new Array(stops.length).fill(null).map((_, idx) => {
|
||||
return `<stop offset="${step * idx * 100}%" stop-color="${stops[idx]}" />`;
|
||||
});
|
||||
return `<linearGradient id="def_${id}" x1="0%" y1="0%" x2="100%" y2="64.9%" gradientTransform="rotate(${angle})">
|
||||
${stopNodes.join("")}
|
||||
</linearGradient>`;
|
||||
},
|
||||
/**
|
||||
* 创建文理填充
|
||||
*
|
||||
* @param {string} img base64 image. URI not surpported.
|
||||
*/
|
||||
createPattern(id, img, size) {
|
||||
return `<pattern id="${id}" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
||||
<image xlink:href="${img}" x="0" y="0" width="100%" height="100%"/>
|
||||
</pattern>`;
|
||||
},
|
||||
/**
|
||||
* 创建圆环
|
||||
*
|
||||
* @param {string} fill 纹理ID
|
||||
* @param {number[]} dasharray 弧形数据
|
||||
*/
|
||||
createCircle(fill, dasharray, type) {
|
||||
const { ringCenter, ringRadius, fixOverlay } = this.preset;
|
||||
const circle = {
|
||||
cx: ringCenter,
|
||||
cy: ringCenter,
|
||||
r: ringRadius,
|
||||
// 前景环稍大点, 用于遮盖底部环纹理
|
||||
"stroke-width": this.ringWidth,
|
||||
stroke: fill && fill.value,
|
||||
"stroke-linecap": this.linecap,
|
||||
"stroke-dasharray": dasharray.join(",")
|
||||
};
|
||||
if (fixOverlay) {
|
||||
const fw = type === "fg" ? this.ringWidth : this.ringWidth - 1;
|
||||
circle["stroke-width"] = fw > 8 ? fw : 8;
|
||||
}
|
||||
const props = Object.keys(circle).map((key) => circle[key] ? `${key}="${circle[key]}"` : "").join(" ");
|
||||
return `<circle fill="none" stroke-dashoffset="1" ${props}></circle>`;
|
||||
},
|
||||
generateDashArray(pos) {
|
||||
const {
|
||||
direction,
|
||||
ringStart,
|
||||
ringPerimeter,
|
||||
ringLength
|
||||
} = this.preset;
|
||||
let ringStartPos = direction === DIR_CCW ? ringStart + (1 - pos) * ringLength : ringStart;
|
||||
let dash1 = 0;
|
||||
let dash2 = 0;
|
||||
let dash3 = 0;
|
||||
dash2 = 1 + ringStartPos;
|
||||
dash3 = pos * ringLength;
|
||||
const npos = ringStartPos + pos * ringLength;
|
||||
if (npos > ringPerimeter) {
|
||||
dash1 = npos - ringPerimeter;
|
||||
dash2 = ringStartPos - dash1;
|
||||
} else {
|
||||
dash1 = 0;
|
||||
}
|
||||
return [dash1, dash2, dash3, ringPerimeter];
|
||||
},
|
||||
/**
|
||||
* 创建 SVG 图形
|
||||
*/
|
||||
createSVG() {
|
||||
const cirleBG = this.hasBackground ? this.createCircle(this.textureBG, this.generateDashArray(1)) : "";
|
||||
const cirleFG = this.createCircle(
|
||||
this.textureFG,
|
||||
this.generateDashArray(this.position),
|
||||
"fg"
|
||||
);
|
||||
const defs = [this.textureFG.def || "", this.textureBG && this.textureBG.def || ""];
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.size}" height="${this.size}">
|
||||
<defs>
|
||||
${defs.join("\n")}
|
||||
</defs>
|
||||
<g>
|
||||
${cirleBG}
|
||||
${cirleFG}
|
||||
</g>
|
||||
</svg>`;
|
||||
return svg;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.pointer
|
||||
}, $props.pointer ? {
|
||||
b: $props.pointer,
|
||||
c: common_vendor.s($options.pointerStyle)
|
||||
} : {}, {
|
||||
d: $options.svgDataUrl,
|
||||
e: $props.debug
|
||||
}, $props.debug ? {} : {}, {
|
||||
f: common_vendor.n($props.debug ? "debug" : ""),
|
||||
g: common_vendor.s($options.style)
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-dbeba832"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/zui-progress-circle/components/zui-progress-circle/zui-progress-circle.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view ref="eleMeter" class="{{['data-v-dbeba832', 'zui-progress-circle', f]}}" style="{{g}}"><view class="zui-progress-circle-wrapper data-v-dbeba832"><image wx:if="{{a}}" class="zui-progress-circle-pointer data-v-dbeba832" mode="aspectFit" src="{{b}}" style="{{c}}"/><image class="zui-progress-circle-ring data-v-dbeba832" mode="aspectFit" src="{{d}}"/></view><view class="zui-progress-circle-slot data-v-dbeba832"><slot/></view><view wx:if="{{e}}" class="debug-frame data-v-dbeba832"><view class="cross-v data-v-dbeba832"></view><view class="cross-h data-v-dbeba832"></view><view class="half-size data-v-dbeba832"></view></view></view>
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.zui-progress-circle.data-v-dbeba832 {
|
||||
--zui-progress-circle-debug-color: #f00;
|
||||
position: relative;
|
||||
}
|
||||
.zui-progress-circle-wrapper.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zui-progress-circle-ring.data-v-dbeba832 {
|
||||
width: var(--zui-progress-circle-ring-size);
|
||||
height: var(--zui-progress-circle-ring-size);
|
||||
}
|
||||
.zui-progress-circle-slot.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--zui-progress-circle-ring-width);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zui-progress-circle-pointer.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: var(--zui-progress-circle-pointer-rotate);
|
||||
transform-origin: var(--zui-progress-circle-pointer-center);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832,
|
||||
.cross-v.data-v-dbeba832,
|
||||
.cross-h.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832, .cross-v.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--zui-progress-circle-debug-color);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.cross-v.data-v-dbeba832 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
.half-size.data-v-dbeba832 {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
Reference in New Issue
Block a user