@zhsz/cool-design-dv
Version:
139 lines (138 loc) • 4.62 kB
JavaScript
import { defineComponent, inject, getCurrentInstance, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx } from "vue";
import Loading from "../dv-loading/index.mjs";
import { merge } from "lodash-es";
import { LinearGradient } from "echarts/lib/util/graphic";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { useChart } from "../../hooks/useChart.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import Box from "../dv-box/index.mjs";
import "../chart/chart-my/index.mjs";
import MyChartBar from "../chart/chart-bar/index.mjs";
import "../chart/chart-line/index.mjs";
const __default__ = defineComponent({
name: "DvBar",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
columns: Array,
rows: Array,
loader: Function,
settings: Object,
extend: {
type: [Object, Function]
},
debug: Boolean,
rotate: Boolean,
cross: Boolean,
gradient: Boolean,
legend: Boolean
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a;
const props = __props;
const page = inject(dvPageSymbols, null);
const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
const mergeExtend = computed(() => {
var _a2;
const extend = typeof props.extend === "function" ? props.extend() : props.extend;
const yAxis = ((_a2 = props == null ? void 0 : props.settings) == null ? void 0 : _a2.direction) === "y";
return Object.freeze(
merge(
{
color: props.gradient ? createLinearGradient() : void 0,
legend: props.legend ? {
top: 20,
right: 20,
itemWidth: 10,
itemHeight: 10,
icon: "rect"
} : {
show: false
},
grid: {
top: props.legend ? 50 : 30,
right: 30,
bottom: 50,
left: 60
},
series: {
barCategoryGap: "50%"
},
xAxis: {
axisLabel: {
interval: 0,
rotate: props.rotate && !yAxis ? 45 : 0
}
},
yAxis: {
axisLabel: {
interval: 0,
rotate: props.rotate && yAxis ? 45 : 0
}
},
tooltip: {
axisPointer: {
type: props.cross ? "cross" : "item"
}
}
},
extend
)
);
});
const emits = __emit;
const { resize, width, height, loading, theme, chartData } = useChart(
emits,
props,
page
);
function createLinearGradient() {
var _a2, _b;
const colors = ((_a2 = page == null ? void 0 : page.settings.value) == null ? void 0 : _a2.colors) || [];
const direction = ((_b = props.settings) == null ? void 0 : _b.direction) === "y" ? [1, 0, 0, 0] : [0, 0, 0, 1];
return colors.map((color, i) => {
const target = colors[(i + 1) % colors.length];
return new LinearGradient(...direction, [
{ offset: 0, color },
{ offset: 1, color: target }
]);
});
}
onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
onBeforeUnmount(() => {
removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Box), mergeProps({
class: "my-dv-chart my-dv-bar",
"default-width": "600px",
"default-height": "400px"
}, _ctx.$attrs), {
default: withCtx(() => [
unref(loading) ? (openBlock(), createBlock(unref(Loading), {
key: 0,
zoom: 0.6
})) : (openBlock(), createBlock(unref(MyChartBar), mergeProps({ key: 1 }, _ctx.$attrs, {
debug: __props.debug,
theme: unref(theme),
settings: __props.settings,
extend: mergeExtend.value,
width: `${unref(width)}px`,
height: `${unref(height)}px`,
data: unref(chartData)
}), null, 16, ["debug", "theme", "settings", "extend", "width", "height", "data"]))
]),
_: 1
}, 16);
};
}
});
export {
_sfc_main as default
};