mirror of https://github.com/alibaba/arthas.git
refactor(web ui):refactor echarts component
辗转反侧的咸鱼
2 years ago
committed by
hengyunabc
parent
be27d0e51d
commit
f74167bfdb
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import Chart from "./Base.vue"
|
||||
import * as echarts from 'echarts/core';
|
||||
import { DatasetComponentOption, DataZoomComponent, DataZoomComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from 'echarts/components';
|
||||
import { BarChart, BarSeriesOption, } from 'echarts/charts';
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
import { BarChartOption } from "@/echart";
|
||||
let useList = ([
|
||||
// LegendComponent,
|
||||
BarChart,
|
||||
LabelLayout,
|
||||
GridComponent,
|
||||
DataZoomComponent
|
||||
]);
|
||||
const props = defineProps<{ option: BarChartOption }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Chart :use-list="useList" :option="props.option"></Chart>
|
||||
</template>
|
||||
@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts/core';
|
||||
import { SVGRenderer } from 'echarts/renderers';
|
||||
import { TitleComponent, TitleComponentOption, TooltipComponent, TooltipComponentOption, ToolboxComponent, LegendComponent} from 'echarts/components'
|
||||
import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
|
||||
// option && myChart.setOption(option);
|
||||
|
||||
type GetTuple<T extends unknown> = T extends T
|
||||
? T extends [...infer E]
|
||||
? T
|
||||
: never
|
||||
: never
|
||||
type UseType = GetTuple<Parameters<typeof echarts.use>[0]>
|
||||
// echarts.ECharts
|
||||
type OptionType = Parameters<echarts.ECharts["setOption"]>[0]
|
||||
const props = defineProps<{
|
||||
useList: UseType,
|
||||
option: OptionType,
|
||||
}>()
|
||||
|
||||
// type EChartsOption = echarts.ComposeOption<TooltipComponentOption | TitleComponentOption | DatasetComponentOption | PieSeriesOption>;
|
||||
const container = ref(null)
|
||||
let myChart: echarts.ECharts
|
||||
echarts.use([
|
||||
...props.useList,
|
||||
SVGRenderer,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
LegendComponent
|
||||
])
|
||||
|
||||
|
||||
// 抽离出来使得resize事件可以在全局挂载和卸载
|
||||
const resizeDom = () => {
|
||||
myChart && myChart.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
// container.value.el.id = chartId.toString()
|
||||
let dom = container.value
|
||||
myChart = echarts.init(dom as unknown as HTMLElement)
|
||||
myChart && myChart.setOption<OptionType>({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
...props.option
|
||||
})
|
||||
window.addEventListener("resize", resizeDom)
|
||||
})
|
||||
watch(props.option, (newData: any) => {
|
||||
myChart && newData && myChart.setOption(newData, true)
|
||||
console.log(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
myChart && myChart.dispose()
|
||||
window.removeEventListener("resize", resizeDom)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="container" class="w-full h-full"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
// import Chart from "./Chart.vue"
|
||||
import * as echarts from 'echarts/core';
|
||||
import { DatasetComponent, DatasetComponentOption, LegendComponent, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
import { CircleChartOption } from "@/echart";
|
||||
import Base from './Base.vue';
|
||||
let useList = ([
|
||||
PieChart,
|
||||
LabelLayout,
|
||||
DatasetComponent
|
||||
]);
|
||||
// type CircleChartsOption = echarts.ComposeOption<TooltipComponentOption | TitleComponentOption | DatasetComponentOption | PieSeriesOption>;
|
||||
const props = defineProps<{ option: CircleChartOption }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Base :use-list="useList" :option="props.option" />
|
||||
</template>
|
||||
@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import Chart from "./Base.vue"
|
||||
import * as echarts from 'echarts/core';
|
||||
import { DataZoomComponent, GridComponent } from 'echarts/components';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
import { LineChartOption } from "@/echart";
|
||||
let useList = ([
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
GridComponent,
|
||||
DataZoomComponent
|
||||
]);
|
||||
const props = defineProps<{ option: LineChartOption }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Chart :use-list="useList" :option="props.option"></Chart>
|
||||
</template>
|
||||
@ -0,0 +1,47 @@
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
DatasetComponentOption,
|
||||
DataZoomComponentOption,
|
||||
GridComponentOption,
|
||||
LegendComponentOption,
|
||||
TitleComponentOption,
|
||||
ToolboxComponentOption,
|
||||
TooltipComponentOption,
|
||||
} from "echarts/components";
|
||||
import {
|
||||
BarSeriesOption,
|
||||
LineSeriesOption,
|
||||
PieSeriesOption,
|
||||
} from "echarts/charts";
|
||||
type LineChartOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| TitleComponentOption
|
||||
| DatasetComponentOption
|
||||
| LineSeriesOption
|
||||
| TitleComponentOption
|
||||
| ToolboxComponentOption
|
||||
| TooltipComponentOption
|
||||
| GridComponentOption
|
||||
| LegendComponentOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
>;
|
||||
|
||||
type BarChartOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| TitleComponentOption
|
||||
| DatasetComponentOption
|
||||
| BarSeriesOption
|
||||
| DataZoomComponentOption
|
||||
| LegendComponentOption
|
||||
| GridComponentOption
|
||||
| ToolboxComponentOption
|
||||
>;
|
||||
|
||||
type CircleChartOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| TitleComponentOption
|
||||
| DatasetComponentOption
|
||||
| PieSeriesOption
|
||||
| LegendComponentOption
|
||||
>;
|
||||
Loading…
Reference in New Issue