mirror of
https://gitee.com/dromara/go-view.git
synced 2024-11-30 02:38:30 +08:00
Merge branch 'dev' into dev-commet
This commit is contained in:
tntgroup
commit
94a8855b13
@ -24,6 +24,7 @@
|
||||
"axios": "^0.27.2",
|
||||
"color": "^4.2.3",
|
||||
"crypto-js": "^4.1.1",
|
||||
"dayjs": "^1.11.7",
|
||||
"dom-helpers": "^5.2.1",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts-stat": "^1.2.0",
|
||||
@ -74,7 +75,7 @@
|
||||
"sass": "^1.49.11",
|
||||
"sass-loader": "^12.6.0",
|
||||
"typescript": "4.6.3",
|
||||
"vite": "2.9.9",
|
||||
"vite": "4.2.1",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-importer": "^0.2.5",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
|
||||
2831
pnpm-lock.yaml
2831
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -21,6 +21,7 @@ axiosInstance.interceptors.request.use(
|
||||
axiosInstance.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
const { code } = res.data as { code: number }
|
||||
if (code === undefined || code === null) return Promise.resolve(res)
|
||||
if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
|
||||
// 重定向
|
||||
if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
|
||||
|
||||
@ -172,7 +172,9 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
||||
|
||||
case RequestBodyEnum.JSON:
|
||||
headers['Content-Type'] = ContentTypeEnum.JSON
|
||||
data = translateStr(JSON.parse(targetRequestParams.Body['json']))
|
||||
//json对象也能使用'javasctipt:'来动态拼接参数
|
||||
data = translateStr(targetRequestParams.Body['json'])
|
||||
if(typeof data === 'string') data = JSON.parse(data)
|
||||
// json 赋值给 data
|
||||
break
|
||||
|
||||
|
||||
100
src/api/mock/graph.json
Normal file
100
src/api/mock/graph.json
Normal file
@ -0,0 +1,100 @@
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"id": "0",
|
||||
"name": "Myriel",
|
||||
"symbolSize": "@integer(0, 50)",
|
||||
"x": -266.82776,
|
||||
"y": 299.6904,
|
||||
"value": "@integer(0, 50)",
|
||||
"category": 3
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Napoleon",
|
||||
"symbolSize": "@integer(0, 50)",
|
||||
"x": -418.08344,
|
||||
"y": 446.8853,
|
||||
"value": "@integer(0, 50)",
|
||||
"category": 5
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "MlleBaptistine",
|
||||
"symbolSize": "@integer(0, 50)",
|
||||
"x": -212.76357,
|
||||
"y": 245.29176,
|
||||
"value": "@integer(0, 50)",
|
||||
"category": 1
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "MmeMagloire",
|
||||
"symbolSize": "@integer(0, 50)",
|
||||
"x": -242.82404,
|
||||
"y": 235.26283,
|
||||
"value": "@integer(0, 50)",
|
||||
"category": 1
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "CountessDeLo",
|
||||
"symbolSize": "@integer(0, 50)",
|
||||
"x": -379.30386,
|
||||
"y": 429.06424,
|
||||
"value": "@integer(0, 50)",
|
||||
"category": 0
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"source": "1",
|
||||
"target": "@integer(2, 4)"
|
||||
},
|
||||
{
|
||||
"source": "2",
|
||||
"target": "@integer(3, 4)"
|
||||
},
|
||||
{
|
||||
"source": "3",
|
||||
"target": "@integer(0, 2)"
|
||||
},
|
||||
{
|
||||
"source": "3",
|
||||
"target": "@integer(0, 1)"
|
||||
},
|
||||
{
|
||||
"source": "4",
|
||||
"target": "@integer(0, 3)"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
{
|
||||
"name": "A"
|
||||
},
|
||||
{
|
||||
"name": "B"
|
||||
},
|
||||
{
|
||||
"name": "C"
|
||||
},
|
||||
{
|
||||
"name": "D"
|
||||
},
|
||||
{
|
||||
"name": "E"
|
||||
},
|
||||
{
|
||||
"name": "F"
|
||||
},
|
||||
{
|
||||
"name": "G"
|
||||
},
|
||||
{
|
||||
"name": "H"
|
||||
},
|
||||
{
|
||||
"name": "I"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
|
||||
export const wordCloudUrl = '/mock/wordCloud'
|
||||
export const treemapUrl = '/mock/treemap'
|
||||
export const threeEarth01Url = '/mock/threeEarth01Data'
|
||||
export const sankeyUrl = '/mock/sankey'
|
||||
export const graphUrl = '/mock/graphData'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.threeEarth01Data
|
||||
},
|
||||
{
|
||||
url: sankeyUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchSankey
|
||||
},
|
||||
{
|
||||
url: graphUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.graphData
|
||||
},
|
||||
]
|
||||
|
||||
export default mockObject
|
||||
|
||||
86
src/api/mock/sankey.json
Normal file
86
src/api/mock/sankey.json
Normal file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"label": [
|
||||
{
|
||||
"name": "a"
|
||||
},
|
||||
{
|
||||
"name": "b"
|
||||
},
|
||||
{
|
||||
"name": "a1"
|
||||
},
|
||||
{
|
||||
"name": "a2"
|
||||
},
|
||||
{
|
||||
"name": "b1"
|
||||
},
|
||||
{
|
||||
"name": "b2"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"source": "a",
|
||||
"target": "a1",
|
||||
"value": "@integer(0, 10)"
|
||||
},
|
||||
{
|
||||
"source": "a",
|
||||
"target": "a2",
|
||||
"value": "@integer(0, 10)"
|
||||
},
|
||||
{
|
||||
"source": "b",
|
||||
"target": "b1",
|
||||
"value": "@integer(0, 10)"
|
||||
},
|
||||
{
|
||||
"source": "a",
|
||||
"target": "b1",
|
||||
"value": "@integer(0, 10)"
|
||||
},
|
||||
{
|
||||
"source": "b1",
|
||||
"target": "a1",
|
||||
"value": "@integer(0, 10)"
|
||||
},
|
||||
{
|
||||
"source": "b1",
|
||||
"target": "b2",
|
||||
"value": "@integer(0, 10)"
|
||||
}
|
||||
],
|
||||
"levels": [
|
||||
{
|
||||
"depth": 0,
|
||||
"itemStyle": {
|
||||
"color": "#decbe4"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.9
|
||||
}
|
||||
},
|
||||
{
|
||||
"depth": 1,
|
||||
"itemStyle": {
|
||||
"color": "#b3cde3"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.6
|
||||
}
|
||||
},
|
||||
{
|
||||
"depth": 2,
|
||||
"itemStyle": {
|
||||
"color": "#ccebc5"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.6
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
|
||||
import scatterJson from './scatter.json'
|
||||
import mapJson from './map.json'
|
||||
import tTreemapJson from './treemap.json'
|
||||
import sankeyJson from './sankey.json'
|
||||
import graphDataJson from './graph.json'
|
||||
|
||||
export default {
|
||||
// 单图表
|
||||
@ -10,8 +12,8 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['product', 'dataOne'],
|
||||
'source|50': [
|
||||
dimensions: ['product', 'dataOne'],
|
||||
'source|20': [
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3
|
||||
@ -37,12 +39,13 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['product', 'dataOne', 'dataTwo'],
|
||||
'source|50': [
|
||||
dimensions: ['product', 'dataOne', 'dataTwo', 'dataThree'],
|
||||
'source|20': [
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|100-900': 3,
|
||||
'dataTwo|100-900': 3
|
||||
'dataTwo|100-900': 3,
|
||||
'dataThree|100-900': 3
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -218,5 +221,19 @@ export default {
|
||||
'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 桑基图
|
||||
fetchSankey: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: sankeyJson
|
||||
},
|
||||
// 关系图
|
||||
graphData: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: graphDataJson
|
||||
},
|
||||
}
|
||||
|
||||
BIN
src/assets/images/chart/charts/dial.png
Normal file
BIN
src/assets/images/chart/charts/dial.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/chart/charts/graph.png
Normal file
BIN
src/assets/images/chart/charts/graph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
BIN
src/assets/images/chart/charts/sankey.png
Normal file
BIN
src/assets/images/chart/charts/sankey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/images/chart/informations/inputs_date.png
Normal file
BIN
src/assets/images/chart/informations/inputs_date.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/chart/informations/inputs_select.png
Normal file
BIN
src/assets/images/chart/informations/inputs_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/chart/informations/inputs_tab.png
Normal file
BIN
src/assets/images/chart/informations/inputs_tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/assets/images/chart/informations/photo_carousel.png
Normal file
BIN
src/assets/images/chart/informations/photo_carousel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
3
src/components/Pages/ChartGlobImage/index.ts
Normal file
3
src/components/Pages/ChartGlobImage/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import ChartGlobImage from './index.vue'
|
||||
|
||||
export { ChartGlobImage }
|
||||
@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, PropType } from 'vue'
|
||||
import { ref, PropType, watch } from 'vue'
|
||||
import { fetchImages } from '@/packages'
|
||||
import { ConfigType } from '@/packages/index.d'
|
||||
|
||||
@ -11,7 +11,7 @@ const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<ConfigType>,
|
||||
required: true
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const imageInfo = ref('')
|
||||
@ -20,5 +20,12 @@ const imageInfo = ref('')
|
||||
const fetchImageUrl = async () => {
|
||||
imageInfo.value = await fetchImages(props.chartConfig)
|
||||
}
|
||||
fetchImageUrl()
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.key,
|
||||
() => fetchImageUrl(),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
|
||||
<n-space>
|
||||
<n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
|
||||
<template #trigger>
|
||||
<n-radio :value="item.value">
|
||||
{{ item.value }}
|
||||
</n-radio>
|
||||
</template>
|
||||
{{ item.desc }}
|
||||
</n-tooltip>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { type EchartsRenderer } from '@/settings/chartThemes'
|
||||
|
||||
const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
|
||||
const INHERIT_VALUE = 'inherit'
|
||||
|
||||
const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
|
||||
emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
|
||||
}
|
||||
|
||||
const rendererList = [
|
||||
{
|
||||
value: 'svg',
|
||||
desc: '在缩放场景下具有更好的表现'
|
||||
},
|
||||
{
|
||||
value: 'canvas',
|
||||
desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
|
||||
},
|
||||
...(props.includeInherit
|
||||
? [
|
||||
{
|
||||
value: INHERIT_VALUE,
|
||||
desc: '默认继承全局配置'
|
||||
}
|
||||
]
|
||||
: [])
|
||||
]
|
||||
</script>
|
||||
@ -1,4 +1,34 @@
|
||||
<template>
|
||||
<collapse-item name="渲染器">
|
||||
<setting-item-box :alone="true">
|
||||
<template #name>
|
||||
<n-text>全局</n-text>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="21" :depth="3">
|
||||
<help-outline-icon></help-outline-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<EchartsRendererSetting v-model="themeSetting.renderer" />
|
||||
</setting-item-box>
|
||||
<setting-item-box :alone="true">
|
||||
<template #name>
|
||||
<n-text>当前</n-text>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="21" :depth="3">
|
||||
<help-outline-icon></help-outline-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-text>仅当前组件采用指定渲染器渲染</n-text>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<EchartsRendererSetting v-model="optionData.renderer" includeInherit />
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item v-if="title" name="标题">
|
||||
<template #header>
|
||||
<n-switch v-model:value="title.show" size="small"></n-switch>
|
||||
@ -283,6 +313,11 @@ import { PropType, computed } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
|
||||
import { icon } from '@/plugins'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import EchartsRendererSetting from './EchartsRendererSetting.vue'
|
||||
|
||||
const { HelpOutlineIcon } = icon.ionicons5
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
@ -296,6 +331,12 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||
return chartThemeSetting
|
||||
})
|
||||
|
||||
const title = computed(() => {
|
||||
return props.optionData.title
|
||||
})
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<div class="model-footer">
|
||||
中国色列表来自于：
|
||||
<n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
|
||||
<n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
@ -157,6 +157,7 @@ $height: 85vh;
|
||||
}
|
||||
}
|
||||
.model-footer {
|
||||
z-index: 1;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,9 @@ export enum DragKeyEnum {
|
||||
// 不同页面保存操作
|
||||
export enum SavePageEnum {
|
||||
CHART = 'SaveChart',
|
||||
JSON = 'SaveJSON'
|
||||
CHART_TO_PREVIEW = 'ChartToPreview',
|
||||
JSON = 'SaveJSON',
|
||||
CLOSE = 'close'
|
||||
}
|
||||
|
||||
// 操作枚举
|
||||
|
||||
59
src/enums/eventEnum.ts
Normal file
59
src/enums/eventEnum.ts
Normal file
@ -0,0 +1,59 @@
|
||||
// 基础事件类型(vue不加 on)
|
||||
export enum BaseEvent {
|
||||
// 点击
|
||||
ON_CLICK = 'click',
|
||||
// 双击
|
||||
ON_DBL_CLICK = 'dblclick',
|
||||
// 移入
|
||||
ON_MOUSE_ENTER = 'mouseenter',
|
||||
// 移出
|
||||
ON_MOUSE_LEAVE = 'mouseleave'
|
||||
}
|
||||
|
||||
// 组件交互回调事件
|
||||
export enum InteractEvents {
|
||||
INTERACT_ON = 'interactOn',
|
||||
INTERACT_COMPONENT_ID = 'interactComponentId',
|
||||
INTERACT_FN = 'interactFn'
|
||||
}
|
||||
|
||||
// 全局组件交互回调事件触发的类型（当然可以自定义名称）
|
||||
export enum InteractEventOn {
|
||||
CLICK = 'click',
|
||||
CHANGE = 'change'
|
||||
}
|
||||
|
||||
// 确定交互组件触发类型 key名称
|
||||
export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
|
||||
|
||||
// 交互式组件的触发配置
|
||||
export type InteractActionsType = {
|
||||
interactType: InteractEventOn
|
||||
interactName: string
|
||||
componentEmitEvents: { [T: string]: { value: any; label: string }[] }
|
||||
}
|
||||
|
||||
// vue3 生命周期事件
|
||||
export enum EventLife {
|
||||
// 渲染之后
|
||||
VNODE_MOUNTED = 'vnodeMounted',
|
||||
// 渲染之前
|
||||
VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
|
||||
}
|
||||
|
||||
// 内置字符串函数对象列表
|
||||
export const excludeParseEventKeyList = [
|
||||
EventLife.VNODE_BEFORE_MOUNT,
|
||||
EventLife.VNODE_MOUNTED,
|
||||
BaseEvent.ON_CLICK,
|
||||
BaseEvent.ON_DBL_CLICK,
|
||||
BaseEvent.ON_MOUSE_ENTER,
|
||||
BaseEvent.ON_MOUSE_LEAVE,
|
||||
//过滤器
|
||||
'filter'
|
||||
]
|
||||
// 内置字符串函数键值列表
|
||||
export const excludeParseEventValueList = [
|
||||
// 请求里的函数语句
|
||||
'javascript:'
|
||||
]
|
||||
@ -4,4 +4,5 @@ export * from '@/hooks/useCode.hook'
|
||||
export * from '@/hooks/useChartDataFetch.hook'
|
||||
export * from '@/hooks/useChartDataPondFetch.hook'
|
||||
export * from '@/hooks/useLifeHandler.hook'
|
||||
export * from '@/hooks/useLang.hook'
|
||||
export * from '@/hooks/useLang.hook'
|
||||
export * from '@/hooks/useChartInteract.hook'
|
||||
26
src/hooks/useCanvasInitOptions.hook.ts
Normal file
26
src/hooks/useCanvasInitOptions.hook.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { inject, type Ref } from 'vue'
|
||||
import { EchartsRenderer } from '@/settings/chartThemes'
|
||||
import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
|
||||
|
||||
use([CanvasRenderer, SVGRenderer])
|
||||
|
||||
type InitOptions = {
|
||||
renderer: EchartsRenderer
|
||||
devicePixelRatio?: number
|
||||
}
|
||||
|
||||
// 获取需要给当前echarts组件设置什么初始值
|
||||
export function useCanvasInitOptions(option: any, themeSetting: any) {
|
||||
const renderer = option.renderer || themeSetting.renderer
|
||||
const initOptions: InitOptions = { renderer }
|
||||
const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
|
||||
|
||||
if (renderer === 'canvas') {
|
||||
initOptions.devicePixelRatio = Math.ceil(
|
||||
Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
|
||||
)
|
||||
}
|
||||
return initOptions
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { ref, toRefs, toRaw } from 'vue'
|
||||
import { ref, toRefs, toRaw, watch } from 'vue'
|
||||
import type VChart from 'vue-echarts'
|
||||
import { customizeHttp } from '@/api/http'
|
||||
import { useChartDataPondFetch } from '@/hooks/'
|
||||
@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
|
||||
import { setOption } from '@/packages/public/chart'
|
||||
|
||||
// 获取类型
|
||||
type ChartEditStoreType = typeof useChartEditStore
|
||||
@ -34,7 +35,7 @@ export const useChartDataFetch = (
|
||||
const echartsUpdateHandle = (dataset: any) => {
|
||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.setOption({ dataset: dataset })
|
||||
setOption(vChartRef.value, { dataset: dataset })
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -86,8 +87,18 @@ export const useChartDataFetch = (
|
||||
}
|
||||
}
|
||||
|
||||
// 立即调用
|
||||
fetchFn()
|
||||
// 普通初始化与组件交互处理监听
|
||||
watch(
|
||||
() => targetComponent.request,
|
||||
() => {
|
||||
fetchFn()
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
// 定时时间
|
||||
const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
|
||||
// 单位
|
||||
|
||||
40
src/hooks/useChartInteract.hook.ts
Normal file
40
src/hooks/useChartInteract.hook.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
|
||||
// 获取类型
|
||||
type ChartEditStoreType = typeof useChartEditStore
|
||||
|
||||
// Params 参数修改触发 api 更新图表请求
|
||||
export const useChartInteract = (
|
||||
chartConfig: CreateComponentType,
|
||||
useChartEditStore: ChartEditStoreType,
|
||||
param: { [T: string]: any },
|
||||
interactEventOn: string
|
||||
) => {
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { interactEvents } = chartConfig.events
|
||||
const fnOnEvent = interactEvents.filter(item => {
|
||||
return item.interactOn === interactEventOn
|
||||
})
|
||||
|
||||
if (fnOnEvent.length === 0) return
|
||||
fnOnEvent.forEach(item => {
|
||||
const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
|
||||
if (index === -1) return
|
||||
const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
|
||||
Object.keys(item.interactFn).forEach(key => {
|
||||
if (Params.value[key]) {
|
||||
Params.value[key] = param[item.interactFn[key]]
|
||||
}
|
||||
if (Header.value[key]) {
|
||||
Header.value[key] = param[item.interactFn[key]]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 联动事件触发的 type 变更时，清除当前绑定内容
|
||||
export const clearInteractEvent = (chartConfig: CreateComponentType) => {
|
||||
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { EventLife } from '@/enums/eventEnum'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 所有图表组件集合对象
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<n-layout-header bordered class="go-header">
|
||||
<header class="go-header-box">
|
||||
<header class="go-header-box" :class="{ 'is-project': isProject }">
|
||||
<div class="header-item left">
|
||||
<n-space>
|
||||
<slot name="left"></slot>
|
||||
@ -23,17 +23,29 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { GoThemeSelect } from '@/components/GoThemeSelect'
|
||||
import { GoLangSelect } from '@/components/GoLangSelect'
|
||||
import { ThemeColorSelect } from '@/components/Pages/ThemeColorSelect'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const isProject = computed(() => {
|
||||
return route.fullPath === PageEnum.BASE_HOME_ITEMS
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$min-width: 400px;
|
||||
$min-width: 520px;
|
||||
@include go(header) {
|
||||
&-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33.33%);
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
&.is-project {
|
||||
grid-template-columns: none;
|
||||
}
|
||||
.header-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -49,7 +61,7 @@ $min-width: 400px;
|
||||
}
|
||||
}
|
||||
height: $--header-height;
|
||||
padding: 0 60px;
|
||||
padding: 0 20px 0 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
<template>
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
<component
|
||||
v-if="route.noKeepAlive"
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
></component>
|
||||
<component v-if="route.meta.noKeepAlive" :is="Component"></component>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.fullPath"></component>
|
||||
<component :is="Component"></component>
|
||||
</keep-alive>
|
||||
</template>
|
||||
</router-view>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<router-view #default="{ Component, route }">
|
||||
<transition name="fade" mode="out-in" appear>
|
||||
<component
|
||||
v-if="route.noKeepAlive"
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
></component>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.fullPath"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
<template>
|
||||
<router-view #default="{ Component, route }">
|
||||
<transition name="fade" mode="out-in" appear>
|
||||
<component
|
||||
v-if="route.meta.noKeepAlive"
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
></component>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.fullPath"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,7 @@ import App from './App.vue'
|
||||
import router, { setupRouter } from '@/router'
|
||||
import i18n from '@/i18n/index'
|
||||
import { setupStore } from '@/store'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
||||
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
||||
import { setHtmlTheme } from '@/utils'
|
||||
|
||||
@ -53,4 +53,7 @@ async function appInit() {
|
||||
window['$vue'] = app
|
||||
}
|
||||
|
||||
void appInit()
|
||||
appInit().then(() => {
|
||||
initFunction()
|
||||
})
|
||||
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
}" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
@ -25,6 +20,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -41,6 +37,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
@ -57,11 +55,23 @@ watch(
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
// 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
|
||||
// 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
|
||||
const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1;
|
||||
const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
|
||||
const dimensionsGap = newDimensions - oldDimensions;
|
||||
if (dimensionsGap < 0) {
|
||||
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||
} else if (dimensionsGap > 0) {
|
||||
if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
|
||||
props.chartConfig.option.series=[]
|
||||
}
|
||||
for (let i = 0; i < dimensionsGap; i++) {
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
props.chartConfig.option.series.push(...seriesArr)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
@ -14,6 +15,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
@ -24,6 +26,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -40,6 +43,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
@ -57,7 +62,7 @@ watch(
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
|
||||
@ -122,23 +122,28 @@ const calcData = (data: any, type?: string) => {
|
||||
|
||||
// 数据解析
|
||||
const calcCapsuleLengthAndLabelData = (dataset: any) => {
|
||||
const { source } = dataset
|
||||
if (!source.length) return
|
||||
try {
|
||||
const { source } = dataset
|
||||
if (!source || !source.length) return
|
||||
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
state.capsuleValue = capsuleValue
|
||||
state.capsuleValue = capsuleValue
|
||||
|
||||
state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
|
||||
state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
|
||||
state.labelData = labelData
|
||||
state.labelData = labelData
|
||||
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
}
|
||||
|
||||
const numberSizeHandle = (val: string | number) => {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
@ -15,6 +16,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, watch, ref, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
@ -41,6 +43,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
@ -15,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -32,6 +33,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
@ -45,7 +48,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
@ -14,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -31,6 +32,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
@ -44,7 +47,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, reactive } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
@ -15,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -32,6 +33,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
@ -45,7 +48,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
@ -7,11 +7,12 @@
|
||||
import { PropType, reactive, watch, ref, nextTick } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
@ -32,6 +33,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
@ -59,13 +62,14 @@ const getGeojson = (regionId: string) => {
|
||||
}
|
||||
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
|
||||
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
if (props.chartConfig.option.mapRegion.adcode != 'china') {
|
||||
await getGeojson(props.chartConfig.option.mapRegion.adcode)
|
||||
const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
|
||||
if (adCode !== 'china') {
|
||||
await getGeojson(adCode)
|
||||
} else {
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
@ -76,7 +80,7 @@ registerMapInitAsync()
|
||||
// 手动触发渲染
|
||||
const vEchartsSetOption = () => {
|
||||
option.value = props.chartConfig.option
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
|
||||
// 更新数据处理
|
||||
@ -127,7 +131,7 @@ watch(
|
||||
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.adcode,
|
||||
() => `${props.chartConfig.option.mapRegion.adcode}`,
|
||||
async newData => {
|
||||
try {
|
||||
await getGeojson(newData)
|
||||
|
||||
91
src/packages/components/Charts/Mores/Dial/config.ts
Normal file
91
src/packages/components/Charts/Mores/Dial/config.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { DialConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const includes = []
|
||||
const option = {
|
||||
backgroundColor: '#0E1327',
|
||||
dataset:70,
|
||||
series: [{
|
||||
type: "gauge",
|
||||
data: [{
|
||||
value: 70,
|
||||
itemStyle: { // 指针样式
|
||||
color: '#2AF4FF'
|
||||
}
|
||||
}],
|
||||
min: 0, //最小刻度
|
||||
max: 100, //最大刻度
|
||||
splitNumber: 10, //刻度数量
|
||||
center: ['50%', '55%'],
|
||||
radius: '80%',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0, 'rgba(0,212,230,0.5)'],
|
||||
[1, 'rgba(28,128,245,0)']
|
||||
],
|
||||
width: 170
|
||||
}
|
||||
},
|
||||
axisLabel: { // 文字样式
|
||||
color: '#eee',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 4
|
||||
},
|
||||
animationDuration: 2000,
|
||||
},
|
||||
{
|
||||
name: '外部刻度',
|
||||
type: 'gauge',
|
||||
center: ['50%', '55%'],
|
||||
radius: '90%',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 25,
|
||||
color: [ // 表盘外部颜色
|
||||
[0, '#1369E380'],
|
||||
[1, '#1369E380']
|
||||
],
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 5,
|
||||
lineStyle: { //刻度颜色
|
||||
color: '#42E5FB',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
length: 15,
|
||||
lineStyle: {
|
||||
color: '#42E5FB',
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = DialConfig.key
|
||||
public chartConfig = cloneDeep(DialConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
84
src/packages/components/Charts/Mores/Dial/config.vue
Normal file
84
src/packages/components/Charts/Mores/Dial/config.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<!-- 遍历 seriesList -->
|
||||
<CollapseItem :name="`圆环`" :expanded="true">
|
||||
<SettingItemBox name="数据">
|
||||
<SettingItem name="数值">
|
||||
<n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值">
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<!-- 表盘刻度字体 -->
|
||||
<SettingItemBox name="字体">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number
|
||||
v-model:value="dialConfig.axisLabel.fontSize"
|
||||
:min="0"
|
||||
:step="1"
|
||||
size="small"
|
||||
placeholder="字体大小"
|
||||
>
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<!-- 表盘 -->
|
||||
<SettingItemBox name="表盘外部">
|
||||
<SettingItem name="颜色" >
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<!-- 指针 -->
|
||||
<SettingItemBox name="指针">
|
||||
<SettingItem name="颜色" >
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值">
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="刻度">
|
||||
<SettingItem name="最小值">
|
||||
<n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值">
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="最大值">
|
||||
<n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值">
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色" >
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const config = computed(() => {
|
||||
return props.optionData
|
||||
})
|
||||
|
||||
const dialConfig = computed(() => {
|
||||
return props.optionData.series[0]
|
||||
})
|
||||
|
||||
const updateClick = (val: any) => {
|
||||
props.optionData.series[1].splitLine.lineStyle.color=val
|
||||
}
|
||||
</script>
|
||||
|
||||
14
src/packages/components/Charts/Mores/Dial/index.ts
Normal file
14
src/packages/components/Charts/Mores/Dial/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const DialConfig: ConfigType = {
|
||||
key: 'Dial',
|
||||
chartKey: 'VDial',
|
||||
conKey: 'VCDial',
|
||||
title: '表盘',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image:'dial.png'
|
||||
}
|
||||
69
src/packages/components/Charts/Mores/Dial/index.vue
Normal file
69
src/packages/components/Charts/Mores/Dial/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
const dataHandle = (newData: any) => {
|
||||
let config = props.chartConfig.option
|
||||
config.series[0].data[0].value = newData
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
|
||||
// 配置时
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览时
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
|
||||
// @ts-ignore
|
||||
option.value.series[0].data[0].value = resData
|
||||
})
|
||||
</script>
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { FunnelChart } from 'echarts/charts'
|
||||
@ -31,6 +32,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
|
||||
71
src/packages/components/Charts/Mores/Graph/config.ts
Normal file
71
src/packages/components/Charts/Mores/Graph/config.ts
Normal file
@ -0,0 +1,71 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { GraphConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
// 关系图布局
|
||||
export const GraphLayout = [
|
||||
{ label: '无', value: 'none' },
|
||||
{ label: '环形', value: 'circular' }
|
||||
]
|
||||
|
||||
// 标签开关
|
||||
export const LabelSwitch = [
|
||||
{ label: '开启', value: 1 },
|
||||
{ label: '关闭', value: 0 }
|
||||
]
|
||||
|
||||
// 标签位置
|
||||
export const LabelPosition = [
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
{ label: '顶部', value: 'top' },
|
||||
{ label: '底部', value: 'bottom' },
|
||||
{ label: '内部', value: 'inside' },
|
||||
]
|
||||
|
||||
export const option = {
|
||||
dataset: { ...dataJson },
|
||||
tooltip: {},
|
||||
legend:{
|
||||
show:true,
|
||||
textStyle:{
|
||||
color:"#eee",
|
||||
fontSize: 14 ,
|
||||
},
|
||||
data: dataJson.categories.map(function (a) {
|
||||
return a.name;
|
||||
})
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none', // none circular环形布局
|
||||
data: dataJson.nodes,
|
||||
links: dataJson.links,
|
||||
categories: dataJson.categories,
|
||||
label: { // 标签
|
||||
show: 1,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLayout: {
|
||||
hideOverlap: true
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'source', // 线条颜色
|
||||
curveness: 0.2 // 线条卷曲程度
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = GraphConfig.key
|
||||
public chartConfig = cloneDeep(GraphConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
62
src/packages/components/Charts/Mores/Graph/config.vue
Normal file
62
src/packages/components/Charts/Mores/Graph/config.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<CollapseItem name="关系图" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<setting-item name="布局">
|
||||
<n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标签">
|
||||
<setting-item name="展示">
|
||||
<n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="弧线">
|
||||
<!-- 需要输入两位的小数才会变化 -->
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].lineStyle.curveness"
|
||||
:min="0"
|
||||
:step="0.01"
|
||||
placeholder="弯曲程度"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="图例">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.legend.textStyle.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="文本">
|
||||
<n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const graphConfig = computed<typeof option.series[0]>(() => {
|
||||
return props.optionData.series[0]
|
||||
})
|
||||
</script>
|
||||
1744
src/packages/components/Charts/Mores/Graph/data.json
Normal file
1744
src/packages/components/Charts/Mores/Graph/data.json
Normal file
File diff suppressed because it is too large
Load Diff
14
src/packages/components/Charts/Mores/Graph/index.ts
Normal file
14
src/packages/components/Charts/Mores/Graph/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const GraphConfig: ConfigType = {
|
||||
key: 'Graph',
|
||||
chartKey: 'VGraph',
|
||||
conKey: 'VCGraph',
|
||||
title: '关系图',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'graph.png'
|
||||
}
|
||||
80
src/packages/components/Charts/Mores/Graph/index.vue
Normal file
80
src/packages/components/Charts/Mores/Graph/index.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { RadarChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset.nodes) {
|
||||
props.chartConfig.option.series[0].data = dataset.nodes
|
||||
}
|
||||
if (dataset.links) {
|
||||
props.chartConfig.option.series[0].links = dataset.links
|
||||
}
|
||||
if (dataset.categories) {
|
||||
props.chartConfig.option.series[0].categories = dataset.categories
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataSetHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { HeatmapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -38,6 +39,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
@ -68,7 +71,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
props.chartConfig.option.series[0].data = seriesData
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { RadarChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -32,6 +33,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
@ -50,7 +53,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
props.chartConfig.option.radar.indicator = dataset.radarIndicator
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
43
src/packages/components/Charts/Mores/Sankey/config.ts
Normal file
43
src/packages/components/Charts/Mores/Sankey/config.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { SankeyConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend']
|
||||
|
||||
// 图表方向
|
||||
export const orientList = [
|
||||
{ label: '水平', value: 'horizontal' },
|
||||
{ label: '垂直', value: 'vertical' }
|
||||
]
|
||||
|
||||
// 标签展示
|
||||
export const toolTipSwitch = [
|
||||
{ label: '开启', value: 1 },
|
||||
{ label: '关闭', value: 0 }
|
||||
]
|
||||
|
||||
export const option = {
|
||||
dataset: { ...dataJson },
|
||||
tooltip: {
|
||||
show: 1,
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
},
|
||||
series: {
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
orient:'horizontal',
|
||||
data: dataJson.label,
|
||||
links: dataJson.links,
|
||||
levels: dataJson.levels
|
||||
}
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = SankeyConfig.key
|
||||
public chartConfig = cloneDeep(SankeyConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
43
src/packages/components/Charts/Mores/Sankey/config.vue
Normal file
43
src/packages/components/Charts/Mores/Sankey/config.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<CollapseItem name="桑基图" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="方向">
|
||||
<n-select
|
||||
v-model:value="sankeyConfig.orient"
|
||||
size="small"
|
||||
:options="orientList"
|
||||
placeholder="选择方向"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="提示标签">
|
||||
<n-select
|
||||
v-model:value="optionData.tooltip.show"
|
||||
size="small"
|
||||
:options="toolTipSwitch"
|
||||
placeholder="是否开启"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option, orientList, toolTipSwitch } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const sankeyConfig = computed<typeof option.series>(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
</script>
|
||||
86
src/packages/components/Charts/Mores/Sankey/data.json
Normal file
86
src/packages/components/Charts/Mores/Sankey/data.json
Normal file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"label": [
|
||||
{
|
||||
"name": "a"
|
||||
},
|
||||
{
|
||||
"name": "b"
|
||||
},
|
||||
{
|
||||
"name": "a1"
|
||||
},
|
||||
{
|
||||
"name": "a2"
|
||||
},
|
||||
{
|
||||
"name": "b1"
|
||||
},
|
||||
{
|
||||
"name": "b2"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"source": "a",
|
||||
"target": "a1",
|
||||
"value": 5
|
||||
},
|
||||
{
|
||||
"source": "a",
|
||||
"target": "a2",
|
||||
"value": 3
|
||||
},
|
||||
{
|
||||
"source": "b",
|
||||
"target": "b1",
|
||||
"value": 8
|
||||
},
|
||||
{
|
||||
"source": "a",
|
||||
"target": "b1",
|
||||
"value": 3
|
||||
},
|
||||
{
|
||||
"source": "b1",
|
||||
"target": "a1",
|
||||
"value": 1
|
||||
},
|
||||
{
|
||||
"source": "b1",
|
||||
"target": "b2",
|
||||
"value": 2
|
||||
}
|
||||
],
|
||||
"levels": [
|
||||
{
|
||||
"depth": 0,
|
||||
"itemStyle": {
|
||||
"color": "#decbe4"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.9
|
||||
}
|
||||
},
|
||||
{
|
||||
"depth": 1,
|
||||
"itemStyle": {
|
||||
"color": "#b3cde3"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.6
|
||||
}
|
||||
},
|
||||
{
|
||||
"depth": 2,
|
||||
"itemStyle": {
|
||||
"color": "#ccebc5"
|
||||
},
|
||||
"lineStyle": {
|
||||
"color": "source",
|
||||
"opacity": 0.6
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Mores/Sankey/index.ts
Normal file
14
src/packages/components/Charts/Mores/Sankey/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const SankeyConfig: ConfigType = {
|
||||
key: 'Sankey',
|
||||
chartKey: 'VSankey',
|
||||
conKey: 'VCSankey',
|
||||
title: '桑基图',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'sankey.png'
|
||||
}
|
||||
78
src/packages/components/Charts/Mores/Sankey/index.vue
Normal file
78
src/packages/components/Charts/Mores/Sankey/index.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { RadarChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset.label) {
|
||||
props.chartConfig.option.series.data = dataset.label
|
||||
}
|
||||
if (dataset.links) {
|
||||
props.chartConfig.option.series.links = dataset.links
|
||||
}
|
||||
if (dataset.levels) {
|
||||
props.chartConfig.option.series.levels = dataset.levels
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataHandle(newData)
|
||||
})
|
||||
</script>
|
||||
@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { TreemapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -31,6 +32,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([CanvasRenderer, TreemapChart])
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
@ -42,7 +45,7 @@ const option = computed(() => {
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset) {
|
||||
props.chartConfig.option.series[0].data = dataset
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
<v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, reactive } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import config from './config'
|
||||
import { isPreview, isString, isNumber } from '@/utils'
|
||||
import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
@ -30,6 +31,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([CanvasRenderer, GridComponent])
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
@ -44,7 +47,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
// 背景颜色
|
||||
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
|
||||
// 水球颜色
|
||||
|
||||
@ -4,5 +4,8 @@ import { FunnelConfig } from './Funnel/index'
|
||||
import { HeatmapConfig } from './Heatmap/index'
|
||||
import { WaterPoloConfig } from './WaterPolo/index'
|
||||
import { TreeMapConfig } from './TreeMap/index'
|
||||
import { DialConfig } from './Dial/index'
|
||||
import { SankeyConfig } from './Sankey/index'
|
||||
import { GraphConfig } from './Graph/index'
|
||||
|
||||
export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig]
|
||||
export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
|
||||
<v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
@ -29,6 +30,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
|
||||
|
||||
const option = reactive({
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, reactive, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
@ -30,6 +31,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
@ -13,6 +14,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, watch, ref, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { ScatterChart, EffectScatterChart } from 'echarts/charts'
|
||||
@ -46,6 +48,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
@ -13,6 +14,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import ecStat from 'echarts-stat'
|
||||
import { use, registerTransform } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
@ -47,6 +49,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border01Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border01.png'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import image from '@/assets/images/chart/decorates/border02.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border02Config: ConfigType = {
|
||||
@ -10,5 +9,6 @@ export const Border02Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border02.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border03Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border03.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border04Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border04.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border05Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border05.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border06Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border06.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border07Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border07.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border08Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border08.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border09Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border09.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border10Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border10Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border10.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border11Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border11Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border11.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border12Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border12Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border12.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border13Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Border13Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border13.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates01Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Decorates01Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates01.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates02Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Decorates02Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates02.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates03Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Decorates03Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image: 'decorates01.png'
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates03.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates04Config: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const Decorates04Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates04.png'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates05.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates05Config: ConfigType = {
|
||||
@ -10,5 +9,6 @@ export const Decorates05Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates05.png'
|
||||
}
|
||||
|
||||
@ -9,6 +9,6 @@ export const Decorates06Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'decorates06.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const CountDownConfig: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const CountDownConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'countdown.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FlipperNumberConfig: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'flipper-number.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const NumberConfig: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const NumberConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'number.png'
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TimeCommonConfig: ConfigType = {
|
||||
@ -9,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'time.png'
|
||||
}
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
/**
|
||||
* 资源文件
|
||||
* 把模型和图片分开进行加载
|
||||
*/
|
||||
|
||||
interface ITextures {
|
||||
name: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface IResources {
|
||||
textures?: ITextures[]
|
||||
}
|
||||
|
||||
const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
|
||||
const textures: ITextures[] = []
|
||||
|
||||
const modules = import.meta.globEager("../../images/earth/*");
|
||||
|
||||
for(let item in modules) {
|
||||
const n = item.split('/').pop()
|
||||
if(n) {
|
||||
textures.push({
|
||||
name: n.split('.')[0],
|
||||
url: modules[item].default
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const resources: IResources = {
|
||||
textures
|
||||
}
|
||||
|
||||
export { resources }
|
||||
/**
|
||||
* 资源文件
|
||||
* 把模型和图片分开进行加载
|
||||
*/
|
||||
|
||||
interface ITextures {
|
||||
name: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface IResources {
|
||||
textures?: ITextures[]
|
||||
}
|
||||
|
||||
const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
|
||||
const textures: ITextures[] = []
|
||||
|
||||
const modules: Record<string, { default: string }> = import.meta.glob("../../images/earth/*", { eager: true })
|
||||
|
||||
for(let item in modules) {
|
||||
const n = item.split('/').pop()
|
||||
if(n) {
|
||||
textures.push({
|
||||
name: n.split('.')[0],
|
||||
url: modules[item].default
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const resources: IResources = {
|
||||
textures
|
||||
}
|
||||
|
||||
export { resources }
|
||||
|
||||
@ -9,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
|
||||
category: ChatCategoryEnum.THREE,
|
||||
categoryName: ChatCategoryEnumName.THREE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'threeEarth01.png'
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ watch(
|
||||
// DOM 渲染之后进行初始化
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') > -1) {
|
||||
if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
|
||||
window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示！')
|
||||
chartEditStore.removeComponentList(undefined, false)
|
||||
return
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
import dayjs from 'dayjs'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
|
||||
import { interactActions, ComponentInteractEventEnum } from './interact'
|
||||
import { InputsDateConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
// 时间组件展示类型，必须和 interactActions 中定义的数据一致
|
||||
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
|
||||
// 下拉展示
|
||||
isPanel: 0,
|
||||
dataset: dayjs().valueOf()
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = InputsDateConfig.key
|
||||
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(InputsDateConfig)
|
||||
public interactActions = interactActions
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<collapse-item name="展示方式" :expanded="true">
|
||||
<setting-item-box name="选择方式">
|
||||
<n-select
|
||||
v-model:value="optionData.isPanel"
|
||||
size="small"
|
||||
:options="panelOptions"
|
||||
/>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item name="时间配置" :expanded="true">
|
||||
<setting-item-box name="基础">
|
||||
<setting-item name="类型">
|
||||
<n-select
|
||||
v-model:value="optionData.componentInteractEventKey"
|
||||
size="small"
|
||||
:options="datePickerTypeOptions"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="默认值" :alone="true">
|
||||
<n-date-picker
|
||||
size="small"
|
||||
v-model:value="optionData.dataset"
|
||||
:type="optionData.componentInteractEventKey"
|
||||
/>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
import { ComponentInteractEventEnum } from './interact'
|
||||
|
||||
const { HelpOutlineIcon } = icon.ionicons5
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const panelOptions = [
|
||||
{
|
||||
label: '下拉展示',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '面板展示',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
|
||||
const datePickerTypeOptions = [
|
||||
{
|
||||
label: '日期',
|
||||
value: ComponentInteractEventEnum.DATE
|
||||
},
|
||||
{
|
||||
label: '日期时间',
|
||||
value: ComponentInteractEventEnum.DATE_TIME
|
||||
},
|
||||
{
|
||||
label: '日期范围',
|
||||
value: ComponentInteractEventEnum.DATE_RANGE
|
||||
},
|
||||
{
|
||||
label: '月份',
|
||||
value: ComponentInteractEventEnum.MONTH
|
||||
},
|
||||
{
|
||||
label: '月份范围',
|
||||
value: ComponentInteractEventEnum.MONTH_RANGE
|
||||
},
|
||||
{
|
||||
label: '年份',
|
||||
value: ComponentInteractEventEnum.YEAR
|
||||
},
|
||||
{
|
||||
label: '年份范围',
|
||||
value: ComponentInteractEventEnum.YEAR_RANGE
|
||||
},
|
||||
{
|
||||
label: '季度',
|
||||
value: ComponentInteractEventEnum.QUARTER
|
||||
},
|
||||
{
|
||||
label: '季度范围',
|
||||
value: ComponentInteractEventEnum.QUARTER_RANGE
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const InputsDateConfig: ConfigType = {
|
||||
key: 'InputsDate',
|
||||
chartKey: 'VInputsDate',
|
||||
conKey: 'VCInputsDate',
|
||||
title: '时间选择器',
|
||||
category: ChatCategoryEnum.INPUTS,
|
||||
categoryName: ChatCategoryEnumName.INPUTS,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'inputs_date.png'
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<n-date-picker
|
||||
v-model:value="option.dataset"
|
||||
:panel="!!chartConfig.option.isPanel"
|
||||
:type="chartConfig.option.componentInteractEventKey"
|
||||
:style="`width:${w}px;`"
|
||||
@update:value="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartInteract } from '@/hooks'
|
||||
import { InteractEventOn } from '@/enums/eventEnum'
|
||||
import { ComponentInteractParamsEnum } from './interact'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const rangeDate = ref<number | number[]>()
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: props.chartConfig.option.dataset
|
||||
})
|
||||
|
||||
// 监听事件改变
|
||||
const onChange = (v: number | number[]) => {
|
||||
if (v instanceof Array) {
|
||||
// 存储到联动数据
|
||||
useChartInteract(
|
||||
props.chartConfig,
|
||||
useChartEditStore,
|
||||
{
|
||||
[ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
|
||||
[ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
|
||||
[ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
|
||||
},
|
||||
InteractEventOn.CHANGE
|
||||
)
|
||||
} else {
|
||||
// 存储到联动数据
|
||||
useChartInteract(
|
||||
props.chartConfig,
|
||||
useChartEditStore,
|
||||
{ [ComponentInteractParamsEnum.DATE]: v },
|
||||
InteractEventOn.CHANGE
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 手动更新
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: number | number[]) => {
|
||||
option.dataset = newData
|
||||
// 关联目标组件首次请求带上默认内容
|
||||
onChange(newData)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include deep() {
|
||||
.n-input {
|
||||
height: v-bind('h + "px"');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
||||
|
||||
// 时间组件类型
|
||||
export enum ComponentInteractEventEnum {
|
||||
DATE = 'date',
|
||||
DATE_TIME = 'datetime',
|
||||
DATE_RANGE = 'daterange',
|
||||
DATE_TIME_RANGE = 'datetimerange',
|
||||
MONTH = 'month',
|
||||
MONTH_RANGE = 'monthrange',
|
||||
YEAR = 'year',
|
||||
YEAR_RANGE = 'yearrange',
|
||||
QUARTER = 'quarter',
|
||||
QUARTER_RANGE = 'quarterrange'
|
||||
}
|
||||
|
||||
// 联动参数
|
||||
export enum ComponentInteractParamsEnum {
|
||||
DATE = 'date',
|
||||
DATE_START = 'dateStart',
|
||||
DATE_END = 'dateEnd',
|
||||
DATE_RANGE = 'daterange'
|
||||
}
|
||||
|
||||
const time = [
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATE,
|
||||
label: '日期'
|
||||
}
|
||||
]
|
||||
|
||||
const timeRange = [
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATE_START,
|
||||
label: '开始时间'
|
||||
},
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATE_END,
|
||||
label: '结束时间'
|
||||
},
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATE_RANGE,
|
||||
label: '日期范围'
|
||||
}
|
||||
]
|
||||
|
||||
// 定义组件触发回调事件
|
||||
export const interactActions: InteractActionsType[] = [
|
||||
{
|
||||
interactType: InteractEventOn.CHANGE,
|
||||
interactName: '选择完成',
|
||||
componentEmitEvents: {
|
||||
[ComponentInteractEventEnum.DATE]: time,
|
||||
[ComponentInteractEventEnum.DATE_TIME]: time,
|
||||
[ComponentInteractEventEnum.DATE_RANGE]: timeRange,
|
||||
[ComponentInteractEventEnum.MONTH]: time,
|
||||
[ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
|
||||
[ComponentInteractEventEnum.QUARTER]: time,
|
||||
[ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
|
||||
[ComponentInteractEventEnum.YEAR]: time,
|
||||
[ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,37 @@
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
|
||||
import { interactActions, ComponentInteractEventEnum } from './interact'
|
||||
import { InputsSelectConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
// 时间组件展示类型，必须和 interactActions 中定义的数据一致
|
||||
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
|
||||
// 默认值
|
||||
selectValue: '1',
|
||||
// 暴露配置内容给用户
|
||||
dataset: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = InputsSelectConfig.key
|
||||
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(InputsSelectConfig)
|
||||
public interactActions = interactActions
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<collapse-item name="下拉配置" :expanded="true">
|
||||
<setting-item-box name="默认值" :alone="true">
|
||||
<n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const InputsSelectConfig: ConfigType = {
|
||||
key: 'InputsSelect',
|
||||
chartKey: 'VInputsSelect',
|
||||
conKey: 'VCInputsSelect',
|
||||
title: '下拉选择器',
|
||||
category: ChatCategoryEnum.INPUTS,
|
||||
categoryName: ChatCategoryEnumName.INPUTS,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'inputs_select.png'
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<n-select
|
||||
v-model:value="option.value.selectValue"
|
||||
:options="option.value.dataset"
|
||||
:style="`width:${w}px;`"
|
||||
@update:value="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartInteract } from '@/hooks'
|
||||
import { InteractEventOn } from '@/enums/eventEnum'
|
||||
import { ComponentInteractParamsEnum } from './interact'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const option = shallowReactive({
|
||||
value: {
|
||||
selectValue: props.chartConfig.option.selectValue,
|
||||
dataset: props.chartConfig.option.dataset
|
||||
}
|
||||
})
|
||||
|
||||
// 监听事件改变
|
||||
const onChange = (v: string) => {
|
||||
// 存储到联动数据
|
||||
useChartInteract(
|
||||
props.chartConfig,
|
||||
useChartEditStore,
|
||||
{ [ComponentInteractParamsEnum.DATA]: v },
|
||||
InteractEventOn.CHANGE
|
||||
)
|
||||
}
|
||||
|
||||
// 手动更新
|
||||
watch(
|
||||
() => props.chartConfig.option,
|
||||
(newData: any) => {
|
||||
option.value = newData
|
||||
onChange(newData.selectValue)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include deep() {
|
||||
.n-base-selection-label {
|
||||
height: v-bind('h + "px"');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
||||
|
||||
// 时间组件类型
|
||||
export enum ComponentInteractEventEnum {
|
||||
DATA = 'data'
|
||||
}
|
||||
|
||||
// 联动参数
|
||||
export enum ComponentInteractParamsEnum {
|
||||
DATA = 'data'
|
||||
}
|
||||
|
||||
// 定义组件触发回调事件
|
||||
export const interactActions: InteractActionsType[] = [
|
||||
{
|
||||
interactType: InteractEventOn.CHANGE,
|
||||
interactName: '选择完成',
|
||||
componentEmitEvents: {
|
||||
[ComponentInteractEventEnum.DATA]: [
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATA,
|
||||
label: '选择项'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user