mirror of
https://gitee.com/dromara/go-view.git
synced 2026-05-30 00:00:05 +08:00
feat: 新增线条配置
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
|
||||
@@ -5,9 +5,9 @@ import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||
import data from './data.json'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||
import { ILineOption } from '../../index.d'
|
||||
import { ChatCategoryEnum, ILineOption } from '../../index.d'
|
||||
|
||||
export const includes = ['legends', 'tooltip']
|
||||
export const includes = ['legends', 'tooltip', 'label', 'line', 'point']
|
||||
export const option: ILineOption & { dataset?: any } = {
|
||||
// 图表配置
|
||||
type: 'line',
|
||||
@@ -16,8 +16,10 @@ export const option: ILineOption & { dataset?: any } = {
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
stack: true,
|
||||
// 开启百分比
|
||||
percent: false,
|
||||
// 业务配置(后续会被转换为图表spec)
|
||||
category: VChartLineConfig.category,
|
||||
category: VChartLineConfig.category as ChatCategoryEnum.LINE,
|
||||
xAxis: {
|
||||
name: 'x轴',
|
||||
...axisThemeJson,
|
||||
@@ -25,7 +27,7 @@ export const option: ILineOption & { dataset?: any } = {
|
||||
...axisThemeJson.grid,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
} as any,
|
||||
yAxis: {
|
||||
name: 'y轴',
|
||||
...axisThemeJson,
|
||||
@@ -36,7 +38,7 @@ export const option: ILineOption & { dataset?: any } = {
|
||||
lineDash: [3, 3]
|
||||
}
|
||||
}
|
||||
}
|
||||
} as any
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
||||
@@ -3,12 +3,26 @@
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<Axis :axis="optionData.xAxis"></Axis>
|
||||
<Axis :axis="optionData.yAxis"></Axis>
|
||||
<!-- 开启百分比 -->
|
||||
<CollapseItem name="百分比堆叠">
|
||||
<SettingItemBox name="配置" alone>
|
||||
<n-space>
|
||||
<span>开启百分比堆叠</span>
|
||||
<n-switch v-model:value="optionData.percent" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<Line :optionData="optionData"></Line>
|
||||
<Label :optionData="optionData" :positionOptions="labelConfig.linePosition"></Label>
|
||||
<Point :optionData="optionData"></Point>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||
import { VChartGlobalSetting, Axis, Label, Line, Point } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
|
||||
Reference in New Issue
Block a user