update dist and lib
This commit is contained in:
JM
parent
7e9cca32ad
commit
005ae41e29
|
|
@ -21161,6 +21161,788 @@
|
|||
|
||||
//
|
||||
var script$x = {
|
||||
name: 'DvFlylineChartEnhanced',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dev: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${timestamp}`,
|
||||
haloGradientId: `halo-gradient-id-${timestamp}`,
|
||||
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
* interface Halo {
|
||||
* show?: boolean
|
||||
* duration?: [number, number]
|
||||
* color?: string
|
||||
* radius?: number
|
||||
* }
|
||||
*
|
||||
* interface Text {
|
||||
* show?: boolean
|
||||
* offset?: [number, number]
|
||||
* color?: string
|
||||
* fontSize?: number
|
||||
* }
|
||||
*
|
||||
* interface Icon {
|
||||
* show?: boolean
|
||||
* src?: string
|
||||
* width?: number
|
||||
* height?: number
|
||||
* }
|
||||
*
|
||||
* interface Point {
|
||||
* name: string
|
||||
* coordinate: [number, number]
|
||||
* halo?: Halo
|
||||
* text?: Text
|
||||
* icon?: Icon
|
||||
* }
|
||||
*
|
||||
* interface Line {
|
||||
* width?: number
|
||||
* color?: string
|
||||
* orbitColor?: string
|
||||
* duration?: [number, number]
|
||||
* radius?: string
|
||||
* }
|
||||
*
|
||||
* interface Flyline extends Line {
|
||||
* source: string
|
||||
* target: string
|
||||
* }
|
||||
*
|
||||
* interface FlylineWithPath extends Flyline {
|
||||
* d: string
|
||||
* path: [[number, number], [number, number], [number, number]]
|
||||
* key: string
|
||||
* }
|
||||
*/
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart points
|
||||
* @type {Point[]}
|
||||
* @default points = []
|
||||
*/
|
||||
points: [],
|
||||
|
||||
/**
|
||||
* @description Lines
|
||||
* @type {Flyline[]}
|
||||
* @default lines = []
|
||||
*/
|
||||
lines: [],
|
||||
|
||||
/**
|
||||
* @description Global halo configuration
|
||||
* @type {Halo}
|
||||
*/
|
||||
halo: {
|
||||
/**
|
||||
* @description Whether to show halo
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
|
||||
/**
|
||||
* @description Halo animation duration (1s = 10)
|
||||
* @type {[number, number]}
|
||||
*/
|
||||
duration: [20, 30],
|
||||
|
||||
/**
|
||||
* @description Halo color
|
||||
* @type {String}
|
||||
* @default color = '#fb7293'
|
||||
*/
|
||||
color: '#fb7293',
|
||||
|
||||
/**
|
||||
* @description Halo radius
|
||||
* @type {Number}
|
||||
* @default radius = 120
|
||||
*/
|
||||
radius: 120
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Global text configuration
|
||||
* @type {Text}
|
||||
*/
|
||||
text: {
|
||||
/**
|
||||
* @description Whether to show text
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
|
||||
/**
|
||||
* @description Text offset
|
||||
* @type {[number, number]}
|
||||
* @default offset = [0, 15]
|
||||
*/
|
||||
offset: [0, 15],
|
||||
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default color = '#ffdb5c'
|
||||
*/
|
||||
color: '#ffdb5c',
|
||||
|
||||
/**
|
||||
* @description Text font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Global icon configuration
|
||||
* @type {Icon}
|
||||
*/
|
||||
icon: {
|
||||
/**
|
||||
* @description Whether to show icon
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
|
||||
/**
|
||||
* @description Icon src
|
||||
* @type {String}
|
||||
* @default src = ''
|
||||
*/
|
||||
src: '',
|
||||
|
||||
/**
|
||||
* @description Icon width
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
width: 15,
|
||||
|
||||
/**
|
||||
* @description Icon height
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
height: 15
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Global line configuration
|
||||
* @type {Line}
|
||||
*/
|
||||
line: {
|
||||
/**
|
||||
* @description Line width
|
||||
* @type {Number}
|
||||
* @default width = 1
|
||||
*/
|
||||
width: 1,
|
||||
|
||||
/**
|
||||
* @description Flyline color
|
||||
* @type {String}
|
||||
* @default color = '#ffde93'
|
||||
*/
|
||||
color: '#ffde93',
|
||||
|
||||
/**
|
||||
* @description Orbit color
|
||||
* @type {String}
|
||||
* @default orbitColor = 'rgba(103, 224, 227, .2)'
|
||||
*/
|
||||
orbitColor: 'rgba(103, 224, 227, .2)',
|
||||
|
||||
/**
|
||||
* @description Flyline animation duration
|
||||
* @type {[number, number]}
|
||||
* @default duration = [20, 30]
|
||||
*/
|
||||
duration: [20, 30],
|
||||
|
||||
/**
|
||||
* @description Flyline radius
|
||||
* @type {Number}
|
||||
* @default radius = 100
|
||||
*/
|
||||
radius: 100
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Back ground image url
|
||||
* @type {String}
|
||||
* @default bgImgSrc = ''
|
||||
*/
|
||||
bgImgSrc: '',
|
||||
|
||||
/**
|
||||
* @description K value
|
||||
* @type {Number}
|
||||
* @default k = -0.5
|
||||
* @example k = -1 ~ 1
|
||||
*/
|
||||
k: -0.5,
|
||||
|
||||
/**
|
||||
* @description Flyline curvature
|
||||
* @type {Number}
|
||||
* @default curvature = 5
|
||||
*/
|
||||
curvature: 5,
|
||||
|
||||
/**
|
||||
* @description Relative points position
|
||||
* @type {Boolean}
|
||||
* @default relative = true
|
||||
*/
|
||||
relative: true
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Fly line data
|
||||
* @type {FlylineWithPath[]}
|
||||
* @default flylines = []
|
||||
*/
|
||||
flylines: [],
|
||||
|
||||
/**
|
||||
* @description Fly line lengths
|
||||
* @type {Number[]}
|
||||
* @default flylineLengths = []
|
||||
*/
|
||||
flylineLengths: [],
|
||||
|
||||
/**
|
||||
* @description Fly line points
|
||||
* @default flylinePoints = []
|
||||
*/
|
||||
flylinePoints: [],
|
||||
mergedConfig: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
config() {
|
||||
const {
|
||||
calcData
|
||||
} = this;
|
||||
calcData();
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit() {
|
||||
const {
|
||||
calcData
|
||||
} = this;
|
||||
calcData();
|
||||
},
|
||||
|
||||
onResize() {
|
||||
const {
|
||||
calcData
|
||||
} = this;
|
||||
calcData();
|
||||
},
|
||||
|
||||
async calcData() {
|
||||
const {
|
||||
mergeConfig,
|
||||
calcflylinePoints,
|
||||
calcLinePaths
|
||||
} = this;
|
||||
mergeConfig();
|
||||
calcflylinePoints();
|
||||
calcLinePaths();
|
||||
const {
|
||||
calcLineLengths
|
||||
} = this;
|
||||
await calcLineLengths();
|
||||
},
|
||||
|
||||
mergeConfig() {
|
||||
let {
|
||||
config,
|
||||
defaultConfig
|
||||
} = this;
|
||||
const mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
|
||||
const {
|
||||
points,
|
||||
lines,
|
||||
halo,
|
||||
text,
|
||||
icon,
|
||||
line
|
||||
} = mergedConfig;
|
||||
mergedConfig.points = points.map(item => {
|
||||
item.halo = util_2$1(util_1(halo, true), item.halo || {});
|
||||
item.text = util_2$1(util_1(text, true), item.text || {});
|
||||
item.icon = util_2$1(util_1(icon, true), item.icon || {});
|
||||
return item;
|
||||
});
|
||||
mergedConfig.lines = lines.map(item => {
|
||||
return util_2$1(util_1(line, true), item);
|
||||
});
|
||||
this.mergedConfig = mergedConfig;
|
||||
},
|
||||
|
||||
calcflylinePoints() {
|
||||
const {
|
||||
mergedConfig,
|
||||
width,
|
||||
height
|
||||
} = this;
|
||||
const {
|
||||
relative,
|
||||
points
|
||||
} = mergedConfig;
|
||||
if (!relative) return;
|
||||
this.flylinePoints = points.map((item, i) => {
|
||||
const {
|
||||
coordinate: [x, y],
|
||||
halo,
|
||||
icon,
|
||||
text
|
||||
} = item;
|
||||
if (relative) item.coordinate = [x * width, y * height];
|
||||
item.halo.time = randomExtend(...halo.duration) / 10;
|
||||
const {
|
||||
width: iw,
|
||||
height: ih
|
||||
} = icon;
|
||||
item.icon.x = item.coordinate[0] - iw / 2;
|
||||
item.icon.y = item.coordinate[1] - ih / 2;
|
||||
const [ox, oy] = text.offset;
|
||||
item.text.x = item.coordinate[0] + ox;
|
||||
item.text.y = item.coordinate[1] + oy;
|
||||
item.key = `${item.coordinate.toString()}${i}`;
|
||||
return item;
|
||||
});
|
||||
},
|
||||
|
||||
calcLinePaths() {
|
||||
const {
|
||||
getPath,
|
||||
mergedConfig
|
||||
} = this;
|
||||
const {
|
||||
points,
|
||||
lines
|
||||
} = mergedConfig;
|
||||
this.flylines = lines.map(item => {
|
||||
const {
|
||||
source,
|
||||
target,
|
||||
duration
|
||||
} = item;
|
||||
const sourcePoint = points.find(({
|
||||
name
|
||||
}) => name === source).coordinate;
|
||||
const targetPoint = points.find(({
|
||||
name
|
||||
}) => name === target).coordinate;
|
||||
const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))));
|
||||
const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`;
|
||||
const key = `path${path.toString()}`;
|
||||
const time = randomExtend(...duration) / 10;
|
||||
return { ...item,
|
||||
path,
|
||||
key,
|
||||
d,
|
||||
time
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
getPath(start, end) {
|
||||
const {
|
||||
getControlPoint
|
||||
} = this;
|
||||
const controlPoint = getControlPoint(start, end);
|
||||
return [start, controlPoint, end];
|
||||
},
|
||||
|
||||
getControlPoint([sx, sy], [ex, ey]) {
|
||||
const {
|
||||
getKLinePointByx,
|
||||
mergedConfig
|
||||
} = this;
|
||||
const {
|
||||
curvature,
|
||||
k
|
||||
} = mergedConfig;
|
||||
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2];
|
||||
const distance = getPointDistance([sx, sy], [ex, ey]);
|
||||
const targetLength = distance / curvature;
|
||||
const disDived = targetLength / 2;
|
||||
let [dx, dy] = [mx, my];
|
||||
|
||||
do {
|
||||
dx += disDived;
|
||||
dy = getKLinePointByx(k, [mx, my], dx)[1];
|
||||
} while (getPointDistance([mx, my], [dx, dy]) < targetLength);
|
||||
|
||||
return [dx, dy];
|
||||
},
|
||||
|
||||
getKLinePointByx(k, [lx, ly], x) {
|
||||
const y = ly - k * lx + k * x;
|
||||
return [x, y];
|
||||
},
|
||||
|
||||
async calcLineLengths() {
|
||||
const {
|
||||
$nextTick,
|
||||
flylines,
|
||||
$refs
|
||||
} = this;
|
||||
await $nextTick();
|
||||
this.flylineLengths = flylines.map(({
|
||||
key
|
||||
}) => $refs[key][0].getTotalLength());
|
||||
},
|
||||
|
||||
consoleClickPos({
|
||||
offsetX,
|
||||
offsetY
|
||||
}) {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
dev
|
||||
} = this;
|
||||
if (!dev) return;
|
||||
const relativeX = (offsetX / width).toFixed(2);
|
||||
const relativeY = (offsetY / height).toFixed(2);
|
||||
console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/* script */
|
||||
const __vue_script__$x = script$x;
|
||||
|
||||
/* template */
|
||||
var __vue_render__$x = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c(
|
||||
"div",
|
||||
{
|
||||
ref: _vm.ref,
|
||||
staticClass: "dv-flyline-chart-enhanced",
|
||||
style:
|
||||
"background-image: url(" +
|
||||
(_vm.mergedConfig ? _vm.mergedConfig.bgImgSrc : "") +
|
||||
")",
|
||||
on: { click: _vm.consoleClickPos }
|
||||
},
|
||||
[
|
||||
_vm.flylines.length
|
||||
? _c(
|
||||
"svg",
|
||||
{ attrs: { width: _vm.width, height: _vm.height } },
|
||||
[
|
||||
_c(
|
||||
"defs",
|
||||
[
|
||||
_c(
|
||||
"radialGradient",
|
||||
{
|
||||
attrs: {
|
||||
id: _vm.flylineGradientId,
|
||||
cx: "50%",
|
||||
cy: "50%",
|
||||
r: "50%"
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("stop", {
|
||||
attrs: {
|
||||
offset: "0%",
|
||||
"stop-color": "#fff",
|
||||
"stop-opacity": "1"
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c("stop", {
|
||||
attrs: {
|
||||
offset: "100%",
|
||||
"stop-color": "#fff",
|
||||
"stop-opacity": "0"
|
||||
}
|
||||
})
|
||||
],
|
||||
1
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"radialGradient",
|
||||
{
|
||||
attrs: {
|
||||
id: _vm.haloGradientId,
|
||||
cx: "50%",
|
||||
cy: "50%",
|
||||
r: "50%"
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("stop", {
|
||||
attrs: {
|
||||
offset: "0%",
|
||||
"stop-color": "#fff",
|
||||
"stop-opacity": "0"
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c("stop", {
|
||||
attrs: {
|
||||
offset: "100%",
|
||||
"stop-color": "#fff",
|
||||
"stop-opacity": "1"
|
||||
}
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
],
|
||||
1
|
||||
),
|
||||
_vm._v(" "),
|
||||
_vm._l(_vm.flylinePoints, function(point) {
|
||||
return _c("g", { key: point.key + Math.random() }, [
|
||||
_c("defs", [
|
||||
point.halo.show
|
||||
? _c(
|
||||
"circle",
|
||||
{
|
||||
attrs: {
|
||||
id: "halo" + _vm.unique + point.key,
|
||||
cx: point.coordinate[0],
|
||||
cy: point.coordinate[1]
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("animate", {
|
||||
attrs: {
|
||||
attributeName: "r",
|
||||
values: "1;" + point.halo.radius,
|
||||
dur: point.halo.time + "s",
|
||||
repeatCount: "indefinite"
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c("animate", {
|
||||
attrs: {
|
||||
attributeName: "opacity",
|
||||
values: "1;0",
|
||||
dur: point.halo.time + "s",
|
||||
repeatCount: "indefinite"
|
||||
}
|
||||
})
|
||||
]
|
||||
)
|
||||
: _vm._e()
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"mask",
|
||||
{ attrs: { id: "mask" + _vm.unique + point.key } },
|
||||
[
|
||||
point.halo.show
|
||||
? _c("use", {
|
||||
attrs: {
|
||||
"xlink:href": "#halo" + _vm.unique + point.key,
|
||||
fill: "url(#" + _vm.haloGradientId + ")"
|
||||
}
|
||||
})
|
||||
: _vm._e()
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
point.halo.show
|
||||
? _c("use", {
|
||||
attrs: {
|
||||
"xlink:href": "#halo" + _vm.unique + point.key,
|
||||
fill: point.halo.color,
|
||||
mask: "url(#mask" + _vm.unique + point.key + ")"
|
||||
}
|
||||
})
|
||||
: _vm._e(),
|
||||
_vm._v(" "),
|
||||
point.icon.show
|
||||
? _c("image", {
|
||||
attrs: {
|
||||
"xlink:href": point.icon.src,
|
||||
width: point.icon.width,
|
||||
height: point.icon.height,
|
||||
x: point.icon.x,
|
||||
y: point.icon.y
|
||||
}
|
||||
})
|
||||
: _vm._e(),
|
||||
_vm._v(" "),
|
||||
point.text.show
|
||||
? _c(
|
||||
"text",
|
||||
{
|
||||
style:
|
||||
"fontSize:" +
|
||||
point.text.fontSize +
|
||||
"px;color:" +
|
||||
point.text.color,
|
||||
attrs: {
|
||||
fill: point.text.color,
|
||||
x: point.text.x,
|
||||
y: point.text.y
|
||||
}
|
||||
},
|
||||
[_vm._v("\n " + _vm._s(point.name) + "\n ")]
|
||||
)
|
||||
: _vm._e()
|
||||
])
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_vm._l(_vm.flylines, function(line, i) {
|
||||
return _c("g", { key: line.key + Math.random() }, [
|
||||
_c("defs", [
|
||||
_c("path", {
|
||||
ref: line.key,
|
||||
refInFor: true,
|
||||
attrs: { id: line.key, d: line.d, fill: "transparent" }
|
||||
})
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("use", {
|
||||
attrs: {
|
||||
"xlink:href": "#" + line.key,
|
||||
"stroke-width": line.width,
|
||||
stroke: line.orbitColor
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"mask",
|
||||
{ attrs: { id: "mask" + _vm.unique + line.key } },
|
||||
[
|
||||
_c(
|
||||
"circle",
|
||||
{
|
||||
attrs: {
|
||||
cx: "0",
|
||||
cy: "0",
|
||||
r: line.radius,
|
||||
fill: "url(#" + _vm.flylineGradientId + ")"
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("animateMotion", {
|
||||
attrs: {
|
||||
dur: line.time,
|
||||
path: line.d,
|
||||
rotate: "auto",
|
||||
repeatCount: "indefinite"
|
||||
}
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_vm.flylineLengths[i]
|
||||
? _c(
|
||||
"use",
|
||||
{
|
||||
attrs: {
|
||||
"xlink:href": "#" + line.key,
|
||||
"stroke-width": line.width,
|
||||
stroke: line.color,
|
||||
mask: "url(#mask" + _vm.unique + line.key + ")"
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("animate", {
|
||||
attrs: {
|
||||
attributeName: "stroke-dasharray",
|
||||
from: "0, " + _vm.flylineLengths[i],
|
||||
to: _vm.flylineLengths[i] + ", 0",
|
||||
dur: line.time,
|
||||
repeatCount: "indefinite"
|
||||
}
|
||||
})
|
||||
]
|
||||
)
|
||||
: _vm._e()
|
||||
])
|
||||
})
|
||||
],
|
||||
2
|
||||
)
|
||||
: _vm._e()
|
||||
]
|
||||
)
|
||||
};
|
||||
var __vue_staticRenderFns__$x = [];
|
||||
__vue_render__$x._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__$x = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-185fc66c_0", { source: ".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
const __vue_scope_id__$x = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__$x = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__$x = false;
|
||||
/* style inject SSR */
|
||||
|
||||
|
||||
|
||||
var FlylineChartEnhanced = normalizeComponent_1(
|
||||
{ render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
|
||||
__vue_inject_styles__$x,
|
||||
__vue_script__$x,
|
||||
__vue_scope_id__$x,
|
||||
__vue_is_functional_template__$x,
|
||||
__vue_module_identifier__$x,
|
||||
browser,
|
||||
undefined
|
||||
);
|
||||
|
||||
function flylineChartEnhanced (Vue) {
|
||||
Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced);
|
||||
}
|
||||
|
||||
//
|
||||
var script$y = {
|
||||
name: 'DvConicalColumnChart',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
|
|
@ -21341,10 +22123,10 @@
|
|||
};
|
||||
|
||||
/* script */
|
||||
const __vue_script__$x = script$x;
|
||||
const __vue_script__$y = script$y;
|
||||
|
||||
/* template */
|
||||
var __vue_render__$x = function() {
|
||||
var __vue_render__$y = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
|
|
@ -21404,32 +22186,32 @@
|
|||
)
|
||||
])
|
||||
};
|
||||
var __vue_staticRenderFns__$x = [];
|
||||
__vue_render__$x._withStripped = true;
|
||||
var __vue_staticRenderFns__$y = [];
|
||||
__vue_render__$y._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__$x = function (inject) {
|
||||
const __vue_inject_styles__$y = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-382f06c7_0", { source: ".dv-conical-column-chart {\n width: 100%;\n height: 100%;\n}\n.dv-conical-column-chart text {\n text-anchor: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-conical-column-chart {\n width: 100%;\n height: 100%;\n}\n.dv-conical-column-chart text {\n text-anchor: middle;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
const __vue_scope_id__$x = undefined;
|
||||
const __vue_scope_id__$y = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__$x = undefined;
|
||||
const __vue_module_identifier__$y = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__$x = false;
|
||||
const __vue_is_functional_template__$y = false;
|
||||
/* style inject SSR */
|
||||
|
||||
|
||||
|
||||
var ConicalColumnChart = normalizeComponent_1(
|
||||
{ render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
|
||||
__vue_inject_styles__$x,
|
||||
__vue_script__$x,
|
||||
__vue_scope_id__$x,
|
||||
__vue_is_functional_template__$x,
|
||||
__vue_module_identifier__$x,
|
||||
{ render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
|
||||
__vue_inject_styles__$y,
|
||||
__vue_script__$y,
|
||||
__vue_scope_id__$y,
|
||||
__vue_is_functional_template__$y,
|
||||
__vue_module_identifier__$y,
|
||||
browser,
|
||||
undefined
|
||||
);
|
||||
|
|
@ -21443,7 +22225,7 @@
|
|||
}
|
||||
|
||||
//
|
||||
var script$y = {
|
||||
var script$z = {
|
||||
name: 'DvScrollBoard',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
|
|
@ -21804,10 +22586,10 @@
|
|||
};
|
||||
|
||||
/* script */
|
||||
const __vue_script__$y = script$y;
|
||||
const __vue_script__$z = script$z;
|
||||
|
||||
/* template */
|
||||
var __vue_render__$y = function() {
|
||||
var __vue_render__$z = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
|
|
@ -21889,32 +22671,32 @@
|
|||
: _vm._e()
|
||||
])
|
||||
};
|
||||
var __vue_staticRenderFns__$y = [];
|
||||
__vue_render__$y._withStripped = true;
|
||||
var __vue_staticRenderFns__$z = [];
|
||||
__vue_render__$z._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__$y = function (inject) {
|
||||
const __vue_inject_styles__$z = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-1aad958a_0", { source: ".dv-scroll-board {\n position: relative;\n width: 100%;\n height: 100%;\n color: #fff;\n}\n.dv-scroll-board .text {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n display: flex;\n flex-direction: row;\n font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n display: flex;\n font-size: 14px;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n border-radius: 3px;\n padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n position: relative;\n width: 100%;\n height: 100%;\n color: #fff;\n}\n.dv-scroll-board .text {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n display: flex;\n flex-direction: row;\n font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n display: flex;\n font-size: 14px;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n border-radius: 3px;\n padding: 0px 3px;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
const __vue_scope_id__$y = undefined;
|
||||
const __vue_scope_id__$z = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__$y = undefined;
|
||||
const __vue_module_identifier__$z = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__$y = false;
|
||||
const __vue_is_functional_template__$z = false;
|
||||
/* style inject SSR */
|
||||
|
||||
|
||||
|
||||
var ScrollBoard = normalizeComponent_1(
|
||||
{ render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
|
||||
__vue_inject_styles__$y,
|
||||
__vue_script__$y,
|
||||
__vue_scope_id__$y,
|
||||
__vue_is_functional_template__$y,
|
||||
__vue_module_identifier__$y,
|
||||
{ render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
|
||||
__vue_inject_styles__$z,
|
||||
__vue_script__$z,
|
||||
__vue_scope_id__$z,
|
||||
__vue_is_functional_template__$z,
|
||||
__vue_module_identifier__$z,
|
||||
browser,
|
||||
undefined
|
||||
);
|
||||
|
|
@ -21924,7 +22706,7 @@
|
|||
}
|
||||
|
||||
//
|
||||
var script$z = {
|
||||
var script$A = {
|
||||
name: 'DvScrollRankingBoard',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
|
|
@ -22154,10 +22936,10 @@
|
|||
};
|
||||
|
||||
/* script */
|
||||
const __vue_script__$z = script$z;
|
||||
const __vue_script__$A = script$A;
|
||||
|
||||
/* template */
|
||||
var __vue_render__$z = function() {
|
||||
var __vue_render__$A = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
|
|
@ -22204,32 +22986,32 @@
|
|||
0
|
||||
)
|
||||
};
|
||||
var __vue_staticRenderFns__$z = [];
|
||||
__vue_render__$z._withStripped = true;
|
||||
var __vue_staticRenderFns__$A = [];
|
||||
__vue_render__$A._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__$z = function (inject) {
|
||||
const __vue_inject_styles__$A = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-4fe9e817_0", { source: ".dv-scroll-ranking-board {\n width: 100%;\n height: 100%;\n color: #fff;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n transition: all 0.3s;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n display: flex;\n width: 100%;\n font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n width: 40px;\n color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n position: relative;\n height: 6px;\n background-color: #1370fb;\n margin-bottom: 2px;\n border-radius: 1px;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n position: absolute;\n left: 0%;\n top: 2px;\n height: 2px;\n width: 50px;\n transform: translateX(-100%);\n background: radial-gradient(#28f8ff 5%, transparent 80%);\n animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n left: 0%;\n transform: translateX(-100%);\n}\n100% {\n left: 100%;\n transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n width: 100%;\n height: 100%;\n color: #fff;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n transition: all 0.3s;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n display: flex;\n width: 100%;\n font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n width: 40px;\n color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n position: relative;\n height: 6px;\n background-color: #1370fb;\n margin-bottom: 2px;\n border-radius: 1px;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n position: absolute;\n left: 0%;\n top: 2px;\n height: 2px;\n width: 50px;\n transform: translateX(-100%);\n background: radial-gradient(#28f8ff 5%, transparent 80%);\n animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n 80% {\n left: 0%;\n transform: translateX(-100%);\n }\n 100% {\n left: 100%;\n transform: translateX(0%);\n }\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
const __vue_scope_id__$z = undefined;
|
||||
const __vue_scope_id__$A = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__$z = undefined;
|
||||
const __vue_module_identifier__$A = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__$z = false;
|
||||
const __vue_is_functional_template__$A = false;
|
||||
/* style inject SSR */
|
||||
|
||||
|
||||
|
||||
var ScrollRankingBoard = normalizeComponent_1(
|
||||
{ render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
|
||||
__vue_inject_styles__$z,
|
||||
__vue_script__$z,
|
||||
__vue_scope_id__$z,
|
||||
__vue_is_functional_template__$z,
|
||||
__vue_module_identifier__$z,
|
||||
{ render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
|
||||
__vue_inject_styles__$A,
|
||||
__vue_script__$A,
|
||||
__vue_scope_id__$A,
|
||||
__vue_is_functional_template__$A,
|
||||
__vue_module_identifier__$A,
|
||||
browser,
|
||||
undefined
|
||||
);
|
||||
|
|
@ -22281,6 +23063,7 @@
|
|||
Vue.use(waterLevelPond);
|
||||
Vue.use(percentPond);
|
||||
Vue.use(flylineChart);
|
||||
Vue.use(flylineChartEnhanced);
|
||||
Vue.use(conicalColumnChart);
|
||||
Vue.use(digitalFlop);
|
||||
Vue.use(scrollBoard);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import FlylineChartEnhanced from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.dv-flyline-chart-enhanced {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dv-flyline-chart-enhanced text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,568 @@
|
|||
<template>
|
||||
<div
|
||||
class="dv-flyline-chart-enhanced"
|
||||
:style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
|
||||
:ref="ref"
|
||||
@click="consoleClickPos"
|
||||
>
|
||||
<svg v-if="flylines.length" :width="width" :height="height">
|
||||
<defs>
|
||||
<radialGradient
|
||||
:id="flylineGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient
|
||||
:id="haloGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- points -->
|
||||
<g v-for="point in flylinePoints" :key="point.key + Math.random()">
|
||||
<defs>
|
||||
<circle
|
||||
v-if="point.halo.show"
|
||||
:id="`halo${unique}${point.key}`"
|
||||
:cx="point.coordinate[0]"
|
||||
:cy="point.coordinate[1]"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${point.halo.radius}`"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</defs>
|
||||
|
||||
<!-- halo gradient mask -->
|
||||
<mask :id="`mask${unique}${point.key}`">
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="`url(#${haloGradientId})`"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<!-- point halo -->
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="point.halo.color"
|
||||
:mask="`url(#mask${unique}${point.key})`"
|
||||
/>
|
||||
|
||||
<!-- point icon -->
|
||||
<image
|
||||
v-if="point.icon.show"
|
||||
:xlink:href="point.icon.src"
|
||||
:width="point.icon.width"
|
||||
:height="point.icon.height"
|
||||
:x="point.icon.x"
|
||||
:y="point.icon.y"
|
||||
/>
|
||||
|
||||
<!-- point text -->
|
||||
<text
|
||||
v-if="point.text.show"
|
||||
:style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
|
||||
:fill="point.text.color"
|
||||
:x="point.text.x"
|
||||
:y="point.text.y"
|
||||
>
|
||||
{{ point.name }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- flylines -->
|
||||
<g v-for="(line, i) in flylines" :key="line.key + Math.random()">
|
||||
<defs>
|
||||
<path
|
||||
:id="line.key"
|
||||
:ref="line.key"
|
||||
:d="line.d"
|
||||
fill="transparent"
|
||||
/>
|
||||
</defs>
|
||||
|
||||
<!-- orbit line -->
|
||||
<use
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.orbitColor"
|
||||
/>
|
||||
|
||||
<!-- fly line gradient mask -->
|
||||
<mask :id="`mask${unique}${line.key}`">
|
||||
<circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
|
||||
<animateMotion
|
||||
:dur="line.time"
|
||||
:path="line.d"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
|
||||
<!-- fly line -->
|
||||
<use
|
||||
v-if="flylineLengths[i]"
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.color"
|
||||
:mask="`url(#mask${unique}${line.key})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${flylineLengths[i]}`"
|
||||
:to="`${flylineLengths[i]}, 0`"
|
||||
:dur="line.time"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvFlylineChartEnhanced',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dev: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${timestamp}`,
|
||||
haloGradientId: `halo-gradient-id-${timestamp}`,
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
* interface Halo {
|
||||
* show?: boolean
|
||||
* duration?: [number, number]
|
||||
* color?: string
|
||||
* radius?: number
|
||||
* }
|
||||
*
|
||||
* interface Text {
|
||||
* show?: boolean
|
||||
* offset?: [number, number]
|
||||
* color?: string
|
||||
* fontSize?: number
|
||||
* }
|
||||
*
|
||||
* interface Icon {
|
||||
* show?: boolean
|
||||
* src?: string
|
||||
* width?: number
|
||||
* height?: number
|
||||
* }
|
||||
*
|
||||
* interface Point {
|
||||
* name: string
|
||||
* coordinate: [number, number]
|
||||
* halo?: Halo
|
||||
* text?: Text
|
||||
* icon?: Icon
|
||||
* }
|
||||
*
|
||||
* interface Line {
|
||||
* width?: number
|
||||
* color?: string
|
||||
* orbitColor?: string
|
||||
* duration?: [number, number]
|
||||
* radius?: string
|
||||
* }
|
||||
*
|
||||
* interface Flyline extends Line {
|
||||
* source: string
|
||||
* target: string
|
||||
* }
|
||||
*
|
||||
* interface FlylineWithPath extends Flyline {
|
||||
* d: string
|
||||
* path: [[number, number], [number, number], [number, number]]
|
||||
* key: string
|
||||
* }
|
||||
*/
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart points
|
||||
* @type {Point[]}
|
||||
* @default points = []
|
||||
*/
|
||||
points: [],
|
||||
/**
|
||||
* @description Lines
|
||||
* @type {Flyline[]}
|
||||
* @default lines = []
|
||||
*/
|
||||
lines: [],
|
||||
/**
|
||||
* @description Global halo configuration
|
||||
* @type {Halo}
|
||||
*/
|
||||
halo: {
|
||||
/**
|
||||
* @description Whether to show halo
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Halo animation duration (1s = 10)
|
||||
* @type {[number, number]}
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Halo color
|
||||
* @type {String}
|
||||
* @default color = '#fb7293'
|
||||
*/
|
||||
color: '#fb7293',
|
||||
/**
|
||||
* @description Halo radius
|
||||
* @type {Number}
|
||||
* @default radius = 120
|
||||
*/
|
||||
radius: 120
|
||||
},
|
||||
/**
|
||||
* @description Global text configuration
|
||||
* @type {Text}
|
||||
*/
|
||||
text: {
|
||||
/**
|
||||
* @description Whether to show text
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Text offset
|
||||
* @type {[number, number]}
|
||||
* @default offset = [0, 15]
|
||||
*/
|
||||
offset: [0, 15],
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default color = '#ffdb5c'
|
||||
*/
|
||||
color: '#ffdb5c',
|
||||
/**
|
||||
* @description Text font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12
|
||||
},
|
||||
/**
|
||||
* @description Global icon configuration
|
||||
* @type {Icon}
|
||||
*/
|
||||
icon: {
|
||||
/**
|
||||
* @description Whether to show icon
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Icon src
|
||||
* @type {String}
|
||||
* @default src = ''
|
||||
*/
|
||||
src: '',
|
||||
/**
|
||||
* @description Icon width
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
width: 15,
|
||||
/**
|
||||
* @description Icon height
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
height: 15
|
||||
},
|
||||
/**
|
||||
* @description Global line configuration
|
||||
* @type {Line}
|
||||
*/
|
||||
line: {
|
||||
/**
|
||||
* @description Line width
|
||||
* @type {Number}
|
||||
* @default width = 1
|
||||
*/
|
||||
width: 1,
|
||||
/**
|
||||
* @description Flyline color
|
||||
* @type {String}
|
||||
* @default color = '#ffde93'
|
||||
*/
|
||||
color: '#ffde93',
|
||||
/**
|
||||
* @description Orbit color
|
||||
* @type {String}
|
||||
* @default orbitColor = 'rgba(103, 224, 227, .2)'
|
||||
*/
|
||||
orbitColor: 'rgba(103, 224, 227, .2)',
|
||||
/**
|
||||
* @description Flyline animation duration
|
||||
* @type {[number, number]}
|
||||
* @default duration = [20, 30]
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Flyline radius
|
||||
* @type {Number}
|
||||
* @default radius = 100
|
||||
*/
|
||||
radius: 100
|
||||
},
|
||||
/**
|
||||
* @description Back ground image url
|
||||
* @type {String}
|
||||
* @default bgImgSrc = ''
|
||||
*/
|
||||
bgImgSrc: '',
|
||||
/**
|
||||
* @description K value
|
||||
* @type {Number}
|
||||
* @default k = -0.5
|
||||
* @example k = -1 ~ 1
|
||||
*/
|
||||
k: -0.5,
|
||||
/**
|
||||
* @description Flyline curvature
|
||||
* @type {Number}
|
||||
* @default curvature = 5
|
||||
*/
|
||||
curvature: 5,
|
||||
/**
|
||||
* @description Relative points position
|
||||
* @type {Boolean}
|
||||
* @default relative = true
|
||||
*/
|
||||
relative: true
|
||||
},
|
||||
/**
|
||||
* @description Fly line data
|
||||
* @type {FlylineWithPath[]}
|
||||
* @default flylines = []
|
||||
*/
|
||||
flylines: [],
|
||||
/**
|
||||
* @description Fly line lengths
|
||||
* @type {Number[]}
|
||||
* @default flylineLengths = []
|
||||
*/
|
||||
flylineLengths: [],
|
||||
/**
|
||||
* @description Fly line points
|
||||
* @default flylinePoints = []
|
||||
*/
|
||||
flylinePoints: [],
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
async calcData () {
|
||||
const { mergeConfig, calcflylinePoints, calcLinePaths } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcflylinePoints()
|
||||
|
||||
calcLinePaths()
|
||||
|
||||
const { calcLineLengths } = this
|
||||
|
||||
await calcLineLengths()
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
|
||||
const { points, lines, halo, text, icon, line } = mergedConfig
|
||||
|
||||
mergedConfig.points = points.map(item => {
|
||||
item.halo = deepMerge(deepClone(halo, true), item.halo || {})
|
||||
item.text = deepMerge(deepClone(text, true), item.text || {})
|
||||
item.icon = deepMerge(deepClone(icon, true), item.icon || {})
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
mergedConfig.lines = lines.map(item => {
|
||||
return deepMerge(deepClone(line, true), item)
|
||||
})
|
||||
|
||||
this.mergedConfig = mergedConfig
|
||||
},
|
||||
calcflylinePoints () {
|
||||
const { mergedConfig, width, height } = this
|
||||
|
||||
const { relative, points } = mergedConfig
|
||||
|
||||
if (!relative) return
|
||||
|
||||
this.flylinePoints = points.map((item, i) => {
|
||||
const { coordinate: [x, y], halo, icon, text } = item
|
||||
|
||||
if (relative) item.coordinate = [x * width, y * height]
|
||||
|
||||
item.halo.time = randomExtend(...halo.duration) / 10
|
||||
|
||||
const { width: iw, height: ih } = icon
|
||||
item.icon.x = item.coordinate[0] - iw / 2
|
||||
item.icon.y = item.coordinate[1] - ih / 2
|
||||
|
||||
const [ox, oy] = text.offset
|
||||
item.text.x = item.coordinate[0] + ox
|
||||
item.text.y = item.coordinate[1] + oy
|
||||
|
||||
item.key = `${item.coordinate.toString()}${i}`
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
calcLinePaths () {
|
||||
const { getPath, mergedConfig } = this
|
||||
|
||||
const { points, lines } = mergedConfig
|
||||
|
||||
this.flylines = lines.map(item => {
|
||||
const { source, target, duration } = item
|
||||
|
||||
const sourcePoint = points.find(({ name }) => name === source).coordinate
|
||||
const targetPoint = points.find(({ name }) => name === target).coordinate
|
||||
|
||||
const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
|
||||
const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
|
||||
const key = `path${path.toString()}`
|
||||
const time = randomExtend(...duration) / 10
|
||||
|
||||
return { ...item, path, key, d, time }
|
||||
})
|
||||
},
|
||||
getPath (start, end) {
|
||||
const { getControlPoint } = this
|
||||
|
||||
const controlPoint = getControlPoint(start, end)
|
||||
|
||||
return [start, controlPoint, end]
|
||||
},
|
||||
getControlPoint ([sx, sy], [ex, ey]) {
|
||||
const { getKLinePointByx, mergedConfig } = this
|
||||
|
||||
const { curvature, k } = mergedConfig
|
||||
|
||||
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
|
||||
|
||||
const distance = getPointDistance([sx, sy], [ex, ey])
|
||||
|
||||
const targetLength = distance / curvature
|
||||
const disDived = targetLength / 2
|
||||
|
||||
let [dx, dy] = [mx, my]
|
||||
|
||||
do {
|
||||
dx += disDived
|
||||
dy = getKLinePointByx(k, [mx, my], dx)[1]
|
||||
} while (getPointDistance([mx, my], [dx, dy]) < targetLength)
|
||||
|
||||
return [dx, dy]
|
||||
},
|
||||
getKLinePointByx (k, [lx, ly], x) {
|
||||
const y = ly - k * lx + k * x
|
||||
|
||||
return [x, y]
|
||||
},
|
||||
async calcLineLengths () {
|
||||
const { $nextTick, flylines, $refs } = this
|
||||
|
||||
await $nextTick()
|
||||
|
||||
this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
|
||||
},
|
||||
consoleClickPos ({ offsetX, offsetY }) {
|
||||
const { width, height, dev } = this
|
||||
|
||||
if (!dev) return
|
||||
|
||||
const relativeX = (offsetX / width).toFixed(2)
|
||||
const relativeY = (offsetY / height).toFixed(2)
|
||||
|
||||
console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -31,6 +31,7 @@ export { default as decoration8 } from './components/decoration8/index'
|
|||
export { default as decoration9 } from './components/decoration9/index'
|
||||
export { default as digitalFlop } from './components/digitalFlop/index'
|
||||
export { default as flylineChart } from './components/flylineChart/index'
|
||||
export { default as flylineChartEnhanced } from './components/flylineChartEnhanced/index'
|
||||
export { default as fullScreenContainer } from './components/fullScreenContainer/index'
|
||||
export { default as loading } from './components/loading/index'
|
||||
export { default as percentPond } from './components/percentPond/index'
|
||||
|
|
@ -79,6 +80,7 @@ import capsuleChart from './components/capsuleChart'
|
|||
import waterLevelPond from './components/waterLevelPond/index'
|
||||
import percentPond from './components/percentPond/index'
|
||||
import flylineChart from './components/flylineChart'
|
||||
import flylineChartEnhanced from './components/flylineChartEnhanced'
|
||||
import conicalColumnChart from './components/conicalColumnChart'
|
||||
import digitalFlop from './components/digitalFlop'
|
||||
import scrollBoard from './components/scrollBoard/index'
|
||||
|
|
@ -127,6 +129,7 @@ export default function (Vue) {
|
|||
Vue.use(waterLevelPond)
|
||||
Vue.use(percentPond)
|
||||
Vue.use(flylineChart)
|
||||
Vue.use(flylineChartEnhanced)
|
||||
Vue.use(conicalColumnChart)
|
||||
Vue.use(digitalFlop)
|
||||
Vue.use(scrollBoard)
|
||||
|
|
|
|||
Loading…
Reference in New Issue