fix: 合并1.0.9
This commit is contained in:
奔跑的面条
commit
0d26dce512
17
.eslintrc.js
17
.eslintrc.js
@ -9,16 +9,17 @@ module.exports = {
|
||||
sourceType: 'module',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
tsx: true,
|
||||
},
|
||||
tsx: true
|
||||
}
|
||||
},
|
||||
env: {
|
||||
node: true,
|
||||
// The Follow config only works with eslint-plugin-vue v8.0.0+
|
||||
'vue/setup-compiler-macros': true
|
||||
},
|
||||
extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
|
||||
extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
},
|
||||
};
|
||||
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,14 @@ import { RequestHttpEnum } from '@/enums/httpEnum'
|
||||
|
||||
// 单个X数据
|
||||
export const chartDataUrl = '/mock/chartData'
|
||||
export const chartSingleDataUrl = '/mock/chartSingleData'
|
||||
export const numberFloatUrl = '/mock/number/float'
|
||||
export const numberIntUrl = '/mock/number/int'
|
||||
export const textUrl = '/mock/text'
|
||||
export const imageUrl = '/mock/image'
|
||||
export const rankListUrl = '/mock/rankList'
|
||||
export const scrollBoardUrl = '/mock/scrollBoard'
|
||||
export const radarUrl = '/mock/radarData'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
@ -19,6 +21,11 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchMockData
|
||||
},
|
||||
{
|
||||
url: chartSingleDataUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchMockSingleData
|
||||
},
|
||||
{
|
||||
url: numberFloatUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
@ -48,7 +55,12 @@ const mockObject: MockMethod[] = [
|
||||
url: scrollBoardUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchScrollBoard
|
||||
}
|
||||
},
|
||||
{
|
||||
url: radarUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchRadar
|
||||
},
|
||||
]
|
||||
|
||||
export default mockObject
|
||||
|
||||
@ -1,4 +1,39 @@
|
||||
export default {
|
||||
// 单图表
|
||||
fetchMockSingleData: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['product', 'dataOne'],
|
||||
source: [
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
},
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
},
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
},
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
},
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
},
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3,
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 图表
|
||||
fetchMockData: {
|
||||
code: 0,
|
||||
@ -79,29 +114,72 @@ export default {
|
||||
['行10列1', '行10列2', '行10列3']
|
||||
]
|
||||
},
|
||||
// 获取数字
|
||||
// 获取数字-浮点型
|
||||
fetchNumberFloat: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: '@float(0, 0.99, 1, 4)'
|
||||
},
|
||||
// 获取数字-整型
|
||||
fetchNumberInt: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: '@integer(0, 100)'
|
||||
},
|
||||
// 文字
|
||||
fetchText: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: '@paragraph(1, 10)'
|
||||
},
|
||||
// 图片
|
||||
fetchImage: (num: number) => ({
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: `https://robohash.org/${num}`
|
||||
})
|
||||
}),
|
||||
// 雷达
|
||||
fetchRadar: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
radarIndicator: [
|
||||
{ name: '@name', max: 10000 },
|
||||
{ name: '@name', max: 10000 },
|
||||
{ name: '@name', max: 10000 },
|
||||
{ name: '@name', max: 10000 },
|
||||
{ name: '@name', max: 10000 },
|
||||
{ name: '@name', max: 10000 }
|
||||
],
|
||||
seriesData: [
|
||||
{
|
||||
value: [
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)'
|
||||
],
|
||||
name: 'data1'
|
||||
},
|
||||
{
|
||||
value: [
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)',
|
||||
'@integer(0, 10000)'
|
||||
],
|
||||
name: 'data2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 89 KiB |
BIN
src/assets/images/chart/charts/line_linear_single.png
Normal file
BIN
src/assets/images/chart/charts/line_linear_single.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/images/chart/decorates/time-common.png
Normal file
BIN
src/assets/images/chart/decorates/time-common.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -37,7 +37,9 @@ const props = defineProps({
|
||||
hidden: {
|
||||
request: false,
|
||||
type: Array,
|
||||
default: []
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 使用全屏功能
|
||||
narrow: {
|
||||
@ -76,7 +78,7 @@ const btnList: {
|
||||
icon: RemoveIcon
|
||||
},
|
||||
{
|
||||
title: isFull ? '缩小' : '放大',
|
||||
title: isFull.value ? '缩小' : '放大',
|
||||
key: props.narrow ? 'fullResize' : 'resize',
|
||||
icon: ResizeIcon
|
||||
}
|
||||
|
||||
@ -62,16 +62,15 @@ export const useChartDataFetch = (
|
||||
if (res && res.data) {
|
||||
try {
|
||||
const filter = targetComponent.filter
|
||||
// eCharts 组件配合 vChart 库更新方式
|
||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
|
||||
}
|
||||
}
|
||||
// 更新回调函数
|
||||
if (updateCallback) {
|
||||
updateCallback(newFunctionHandle(res.data, filter))
|
||||
} else {
|
||||
// eCharts 组件配合 vChart 库更新方式
|
||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { BarCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -6,6 +6,15 @@ import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
@ -27,27 +36,10 @@ export const option = {
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = BarCommonConfig.key
|
||||
public chartConfig = cloneDeep(BarCommonConfig)
|
||||
// 图表配置项
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { mergeTheme } 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'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -31,23 +35,39 @@ const props = defineProps({
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
])
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (newData.dimensions.length !== oldData.dimensions.length) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { BarCrossrangeConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -6,50 +6,40 @@ import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'shadow',
|
||||
},
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'value',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
type: 'category'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = BarCrossrangeConfig.key
|
||||
public chartConfig = cloneDeep(BarCrossrangeConfig)
|
||||
// 图表配置项
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -35,18 +39,34 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
@ -6,6 +6,18 @@ import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
@ -19,43 +31,17 @@ export const option = {
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: chartColorsSearch[defaultTheme][2],
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
},
|
||||
}
|
||||
]
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineCommonConfig.key
|
||||
public chartConfig = LineCommonConfig
|
||||
// 图表配置项
|
||||
|
||||
@ -6,20 +6,6 @@
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[0].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
@ -37,26 +23,6 @@
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影" :alone="true">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="设置">
|
||||
<SettingItem name="阴影">
|
||||
<n-button
|
||||
size="small"
|
||||
@click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
|
||||
>
|
||||
去除阴影
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
|
||||
@ -1,33 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1"],
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,26 +1,29 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option.value"
|
||||
:manual-update="isPreview()"
|
||||
autoresize>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, reactive } from 'vue';
|
||||
import { PropType, computed, watch, ref, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
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 { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -37,41 +40,34 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
])
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const option = reactive({
|
||||
value: {}
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// 初始化与渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
v.color = themeColor[i]
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
}, {
|
||||
immediate: true,
|
||||
})
|
||||
|
||||
|
||||
watch(() => props.chartConfig.option.dataset, () => {
|
||||
option.value = props.chartConfig.option
|
||||
})
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGradientSingleConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
@ -20,7 +20,7 @@ const options = {
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
@ -52,8 +52,7 @@ const options = {
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientSingleConfig.key
|
||||
public chartConfig = LineGradientSingleConfig
|
||||
// 图表配置项
|
||||
|
||||
@ -6,7 +6,7 @@ export const LineGradientSingleConfig: ConfigType = {
|
||||
key: 'LineGradientSingle',
|
||||
chartKey: 'VLineGradientSingle',
|
||||
conKey: 'VCLineGradientSingle',
|
||||
title: '单折线面积图',
|
||||
title: '单折线渐变面积图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:theme="themeColor"
|
||||
:option="option.value"
|
||||
:manual-update="isPreview()"
|
||||
autoresize>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
@ -37,14 +32,7 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
@ -52,32 +40,41 @@ const option = reactive({
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
)
|
||||
|
||||
|
||||
watch(() => props.chartConfig.option.dataset, () => {
|
||||
option.value = props.chartConfig.option
|
||||
})
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGradientsConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
@ -20,7 +20,7 @@ const option = {
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
@ -33,7 +33,7 @@ const option = {
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid',
|
||||
type: 'solid'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
@ -47,7 +47,7 @@ const option = {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
@ -69,13 +69,12 @@ const option = {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientsConfig.key
|
||||
public chartConfig = LineGradientsConfig
|
||||
// 图表配置项
|
||||
|
||||
@ -6,7 +6,7 @@ export const LineGradientsConfig: ConfigType = {
|
||||
key: 'LineGradients',
|
||||
chartKey: 'VLineGradients',
|
||||
conKey: 'VCLineGradients',
|
||||
title: '双折线面积图',
|
||||
title: '双折线渐变面积图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
|
||||
@ -31,14 +31,7 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
@ -46,31 +39,38 @@ const option = reactive({
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
)
|
||||
|
||||
watch(() => props.chartConfig.option.dataset, () => {
|
||||
option.value = props.chartConfig.option
|
||||
})
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineLinearSingleConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: chartColorsSearch[defaultTheme][2],
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineLinearSingleConfig.key
|
||||
public chartConfig = LineLinearSingleConfig
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
:name="`样式`"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[0].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影" :alone="true">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="设置">
|
||||
<SettingItem name="阴影">
|
||||
<n-button
|
||||
size="small"
|
||||
@click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
|
||||
>
|
||||
去除阴影
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
{
|
||||
"dimensions": ["product", "data1"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import image from '@/assets/images/chart/charts/line_linear_single.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineLinearSingleConfig: ConfigType = {
|
||||
key: 'LineLinearSingle',
|
||||
chartKey: 'VLineLinearSingle',
|
||||
conKey: 'VCLineLinearSingle',
|
||||
title: '单折线渐变图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :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 { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
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'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 初始化与渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
v.color = themeColor[i]
|
||||
})
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
@ -1,5 +1,6 @@
|
||||
import { LineCommonConfig } from './LineCommon/index'
|
||||
import { LineLinearSingleConfig } from './LineLinearSingle/index'
|
||||
import { LineGradientSingleConfig } from './LineGradientSingle/index'
|
||||
import { LineGradientsConfig } from './LineGradients/index'
|
||||
|
||||
export default [LineCommonConfig, LineGradientSingleConfig, LineGradientsConfig]
|
||||
export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]
|
||||
|
||||
68
src/packages/components/Charts/Maps/MapChina/config.ts
Normal file
68
src/packages/components/Charts/Maps/MapChina/config.ts
Normal file
@ -0,0 +1,68 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapChinaConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
geo: {
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 6,
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
color: '#00ECC8'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '地图',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 1, //缩放
|
||||
itemStyle: {
|
||||
// 背景色
|
||||
areaColor: 'rgba(117, 236, 170, 0.3)',
|
||||
emphasis: {
|
||||
areaColor: 'rgba(117, 236, 170, .8)',
|
||||
borderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#75ecaa'
|
||||
},
|
||||
color: '#ffffff',
|
||||
borderColor: '#75ecaa',
|
||||
borderWidth: 1,
|
||||
showHainanIsLands: true // 是否显示南海群岛
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#ffffff'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapChinaConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = MapChinaConfig
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
82
src/packages/components/Charts/Maps/MapChina/config.vue
Normal file
82
src/packages/components/Charts/Maps/MapChina/config.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<div>
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="省份" :alone="true">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦颜色（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦阴影（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
146
src/packages/components/Charts/Maps/MapChina/data.json
Normal file
146
src/packages/components/Charts/Maps/MapChina/data.json
Normal file
@ -0,0 +1,146 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.2, 39.56, 1000]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"name": "天津市",
|
||||
"value": 99
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": 98
|
||||
},
|
||||
{
|
||||
"name": "山西省",
|
||||
"value": 97
|
||||
},
|
||||
{
|
||||
"name": "内蒙古自治区",
|
||||
"value": 96
|
||||
},
|
||||
{
|
||||
"name": "辽宁省",
|
||||
"value": 95
|
||||
},
|
||||
{
|
||||
"name": "吉林省",
|
||||
"value": 94
|
||||
},
|
||||
{
|
||||
"name": "黑龙江省",
|
||||
"value": 93
|
||||
},
|
||||
{
|
||||
"name": "上海市",
|
||||
"value": 92
|
||||
},
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": 91
|
||||
},
|
||||
{
|
||||
"name": "浙江省",
|
||||
"value": 90
|
||||
},
|
||||
{
|
||||
"name": "安徽省",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": 88
|
||||
},
|
||||
{
|
||||
"name": "江西省",
|
||||
"value": 87
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": 85
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"name": "湖南省",
|
||||
"value": 83
|
||||
},
|
||||
{
|
||||
"name": "广东省",
|
||||
"value": 82
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": 80
|
||||
},
|
||||
{
|
||||
"name": "重庆市",
|
||||
"value": 79
|
||||
},
|
||||
{
|
||||
"name": "四川省",
|
||||
"value": 78
|
||||
},
|
||||
{
|
||||
"name": "贵州省",
|
||||
"value": 77
|
||||
},
|
||||
{
|
||||
"name": "云南省",
|
||||
"value": 76
|
||||
},
|
||||
{
|
||||
"name": "西藏自治区",
|
||||
"value": 75
|
||||
},
|
||||
{
|
||||
"name": "陕西省",
|
||||
"value": 74
|
||||
},
|
||||
{
|
||||
"name": "甘肃省",
|
||||
"value": 73
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": 72
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": 71
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 70
|
||||
},
|
||||
{
|
||||
"name": "台湾省",
|
||||
"value": 69
|
||||
},
|
||||
{
|
||||
"name": "香港特别行政区",
|
||||
"value": 68
|
||||
},
|
||||
{
|
||||
"name": "澳门特别行政区",
|
||||
"value": 67
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,14 +1,15 @@
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapChineConfig: ConfigType = {
|
||||
key: 'MapChine',
|
||||
chartKey: 'VMapChine',
|
||||
conKey: 'VCMapChine',
|
||||
title: '北京地图',
|
||||
export const MapChinaConfig: ConfigType = {
|
||||
key: 'MapChina',
|
||||
chartKey: 'VMapChina',
|
||||
conKey: 'VCMapChina',
|
||||
title: '地图',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
94
src/packages/components/Charts/Maps/MapChina/index.vue
Normal file
94
src/packages/components/Charts/Maps/MapChina/index.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
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 { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJson from './map.json'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GeoComponent,
|
||||
EffectScatterChart
|
||||
])
|
||||
|
||||
registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
|
||||
const option = reactive({
|
||||
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: any) => {
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
|
||||
else if (item.type === 'map' && dataset.point) item.data = dataset.map
|
||||
option.value = props.chartConfig.option
|
||||
})
|
||||
}
|
||||
|
||||
const mapTypeHandle = (show: boolean) => {
|
||||
show
|
||||
? registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
: registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
|
||||
newData => {
|
||||
mapTypeHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
27324
src/packages/components/Charts/Maps/MapChina/map.json
Normal file
27324
src/packages/components/Charts/Maps/MapChina/map.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
line组件渲染
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,3 +1,3 @@
|
||||
import { MapChineConfig } from './MapChine/index'
|
||||
import { MapChinaConfig } from './MapChina/index'
|
||||
|
||||
export default [MapChineConfig]
|
||||
export default [MapChinaConfig]
|
||||
|
||||
62
src/packages/components/Charts/Mores/Funnel/config.ts
Normal file
62
src/packages/components/Charts/Mores/Funnel/config.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { FunnelConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend']
|
||||
|
||||
// 排序枚举
|
||||
export const FunnelOrderEnumList = [
|
||||
{ label: '倒三角', value: 'descending' },
|
||||
{ label: '正三角', value: 'ascending' }
|
||||
]
|
||||
// 标签位置枚举
|
||||
export const FunnelLabelPositionEnumList = [
|
||||
{ label: '内部', value: 'inside' },
|
||||
{ label: '外部', value: 'outside' },
|
||||
{ label: '内部左侧', value: 'insideLeft' },
|
||||
{ label: '内部右侧', value: 'insideRight' }
|
||||
]
|
||||
|
||||
export const option = {
|
||||
tooltip: {},
|
||||
legend: {},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
top: 70,
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
min: 0,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending', // descending | ascending
|
||||
gap: 5,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 0
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = FunnelConfig.key
|
||||
public chartConfig = cloneDeep(FunnelConfig)
|
||||
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,6 +1,67 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"> </global-setting>
|
||||
<!-- 漏斗图 -->
|
||||
<collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
|
||||
<setting-item-box name="排序" alone>
|
||||
<setting-item>
|
||||
<n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<SettingItemBox name="范围" :alone="true">
|
||||
<setting-item :name="`顶部距离：${item.top}px`">
|
||||
<n-slider v-model:value="item.top" :min="0" :max="300" :format-tooltip="sliderFormatTooltip"></n-slider>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
|
||||
<setting-item-box name="区块">
|
||||
<setting-item name="边框大小">
|
||||
<n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="边框颜色">
|
||||
<n-color-picker v-model:value="item.itemStyle.borderColor" :modes="['hex']" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="间隔">
|
||||
<n-input-number v-model:value="item.gap" :min="0" :max="20" size="small" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="标签">
|
||||
<setting-item name="是否显示">
|
||||
<n-checkbox v-model:checked="item.label.show" size="small">标签</n-checkbox>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="item.label.position" :options="FunnelLabelPositionEnumList" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" :min="0" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="悬停时大小">
|
||||
<n-input-number v-model:value="item.emphasis.label.fontSize" :min="0" size="small" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { option, FunnelOrderEnumList, FunnelLabelPositionEnumList } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const sliderFormatTooltip = (v: number) => {
|
||||
return `${v}px`
|
||||
}
|
||||
</script>
|
||||
|
||||
10
src/packages/components/Charts/Mores/Funnel/data.json
Normal file
10
src/packages/components/Charts/Mores/Funnel/data.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"dimensions": ["product", "dataOne"],
|
||||
"source": [
|
||||
{ "product": "data1", "dataOne": 20 },
|
||||
{ "product": "data2", "dataOne": 40 },
|
||||
{ "product": "data3", "dataOne": 60 },
|
||||
{ "product": "data4", "dataOne": 80 },
|
||||
{ "product": "data5", "dataOne": 100 }
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import image from '@/assets/images/chart/charts/funnel.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FunnelConfig: ConfigType = {
|
||||
@ -10,5 +10,6 @@ export const FunnelConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
}
|
||||
|
||||
@ -1,13 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
水波
|
||||
</div>
|
||||
<v-chart ref="vChartRef" :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 { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { FunnelChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } 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
|
||||
}
|
||||
})
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ProcessConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
@ -53,7 +53,7 @@ export const option = {
|
||||
offsetDegree: 0
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ProcessConfig.key
|
||||
public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(ProcessConfig)
|
||||
|
||||
@ -58,6 +58,9 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = toNumber(newData, 2)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
// 预览更新
|
||||
|
||||
51
src/packages/components/Charts/Mores/Radar/config.ts
Normal file
51
src/packages/components/Charts/Mores/Radar/config.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { RadarConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend']
|
||||
|
||||
// 雷达形状
|
||||
export const RadarShapeEnumList = [
|
||||
{ label: '多边形', value: 'polygon' },
|
||||
{ label: '圆形', value: 'circle' }
|
||||
]
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
legend: {
|
||||
data: dataJson.seriesData.map(i => i.name)
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
radar: {
|
||||
shape: 'polygon',
|
||||
radius: ['0%', '60%'],
|
||||
center: ['50%', '55%'],
|
||||
splitArea: { show: true },
|
||||
splitLine: { show: true },
|
||||
axisName: { show: true, color: '#eee', fontSize: 12 },
|
||||
axisLine: { show: true },
|
||||
axisTick: { show: true },
|
||||
indicator: dataJson.radarIndicator
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'radar',
|
||||
type: 'radar',
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
},
|
||||
data: dataJson.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = RadarConfig.key
|
||||
public chartConfig = cloneDeep(RadarConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,6 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
|
||||
<CollapseItem name="雷达" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.splitArea.show">背景</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem name="雷达形状">
|
||||
<n-select v-model:value="radarConfig.shape" size="small" :options="RadarShapeEnumList" placeholder="选择形状" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="坐标轴">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.axisLine.show">轴线</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.axisTick.show">刻度</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="范围">
|
||||
<setting-item :name="`最小值：${radarProp.radius[0]}%`">
|
||||
<n-slider
|
||||
v-model:value="radarProp.radius[0]"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:format-tooltip="sliderFormatTooltip"
|
||||
@update:value="updateRadius0"
|
||||
></n-slider>
|
||||
</setting-item>
|
||||
<setting-item :name="`最大值：${radarProp.radius[1]}%`">
|
||||
<n-slider
|
||||
v-model:value="radarProp.radius[1]"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:format-tooltip="sliderFormatTooltip"
|
||||
@update:value="updateRadius1"
|
||||
></n-slider>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="偏移">
|
||||
<setting-item :name="`X 轴值：${radarProp.center[0]}%`">
|
||||
<n-slider
|
||||
v-model:value="radarProp.center[0]"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:format-tooltip="sliderFormatTooltip"
|
||||
@update:value="updateCenter0"
|
||||
></n-slider>
|
||||
</setting-item>
|
||||
<setting-item :name="`Y 轴值：${radarProp.center[1]}%`">
|
||||
<n-slider
|
||||
v-model:value="radarProp.center[1]"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:format-tooltip="sliderFormatTooltip"
|
||||
@update:value="updateCenter1"
|
||||
></n-slider>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="指示器">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="radarConfig.axisName.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="radarConfig.axisName.fontSize" size="small" :min="9"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.axisName.show">文字标签</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="系列" :alone="true">
|
||||
<SettingItem name="背景透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].areaStyle.opacity"
|
||||
size="small"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, reactive } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option, RadarShapeEnumList } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const radarConfig = computed<typeof option.radar>(() => {
|
||||
return props.optionData.radar
|
||||
})
|
||||
|
||||
const radarProp = reactive({
|
||||
radius: [0, 60],
|
||||
center: [50, 50]
|
||||
})
|
||||
|
||||
// 更新处理
|
||||
const updateRadius0 = (value: number) => {
|
||||
props.optionData.radar.radius[0] = `${value}%`
|
||||
}
|
||||
|
||||
const updateRadius1 = (value: number) => {
|
||||
props.optionData.radar.radius[1] = `${value}%`
|
||||
}
|
||||
|
||||
// 更新处理
|
||||
const updateCenter0 = (value: number) => {
|
||||
props.optionData.radar.center[0] = `${value}%`
|
||||
}
|
||||
|
||||
const updateCenter1 = (value: number) => {
|
||||
props.optionData.radar.center[1] = `${value}%`
|
||||
}
|
||||
|
||||
// 百分比格式化 percent
|
||||
const sliderFormatTooltip = (v: number) => {
|
||||
return `${v}%`
|
||||
}
|
||||
</script>
|
||||
|
||||
20
src/packages/components/Charts/Mores/Radar/data.json
Normal file
20
src/packages/components/Charts/Mores/Radar/data.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"radarIndicator": [
|
||||
{ "name": "数据1", "max": 6500 },
|
||||
{ "name": "数据2", "max": 16000 },
|
||||
{ "name": "数据3", "max": 30000 },
|
||||
{ "name": "数据4", "max": 38000 },
|
||||
{ "name": "数据5", "max": 52000 },
|
||||
{ "name": "数据6", "max": 25000 }
|
||||
],
|
||||
"seriesData": [
|
||||
{
|
||||
"name": "data1",
|
||||
"value": [4200, 3000, 20000, 35000, 50000, 18000]
|
||||
},
|
||||
{
|
||||
"name": "data2",
|
||||
"value": [5000, 14000, 28000, 26000, 42000, 21000]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,14 +1,15 @@
|
||||
import image from '@/assets/images/chart/charts/radar.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const RadarConfig: ConfigType = {
|
||||
key: 'Radar',
|
||||
chartKey: 'VRadar',
|
||||
conKey: 'VCRadar',
|
||||
title: '雷达',
|
||||
title: '雷达图',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
|
||||
@ -1,13 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
水波
|
||||
</div>
|
||||
<v-chart ref="vChartRef" :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 { 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 { 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
|
||||
}
|
||||
})
|
||||
|
||||
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: any) => {
|
||||
if (dataset.seriesData) {
|
||||
props.chartConfig.option.series[0].data = dataset.seriesData
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name)
|
||||
}
|
||||
if (dataset.radarIndicator) {
|
||||
props.chartConfig.option.radar.indicator = dataset.radarIndicator
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { WaterPoloConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -89,7 +89,7 @@ export const option = {
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
public key = WaterPoloConfig.key
|
||||
public chartConfig = cloneDeep(WaterPoloConfig)
|
||||
|
||||
@ -10,6 +10,6 @@ export const WaterPoloConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
|
||||
@ -79,7 +79,8 @@ watch(
|
||||
option.value = props.chartConfig.option
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { PieCircleConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
@ -54,7 +54,7 @@ const option = {
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = PieCircleConfig.key
|
||||
|
||||
public chartConfig = PieCircleConfig
|
||||
|
||||
@ -50,7 +50,8 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => dataHandle(newData),
|
||||
{
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { PieCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
@ -44,7 +44,7 @@ const option = {
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = PieCommonConfig.key
|
||||
|
||||
public chartConfig = PieCommonConfig
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -9,7 +9,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border01Config.key
|
||||
public chartConfig = cloneDeep(Border01Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,8 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border02Config.key
|
||||
public chartConfig = cloneDeep(Border02Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border03Config.key
|
||||
public chartConfig = cloneDeep(Border03Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -13,7 +13,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border04Config.key
|
||||
public chartConfig = cloneDeep(Border04Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border05Config.key
|
||||
public chartConfig = cloneDeep(Border05Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border06Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border06Config.key
|
||||
public chartConfig = cloneDeep(Border06Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border07Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border07Config.key
|
||||
public chartConfig = cloneDeep(Border07Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border08Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -10,7 +10,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border08Config.key
|
||||
public chartConfig = cloneDeep(Border08Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border09Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border09Config.key
|
||||
public chartConfig = cloneDeep(Border09Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border10Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border10Config.key
|
||||
public chartConfig = cloneDeep(Border10Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border11Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border11Config.key
|
||||
public chartConfig = cloneDeep(Border11Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border12Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border12Config.key
|
||||
public chartConfig = cloneDeep(Border12Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border13Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Border13Config.key
|
||||
public chartConfig = cloneDeep(Border13Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -10,7 +10,7 @@ export const option = {
|
||||
endWidth: 5
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates01Config.key
|
||||
public chartConfig = cloneDeep(Decorates01Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -9,7 +9,7 @@ export const option = {
|
||||
lineHeight: 3
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates02Config.key
|
||||
public chartConfig = cloneDeep(Decorates02Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
dataset: '装饰-03',
|
||||
textColor: '#fff',
|
||||
textSize: 24,
|
||||
colors: ['#1dc1f5', '#1dc1f5'],
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates03Config.key
|
||||
public chartConfig = cloneDeep(Decorates03Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -56,11 +56,12 @@ import {
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -9,7 +9,7 @@ export const option = {
|
||||
reverse: false
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates04Config.key
|
||||
public chartConfig = cloneDeep(Decorates04Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -8,7 +8,7 @@ export const option = {
|
||||
dur: 3
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates05Config.key
|
||||
public chartConfig = cloneDeep(Decorates05Config)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { NumberConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -18,7 +18,7 @@ export const option = {
|
||||
suffixColor: '#4a9ef8',
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = NumberConfig.key
|
||||
public chartConfig = cloneDeep(NumberConfig)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -6,8 +6,13 @@
|
||||
</span>
|
||||
</template>
|
||||
<span :style="`color:${numberColor};font-size:${numberSize}px`">
|
||||
<n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
|
||||
:precision="precision"></n-number-animation>
|
||||
<n-number-animation
|
||||
:from="option.from"
|
||||
:to="option.dataset"
|
||||
:duration="dur * 1000"
|
||||
:show-separator="showSeparator"
|
||||
:precision="precision"
|
||||
></n-number-animation>
|
||||
</span>
|
||||
<template #suffix>
|
||||
<span :style="`color:${suffixColor};font-size:${numberSize}px`">
|
||||
@ -26,25 +31,16 @@ import { useChartDataFetch } from '@/hooks'
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const option = reactive({
|
||||
from: 0,
|
||||
dataset: 0,
|
||||
dataset: 0
|
||||
})
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
let {
|
||||
dur,
|
||||
showSeparator,
|
||||
prefixText,
|
||||
prefixColor,
|
||||
suffixText,
|
||||
suffixColor,
|
||||
precision,
|
||||
numberSize,
|
||||
numberColor,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
let { dur, showSeparator, prefixText, prefixColor, suffixText, suffixColor, precision, numberSize, numberColor } =
|
||||
toRefs(props.chartConfig.option)
|
||||
|
||||
const updateNumber = (newData: number) => {
|
||||
// 原来的目标值作为新的数字动画的起始值
|
||||
@ -56,14 +52,19 @@ watch(
|
||||
() => props.chartConfig.option.from,
|
||||
() => {
|
||||
option.from = props.chartConfig.option.from
|
||||
}, { immediate: true }
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.dataset = props.chartConfig.option.dataset
|
||||
}, { immediate: true }
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
|
||||
|
||||
38
src/packages/components/Decorates/Mores/TimeCommon/config.ts
Normal file
38
src/packages/components/Decorates/Mores/TimeCommon/config.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TimeCommonConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
export enum FontWeightEnum {
|
||||
NORMAL = '常规',
|
||||
BOLD = '加粗'
|
||||
}
|
||||
|
||||
export const FontWeightObject = {
|
||||
[FontWeightEnum.NORMAL]: 'normal',
|
||||
[FontWeightEnum.BOLD]: 'bold'
|
||||
}
|
||||
|
||||
export const option = {
|
||||
// 数据说明
|
||||
timeSize: 24,
|
||||
timeLineHeight: 50,
|
||||
timeTextIndent: 2,
|
||||
timeColor: '#E6F7FF',
|
||||
fontWeight: 'normal',
|
||||
|
||||
//阴影
|
||||
showShadow: true,
|
||||
hShadow: 0,
|
||||
vShadow: 0,
|
||||
blurShadow: 8,
|
||||
colorShadow: '#0075ff'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TimeCommonConfig.key
|
||||
public attr = { ...chartInitConfig, w: 300, h: 50, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(TimeCommonConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="字体">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.timeSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-select
|
||||
v-model:value="optionData.fontWeight"
|
||||
size="small"
|
||||
:options="fontWeightOptions"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="间距">
|
||||
<SettingItem name="字距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.timeTextIndent"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="行距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.timeLineHeight"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="颜色">
|
||||
<SettingItem name="时间">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.timeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showShadow" size="small" />
|
||||
<n-text>展示阴影</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="x">
|
||||
<n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
|
||||
></SettingItem>
|
||||
<SettingItem name="y">
|
||||
<n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
|
||||
></SettingItem>
|
||||
<SettingItem name="模糊">
|
||||
<n-input-number
|
||||
v-model:value="optionData.blurShadow"
|
||||
size="small"
|
||||
></n-input-number
|
||||
></SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colorShadow"
|
||||
></n-color-picker
|
||||
></SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType } from "vue";
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from "@/components/Pages/ChartItemSetting";
|
||||
import { option, FontWeightEnum, FontWeightObject } from "./config";
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const fontWeightOptions = [
|
||||
{
|
||||
label: FontWeightEnum.NORMAL,
|
||||
value: FontWeightObject[FontWeightEnum.NORMAL],
|
||||
},
|
||||
{
|
||||
label: FontWeightEnum.BOLD,
|
||||
value: FontWeightObject[FontWeightEnum.BOLD],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
14
src/packages/components/Decorates/Mores/TimeCommon/index.ts
Normal file
14
src/packages/components/Decorates/Mores/TimeCommon/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import image from '@/assets/images/chart/decorates/time-common.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TimeCommonConfig: ConfigType = {
|
||||
key: 'TimeCommon',
|
||||
chartKey: 'VTimeCommon',
|
||||
conKey: 'VCTimeCommon',
|
||||
title: '通用时间',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
}
|
||||
92
src/packages/components/Decorates/Mores/TimeCommon/index.vue
Normal file
92
src/packages/components/Decorates/Mores/TimeCommon/index.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="go-decorates-number" :style="`width:${w}px;height:${h}px;`">
|
||||
<div
|
||||
:style="`color:${timeColor};font-size:${timeSize}px;line-height:${timeLineHeight}px;
|
||||
letter-spacing:${timeTextIndent}px;font-weight:${fontWeight};
|
||||
text-shadow: ${boxShadow}`"
|
||||
>
|
||||
{{ newData }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from "vue";
|
||||
import { CreateComponentType } from "@/packages/index.d";
|
||||
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
|
||||
import { useChartDataFetch } from "@/hooks";
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
let yearMonthDay = ref("2021-2-3");
|
||||
let nowData = ref("08:00:00");
|
||||
let newData = ref("2021-2-3 08:00:00");
|
||||
let boxShadow = ref("none");
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
let {
|
||||
timeColor,
|
||||
timeSize,
|
||||
timeLineHeight,
|
||||
timeTextIndent,
|
||||
fontWeight,
|
||||
showShadow,
|
||||
hShadow,
|
||||
vShadow,
|
||||
blurShadow,
|
||||
colorShadow,
|
||||
} = toRefs(props.chartConfig.option);
|
||||
|
||||
watch(
|
||||
props.chartConfig.option,
|
||||
() => {
|
||||
if (props.chartConfig.option.showShadow) {
|
||||
boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
|
||||
} else {
|
||||
boxShadow.value = "none";
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
const timer = setInterval(() => {
|
||||
var datetime = new Date();
|
||||
var year = datetime.getFullYear();
|
||||
var month =
|
||||
datetime.getMonth() + 1 < 10
|
||||
? "0" + (datetime.getMonth() + 1)
|
||||
: datetime.getMonth() + 1;
|
||||
var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
|
||||
var hh = datetime.getHours(); // 时
|
||||
var mm = datetime.getMinutes(); // 分
|
||||
var ss = datetime.getSeconds(); // 分
|
||||
let time = "";
|
||||
if (hh < 10) time += "0";
|
||||
time += hh + ":";
|
||||
if (mm < 10) time += "0";
|
||||
time += mm + ":";
|
||||
if (ss < 10) time += "0";
|
||||
time += ss;
|
||||
yearMonthDay.value = `${year}-${month}-${date}`;
|
||||
nowData.value = time;
|
||||
newData.value = yearMonthDay.value + " " + nowData.value;
|
||||
}, 500);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval();
|
||||
});
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go("decorates-number") {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -2,5 +2,6 @@ import { WeatherConfig } from './Weather/index'
|
||||
import { TimeConfig } from './Time/index'
|
||||
import { WeatherTimeConfig } from './WeatherTime/index'
|
||||
import { NumberConfig } from './Number/index'
|
||||
import { TimeCommonConfig } from './TimeCommon/index'
|
||||
|
||||
export default [WeatherConfig, TimeConfig, WeatherTimeConfig, NumberConfig]
|
||||
export default [WeatherConfig, TimeCommonConfig, TimeConfig, WeatherTimeConfig, NumberConfig]
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ImageConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -13,7 +13,7 @@ export const option = {
|
||||
borderRadius: 10
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
public key = ImageConfig.key
|
||||
public chartConfig = cloneDeep(ImageConfig)
|
||||
|
||||
@ -46,7 +46,8 @@ watch(
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TextCommonConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -31,7 +31,7 @@ export const option = {
|
||||
backgroundColor: '#00000000',
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
public key = TextCommonConfig.key
|
||||
public chartConfig = cloneDeep(TextCommonConfig)
|
||||
|
||||
@ -24,7 +24,7 @@ import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
import { option as configOption } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
@ -57,8 +57,10 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = newData
|
||||
}, {
|
||||
immediate: true
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TextGradientConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -13,7 +13,7 @@ export const option = {
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TextGradientConfig.key
|
||||
public chartConfig = cloneDeep(TextGradientConfig)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -32,7 +32,8 @@ watch(
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TableListConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -29,7 +29,7 @@ export const option = {
|
||||
valueFormatter(item: { value: any}) { return item.value}
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TableListConfig.key
|
||||
public chartConfig = cloneDeep(TableListConfig)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
@ -169,6 +169,9 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
onRestart()
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TableScrollBoardConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
@ -9,20 +9,17 @@ export const option = {
|
||||
dataset: dataJson,
|
||||
index: true,
|
||||
columnWidth: [30, 100, 100],
|
||||
align: ['center','right','right','right'],
|
||||
align: ['center', 'right', 'right', 'right'],
|
||||
rowNum: 5,
|
||||
waitTime: 2,
|
||||
headerHeight: 35,
|
||||
carousel: 'single',
|
||||
headerBGC: '#00BAFF',
|
||||
oddRowBGC: '#003B51',
|
||||
evenRowBGC: '#0A2732',
|
||||
evenRowBGC: '#0A2732'
|
||||
}
|
||||
|
||||
export default class Config
|
||||
extends publicConfig
|
||||
implements CreateComponentType
|
||||
{
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TableScrollBoardConfig.key
|
||||
public chartConfig = cloneDeep(TableScrollBoardConfig)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
2
src/packages/index.d.ts
vendored
2
src/packages/index.d.ts
vendored
@ -2,7 +2,7 @@ import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
|
||||
export enum ChartFrameEnum {
|
||||
// echarts 框架
|
||||
// 支持 dataset 的 echarts 框架
|
||||
ECHARTS = 'echarts',
|
||||
// UI 组件框架
|
||||
NAIVE_UI = 'naiveUI',
|
||||
|
||||
@ -36,7 +36,7 @@ const requestConfig: RequestConfigType = {
|
||||
}
|
||||
|
||||
// 单实例类
|
||||
export class publicConfig implements PublicConfigType {
|
||||
export class PublicConfigClass implements PublicConfigType {
|
||||
public id = getUUID()
|
||||
public isGroup = false
|
||||
// 基本信息
|
||||
@ -78,8 +78,8 @@ export class publicConfig implements PublicConfigType {
|
||||
}
|
||||
}
|
||||
|
||||
// 成组类 (部分属性不需要, 不继承 publicConfig)
|
||||
export class PublicGroupConfigClass extends publicConfig implements CreateComponentGroupType {
|
||||
// 多选成组类
|
||||
export class PublicGroupConfigClass extends PublicConfigClass implements CreateComponentGroupType {
|
||||
// 成组
|
||||
public isGroup = true
|
||||
// 名称
|
||||
|
||||
@ -480,6 +480,8 @@ export const useChartEditStore = defineStore({
|
||||
try {
|
||||
// 暂不支持多选
|
||||
if (this.getTargetChart.selectId.length > 1) return
|
||||
// 处理弹窗普通复制的场景
|
||||
if (document.getElementsByClassName('n-modal-body-wrapper').length) return
|
||||
|
||||
loadingStart()
|
||||
const index: number = this.fetchTargetIndex()
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
<!-- 骨架图 -->
|
||||
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
||||
<!-- 请求配置model -->
|
||||
<chart-data-request v-model:modelShow="requestShow"></chart-data-request>
|
||||
<chart-data-request v-model:modelShow="requestShow" @sendHandle="sendHandle"></chart-data-request>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
</n-timeline-item>
|
||||
<n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
|
||||
<n-space vertical>
|
||||
<n-text depth="3">ECharts 图表需符合 ECharts-setdata 数据规范</n-text>
|
||||
<n-space class="source-btn-box">
|
||||
<n-upload
|
||||
v-model:file-list="uploadFileListRef"
|
||||
@ -81,7 +80,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChartFrameEnum } from '@/packages/index.d'
|
||||
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { icon } from '@/plugins'
|
||||
import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
|
||||
@ -120,9 +119,9 @@ const filterShow = computed(() => {
|
||||
return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
|
||||
})
|
||||
|
||||
// 是图表类型
|
||||
// 是支持 dataset 的图表类型
|
||||
const isCharts = computed(() => {
|
||||
return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS
|
||||
return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
|
||||
})
|
||||
|
||||
// 处理映射列表状态结果
|
||||
@ -165,21 +164,23 @@ const dimensionsAndSourceHandle = () => {
|
||||
watch(
|
||||
() => targetData.value?.option?.dataset,
|
||||
(
|
||||
newData: {
|
||||
newData?: {
|
||||
source: any
|
||||
dimensions: any
|
||||
} | null
|
||||
) => {
|
||||
if (newData && isObject(newData)) {
|
||||
// 只有 Echarts 数据才有对应的格式
|
||||
if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
// 只有 DataSet 数据才有对应的格式
|
||||
source.value = newData
|
||||
if (isCharts.value) {
|
||||
dimensions.value = newData.dimensions
|
||||
dimensionsAndSource.value = dimensionsAndSourceHandle()
|
||||
}
|
||||
} else {
|
||||
} else if (newData !== undefined && newData !== null) {
|
||||
dimensionsAndSource.value = null
|
||||
source.value = newData
|
||||
} else {
|
||||
source.value = '此组件无数据源'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -62,7 +62,17 @@ import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfi
|
||||
import { RequestHeader } from '../RequestHeader'
|
||||
import { isDev } from '@/utils'
|
||||
import { icon } from '@/plugins'
|
||||
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
|
||||
import {
|
||||
chartDataUrl,
|
||||
chartSingleDataUrl,
|
||||
rankListUrl,
|
||||
scrollBoardUrl,
|
||||
numberFloatUrl,
|
||||
numberIntUrl,
|
||||
textUrl,
|
||||
imageUrl,
|
||||
radarUrl
|
||||
} from '@/api/mock'
|
||||
|
||||
const { HelpOutlineIcon } = icon.ionicons5
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
@ -73,6 +83,9 @@ const apiList = [
|
||||
{
|
||||
value: `【图表】${chartDataUrl}`
|
||||
},
|
||||
{
|
||||
value: `【单数据图表】${chartSingleDataUrl}`
|
||||
},
|
||||
{
|
||||
value: `【文本】${textUrl}`
|
||||
},
|
||||
@ -90,6 +103,9 @@ const apiList = [
|
||||
},
|
||||
{
|
||||
value: `【滚动表格】${scrollBoardUrl}`
|
||||
},
|
||||
{
|
||||
value: `【雷达】${radarUrl}`
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -33,7 +33,7 @@ import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
import { RequestGlobalConfig } from './components/RequestGlobalConfig'
|
||||
import { RequestTargetConfig } from './components/RequestTargetConfig'
|
||||
|
||||
const emit = defineEmits(['update:modelShow'])
|
||||
const emit = defineEmits(['update:modelShow', 'sendHandle'])
|
||||
|
||||
const { targetData } = useTargetData()
|
||||
// 解构基础配置
|
||||
@ -50,6 +50,7 @@ defineProps({
|
||||
|
||||
const closeHandle = () => {
|
||||
emit('update:modelShow', false)
|
||||
emit('sendHandle')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<div class="go-chart-configurations-data" v-if="targetData">
|
||||
<setting-item-box name="请求方式" :alone="true">
|
||||
<n-select
|
||||
v-model:value="targetData.request.requestDataType"
|
||||
:options="selectOptions"
|
||||
/>
|
||||
<n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
|
||||
</setting-item-box>
|
||||
|
||||
<!-- 静态 -->
|
||||
<chart-data-static
|
||||
v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"
|
||||
></chart-data-static>
|
||||
<chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
|
||||
|
||||
<!-- 动态 -->
|
||||
<chart-data-ajax v-else></chart-data-ajax>
|
||||
@ -18,6 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '../hooks/useTargetData.hook'
|
||||
import { ChartDataStatic } from './components/ChartDataStatic/index'
|
||||
@ -38,4 +34,9 @@ const selectOptions: SelectCreateDataType[] = [
|
||||
value: RequestDataTypeEnum.AJAX
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
// 无数据源
|
||||
const isNotData = computed(() => {
|
||||
return typeof targetData.value?.option?.dataset === 'undefined'
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
:showBottom="true"
|
||||
:depth="1"
|
||||
:xScroll="true"
|
||||
@mousedown="mousedownHandleUnStop"
|
||||
@drop="dragHandle"
|
||||
@dragover="dragoverHandle"
|
||||
@dragenter="dragoverHandle"
|
||||
@ -88,7 +89,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { useLayout } from './hooks/useLayout.hook'
|
||||
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
|
||||
import { useSync } from '../hooks/useSync.hook'
|
||||
import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
|
||||
import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
|
||||
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
|
||||
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user