|
@@ -6,6 +6,7 @@ import { LineChart } from 'echarts/charts';
|
|
|
import {
|
|
|
AxisPointerComponent,
|
|
|
DatasetComponent,
|
|
|
+ DataZoomComponent,
|
|
|
GridComponent,
|
|
|
LegendComponent,
|
|
|
MarkLineComponent,
|
|
@@ -26,6 +27,7 @@ import type { Dayjs } from 'dayjs';
|
|
|
import type { LineSeriesOption } from 'echarts/charts';
|
|
|
import type {
|
|
|
DatasetComponentOption,
|
|
|
+ DataZoomComponentOption,
|
|
|
GridComponentOption,
|
|
|
LegendComponentOption,
|
|
|
TooltipComponentOption,
|
|
@@ -42,10 +44,16 @@ use([
|
|
|
DatasetComponent,
|
|
|
GridComponent,
|
|
|
LineChart,
|
|
|
+ DataZoomComponent,
|
|
|
]);
|
|
|
|
|
|
type EChartsOption = ComposeOption<
|
|
|
- LegendComponentOption | TooltipComponentOption | DatasetComponentOption | GridComponentOption | LineSeriesOption
|
|
|
+ | LegendComponentOption
|
|
|
+ | TooltipComponentOption
|
|
|
+ | DatasetComponentOption
|
|
|
+ | GridComponentOption
|
|
|
+ | LineSeriesOption
|
|
|
+ | DataZoomComponentOption
|
|
|
>;
|
|
|
|
|
|
interface Props {
|
|
@@ -188,10 +196,31 @@ const option = computed<EChartsOption>(() => {
|
|
|
grid: {
|
|
|
top: 10,
|
|
|
right: 30,
|
|
|
- bottom: 20,
|
|
|
+ bottom: 90,
|
|
|
left: 30,
|
|
|
containLabel: true,
|
|
|
},
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ bottom: 35,
|
|
|
+ handleStyle: {
|
|
|
+ label: { show: false },
|
|
|
+ },
|
|
|
+ showDetail: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ bottom: 35,
|
|
|
+ handleStyle: {
|
|
|
+ label: { show: false },
|
|
|
+ },
|
|
|
+ showDetail: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
});
|
|
|
|