feat: 新增 border

This commit is contained in:
MTrun 2022-03-26 11:31:14 +08:00
parent 9326c9a59c
commit 71972f0d8c
9 changed files with 78 additions and 80 deletions

View File

@ -134,14 +134,14 @@
<n-select
v-model:value="xAxis.splitLine.lineStyle.type"
size="small"
:options="axisConf.splitLint.lineStyle.type"
:options="axisConfig.splitLint.lineStyle.type"
></n-select>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="xAxis.position"
size="small"
:options="axisConf.xposition"
:options="axisConfig.xposition"
></n-select>
</setting-item>
</setting-item-box>
@ -247,14 +247,14 @@
<n-select
v-model:value="yAxis.splitLine.lineStyle.type"
size="small"
:options="axisConf.splitLint.lineStyle.type"
:options="axisConfig.splitLint.lineStyle.type"
></n-select>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="yAxis.position"
size="small"
:options="axisConf.yposition"
:options="axisConfig.yposition"
></n-select>
</setting-item>
</setting-item-box>
@ -282,7 +282,7 @@
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { axisConf } from '@/packages/chartConfiguration/echarts/index'
import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
import {
CollapseItem,
SettingItemBox,

View File

@ -1,34 +0,0 @@
import { onMounted, ref, watch } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import merge from 'lodash/merge'
/**
* border-hook
* @param props
* @param _defaultColor
* @param afterResizeFun resize容器之后执行函数
*/
export const useBorderBox = (props: any, _defaultColor: string[]) => {
const mergedColor = ref([])
const defaultColor = ref(_defaultColor)
function mergeColor() {
mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || [])
}
watch(
() => [props.color, props.reverse],
() => {
mergeColor()
}
)
onMounted(() => {
mergeColor()
})
return {
defaultColor,
mergeColor,
mergedColor
}
}

View File

@ -1,4 +1,4 @@
export const axisConf = {
export const axisConfig = {
xposition: [
{
label: 'top',

View File

@ -0,0 +1,12 @@
import { publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import {BorderCommonConfig} from './index'
import cloneDeep from 'lodash/cloneDeep'
export default class Config extends publicConfig implements CreateComponentType {
public key = BorderCommonConfig.key
public chartConfig = cloneDeep(BorderCommonConfig)
public borderOptions = {
colors: ['#6586ec', '#2cf7fe']
}
}

View File

@ -1,6 +1,35 @@
<template>
<CollapseItem name="颜色" :expanded="true">
<!-- <SettingItemBox
name="图形"
v-for="(item, index) in optionData.borderOptions.colors"
:key="index"
>
<SettingItem :name="`颜色-${index + 1}`">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.borderOptions.colors[index]"
></n-color-picker>
</SettingItem>
</SettingItemBox> -->
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
import Config from './config'
const props = defineProps({
optionData: {
type: Object as PropType<Config>,
required: true
}
})
console.log(props.optionData)
</script>

View File

@ -1,70 +1,60 @@
<template>
<div></div>
<!-- <div class="bv-border-box-13" ref="domRef">
<svg class="bv-border-svg-container" :width="width" :height="height">
<div class="bv-border-box-13" ref="domRef">
<svg class="bv-border-svg-container" :width="w" :height="h">
<path
:fill="backgroundColor"
:stroke="mergedColor[0]"
fill="transparent"
:stroke="colors[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${width - 20} 10 L ${width - 5} 25
L ${width - 5} ${height - 5} L 20 ${height - 5}
L 5 ${height - 20} L 5 20
L ${w - 20} 10 L ${w - 5} 25
L ${w - 5} ${h - 5} L 20 ${h - 5}
L 5 ${h - 20} L 5 20
`"
/>
<path
fill="transparent"
stroke-width="3"
stroke-w="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
:stroke="mergedColor[0]"
:stroke="colors[0]"
:d="`M 16 9 L 61 9`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:stroke="colors[1]"
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
width - 30
} ${height - 5}`"
:stroke="colors[1]"
:d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${
w - 30
} ${h - 5}`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div> -->
</div>
</template>
<script setup lang="ts">
// import { useBorderBox } from '@/hooks'
// const props = defineProps({
// width: {
// type: Number,
// default: 200
// },
// height: {
// type: Number,
// default: 200
// },
// color: {
// type: Array,
// default: () => []
// },
// backgroundColor: {
// type: String,
// default: 'transparent'
// }
// })
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
// const {defaultColor, mergedColor} = useBorderBox(props, ['#6586ec', '#2cf7fe'])
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
},
})
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.borderOptions)
</script>
<style lang="scss" scoped></style>

View File

@ -36,7 +36,8 @@ export interface PublicConfigType extends requestConfig {
export interface CreateComponentType extends PublicConfigType {
key: string
chartConfig: ConfigType
option: GlobalThemeJsonType
option?: GlobalThemeJsonType
[T: string]: any
}
// 获取组件实例类中某个key对应value类型的方法

View File

@ -10,8 +10,8 @@
<styles-setting :chartStyles="targetData.styles"></styles-setting>
<!-- 自定义配置项 -->
<component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
<!-- 全局设置 -->
<global-setting :optionData="targetData.option" :in-chart="true"></global-setting>
<!-- Echarts 全局设置 -->
<global-setting v-if="targetData.option" :optionData="targetData.option" :in-chart="true"></global-setting>
</div>
</template>

View File

@ -53,7 +53,7 @@
type="segment"
>
<n-tab-pane
v-for="item in canvasTabList"
v-for="(item, index) in canvasTabList"
:key="item.key"
:name="item.key"
size="small"