Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5
This commit is contained in:
commit
9fcba07d62
@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
components: { EchartsUI },
|
||||
name: 'CommandChart',
|
||||
props: {
|
||||
data: {
|
||||
@ -18,31 +18,25 @@ export default defineComponent({
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
|
||||
const commandHtmlRef = ref<HTMLDivElement>();
|
||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!commandHtmlRef.value) return;
|
||||
if (!chartRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
echartsInstance.value = echarts.init(
|
||||
commandHtmlRef.value,
|
||||
preferences.theme.mode,
|
||||
);
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(mode) => {
|
||||
echartsInstance.value?.dispose();
|
||||
echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
|
||||
() => {
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
);
|
||||
@ -53,7 +47,7 @@ export default defineComponent({
|
||||
{
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicInOut',
|
||||
center: ['50%', '38%'],
|
||||
center: ['50%', '50%'],
|
||||
data,
|
||||
name: '命令',
|
||||
radius: [15, 95],
|
||||
@ -66,18 +60,20 @@ export default defineComponent({
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
echartsInstance.value?.setOption(option);
|
||||
renderEcharts(option);
|
||||
}
|
||||
|
||||
return {
|
||||
commandHtmlRef,
|
||||
chartRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="commandHtmlRef" class="h-[400px] w-full"></div>
|
||||
<div class="flex h-[400px] w-full items-center justify-center">
|
||||
<EchartsUI ref="chartRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
components: { EchartsUI },
|
||||
name: 'MemoryChart',
|
||||
props: {
|
||||
data: {
|
||||
@ -18,8 +18,8 @@ export default defineComponent({
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
|
||||
const memoryHtmlRef = ref<HTMLDivElement>();
|
||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const memoryHtmlRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(memoryHtmlRef);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
@ -31,18 +31,12 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
echartsInstance.value = echarts.init(
|
||||
memoryHtmlRef.value,
|
||||
preferences.theme.mode,
|
||||
);
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(mode) => {
|
||||
echartsInstance.value?.dispose();
|
||||
echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
|
||||
() => {
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
);
|
||||
@ -85,7 +79,7 @@ export default defineComponent({
|
||||
formatter: `{b} <br/>{a} : ${value}M`,
|
||||
},
|
||||
};
|
||||
echartsInstance.value?.setOption(options);
|
||||
renderEcharts(options);
|
||||
}
|
||||
|
||||
return {
|
||||
@ -96,7 +90,9 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="memoryHtmlRef" class="h-[400px] w-full"></div>
|
||||
<div class="flex h-[400px] w-full items-center justify-center">
|
||||
<EchartsUI ref="memoryHtmlRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
@ -12,7 +12,13 @@ import type {
|
||||
} from 'echarts/components';
|
||||
import type { ComposeOption } from 'echarts/core';
|
||||
|
||||
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
|
||||
import {
|
||||
BarChart,
|
||||
GaugeChart,
|
||||
LineChart,
|
||||
PieChart,
|
||||
RadarChart,
|
||||
} from 'echarts/charts';
|
||||
import {
|
||||
// 数据集组件
|
||||
DatasetComponent,
|
||||
@ -54,6 +60,7 @@ echarts.use([
|
||||
CanvasRenderer,
|
||||
LegendComponent,
|
||||
ToolboxComponent,
|
||||
GaugeChart,
|
||||
]);
|
||||
|
||||
export default echarts;
|
||||
|
Loading…
Reference in New Issue
Block a user