Showing
6 changed files
with
1 additions
and
352 deletions
src/packages/components/external/Composes/Mores/WordCloud/config.ts
deleted
100644 → 0
1 | -import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' | ||
2 | -import { WordCloudConfig } from './index' | ||
3 | -import { CreateComponentType } from '@/packages/index.d' | ||
4 | -import cloneDeep from 'lodash/cloneDeep' | ||
5 | -import dataJson from './data.json' | ||
6 | - | ||
7 | -export const includes = [] | ||
8 | - | ||
9 | -export const ShapeEnumList = [ | ||
10 | - { label: '圆形', value: 'circle' }, | ||
11 | - { label: '心形', value: 'cardioid' }, | ||
12 | - { label: '钻石', value: 'diamond' }, | ||
13 | - { label: '右三角形', value: 'triangle-forward' }, | ||
14 | - { label: '三角形', value: 'triangle' }, | ||
15 | - { label: '五边形', value: 'pentagon' }, | ||
16 | - { label: '星星', value: 'star' } | ||
17 | -] | ||
18 | - | ||
19 | -export const option = { | ||
20 | - dataset: [...dataJson], | ||
21 | - tooltip: {}, | ||
22 | - series: [ | ||
23 | - { | ||
24 | - type: 'wordCloud', | ||
25 | - | ||
26 | - // “云”绘制的形状,可以是表示为回调函数,也可以是固定关键字。 | ||
27 | - // 可用值有:circle|cardioid|diamond|triangle-forward|triangle|pentagon|star | ||
28 | - shape: 'circle', | ||
29 | - | ||
30 | - // 白色区域将被排除在绘制文本之外的剪影图像。 | ||
31 | - // 随着云的形状生长,形状选项将继续应用。 | ||
32 | - // maskImage: maskImage, | ||
33 | - | ||
34 | - // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud | ||
35 | - // Default to be put in the center and has 75% x 80% size. | ||
36 | - left: 'center', | ||
37 | - top: 'center', | ||
38 | - width: '70%', | ||
39 | - height: '80%', | ||
40 | - right: null, | ||
41 | - bottom: null, | ||
42 | - | ||
43 | - // 文本大小范围,默认 [12,60] | ||
44 | - sizeRange: [12, 60], | ||
45 | - | ||
46 | - // 文本旋转范围和程度的步骤。 文本将通过旋转步骤45在[-90,90]中随机旋转 | ||
47 | - rotationRange: [0, 0], | ||
48 | - rotationStep: 0, | ||
49 | - | ||
50 | - // size of the grid in pixels for marking the availability of the canvas | ||
51 | - // 网格大小越大,单词之间的差距就越大。 | ||
52 | - gridSize: 8, | ||
53 | - | ||
54 | - // 设置为true,以允许单词在画布之外部分地绘制。允许绘制大于画布的大小 | ||
55 | - drawOutOfBound: false, | ||
56 | - | ||
57 | - // If perform layout animation. | ||
58 | - // NOTE disable it will lead to UI blocking when there is lots of words. | ||
59 | - layoutAnimation: true, | ||
60 | - | ||
61 | - // Global text style | ||
62 | - textStyle: { | ||
63 | - fontFamily: 'sans-serif', | ||
64 | - fontWeight: 'bold' | ||
65 | - // 颜色可以是回调功能或颜色字符串 | ||
66 | - // color: function () { | ||
67 | - // // 随机颜色 | ||
68 | - // return ( | ||
69 | - // 'rgb(' + | ||
70 | - // [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join( | ||
71 | - // ',' | ||
72 | - // ) + | ||
73 | - // ')' | ||
74 | - // ) | ||
75 | - // } | ||
76 | - }, | ||
77 | - emphasis: { | ||
78 | - focus: 'self', | ||
79 | - | ||
80 | - textStyle: { | ||
81 | - shadowBlur: 10, | ||
82 | - shadowColor: '#333' | ||
83 | - } | ||
84 | - }, | ||
85 | - data: [...dataJson] | ||
86 | - } | ||
87 | - ] | ||
88 | -} | ||
89 | - | ||
90 | -export default class Config extends PublicConfigClass implements CreateComponentType { | ||
91 | - public key = WordCloudConfig.key | ||
92 | - public chartConfig = cloneDeep(WordCloudConfig) | ||
93 | - // 图表配置项 | ||
94 | - public option = echartOptionProfixHandle(option, includes) | ||
95 | -} |
src/packages/components/external/Composes/Mores/WordCloud/config.vue
deleted
100644 → 0
1 | -<template> | ||
2 | - <collapse-item name="词云" expanded> | ||
3 | - <setting-item-box name="形状"> | ||
4 | - <setting-item> | ||
5 | - <n-select v-model:value="optionData.series[0].shape" size="small" :options="ShapeEnumList" /> | ||
6 | - </setting-item> | ||
7 | - <setting-item> | ||
8 | - <n-checkbox v-model:checked="optionData.series[0].drawOutOfBound" size="small">允许出边</n-checkbox> | ||
9 | - </setting-item> | ||
10 | - </setting-item-box> | ||
11 | - | ||
12 | - <setting-item-box name="布局"> | ||
13 | - <setting-item name="宽度"> | ||
14 | - <n-slider | ||
15 | - v-model:value="series.width" | ||
16 | - :min="0" | ||
17 | - :max="100" | ||
18 | - :format-tooltip="sliderFormatTooltip" | ||
19 | - @update:value="updateWidth" | ||
20 | - ></n-slider> | ||
21 | - </setting-item> | ||
22 | - <setting-item name="高度"> | ||
23 | - <n-slider | ||
24 | - v-model:value="series.height" | ||
25 | - :min="0" | ||
26 | - :max="100" | ||
27 | - :format-tooltip="sliderFormatTooltip" | ||
28 | - @update:value="updateHeight" | ||
29 | - ></n-slider> | ||
30 | - </setting-item> | ||
31 | - </setting-item-box> | ||
32 | - | ||
33 | - <setting-item-box name="样式" alone> | ||
34 | - <setting-item name="字体区间(最小/最大字体)"> | ||
35 | - <n-slider v-model:value="optionData.series[0].sizeRange" range :step="1" :min="6" :max="100" /> | ||
36 | - </setting-item> | ||
37 | - <setting-item name="旋转角度"> | ||
38 | - <n-slider v-model:value="series.rotationStep" :step="15" :min="0" :max="45" @update:value="updateRotation" /> | ||
39 | - </setting-item> | ||
40 | - </setting-item-box> | ||
41 | - </collapse-item> | ||
42 | -</template> | ||
43 | - | ||
44 | -<script setup lang="ts"> | ||
45 | -import { PropType, computed } from 'vue' | ||
46 | -import { option, ShapeEnumList } from './config' | ||
47 | -// eslint-disable-next-line no-unused-vars | ||
48 | -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | ||
49 | - | ||
50 | -const props = defineProps({ | ||
51 | - optionData: { | ||
52 | - type: Object as PropType<typeof option>, | ||
53 | - required: true | ||
54 | - } | ||
55 | -}) | ||
56 | - | ||
57 | -const series = computed(() => { | ||
58 | - const { width, height, rotationStep } = props.optionData.series[0] | ||
59 | - return { | ||
60 | - width: +width.replace('%', ''), | ||
61 | - height: +height.replace('%', ''), | ||
62 | - rotationStep | ||
63 | - } | ||
64 | -}) | ||
65 | - | ||
66 | -const sliderFormatTooltip = (v: number) => { | ||
67 | - return `${v}%` | ||
68 | -} | ||
69 | - | ||
70 | -const updateWidth = (value: number) => { | ||
71 | - props.optionData.series[0].width = `${value}%` | ||
72 | -} | ||
73 | - | ||
74 | -const updateHeight = (value: number) => { | ||
75 | - props.optionData.series[0].height = `${value}%` | ||
76 | -} | ||
77 | - | ||
78 | -const updateRotation = (value: number) => { | ||
79 | - props.optionData.series[0].rotationStep = value | ||
80 | - props.optionData.series[0].rotationRange = value === 0 ? [0, 0] : [-90, 90] | ||
81 | -} | ||
82 | -</script> |
src/packages/components/external/Composes/Mores/WordCloud/data.json
deleted
100644 → 0
1 | -[ | ||
2 | - { | ||
3 | - "name": "数据可视化", | ||
4 | - "value": 8000, | ||
5 | - "textStyle": { | ||
6 | - "color": "#78fbb2" | ||
7 | - }, | ||
8 | - "emphasis": { | ||
9 | - "textStyle": { | ||
10 | - "color": "red" | ||
11 | - } | ||
12 | - } | ||
13 | - }, | ||
14 | - { | ||
15 | - "name": "GO VIEW", | ||
16 | - "value": 6181 | ||
17 | - }, | ||
18 | - { | ||
19 | - "name": "低代码", | ||
20 | - "value": 4386 | ||
21 | - }, | ||
22 | - { | ||
23 | - "name": "Vue3", | ||
24 | - "value": 4055 | ||
25 | - }, | ||
26 | - { | ||
27 | - "name": "TypeScript4", | ||
28 | - "value": 2467 | ||
29 | - }, | ||
30 | - { | ||
31 | - "name": "Vite2", | ||
32 | - "value": 2244 | ||
33 | - }, | ||
34 | - { | ||
35 | - "name": "NaiveUI", | ||
36 | - "value": 1898 | ||
37 | - }, | ||
38 | - { | ||
39 | - "name": "ECharts5", | ||
40 | - "value": 1484 | ||
41 | - }, | ||
42 | - { | ||
43 | - "name": "Axios", | ||
44 | - "value": 1112 | ||
45 | - }, | ||
46 | - { | ||
47 | - "name": "Pinia2", | ||
48 | - "value": 965 | ||
49 | - }, | ||
50 | - { | ||
51 | - "name": "PlopJS", | ||
52 | - "value": 847 | ||
53 | - }, | ||
54 | - { | ||
55 | - "name": "sfc", | ||
56 | - "value": 582 | ||
57 | - }, | ||
58 | - { | ||
59 | - "name": "SCSS", | ||
60 | - "value": 555 | ||
61 | - }, | ||
62 | - { | ||
63 | - "name": "pnpm", | ||
64 | - "value": 550 | ||
65 | - }, | ||
66 | - { | ||
67 | - "name": "eslint", | ||
68 | - "value": 462 | ||
69 | - }, | ||
70 | - { | ||
71 | - "name": "json", | ||
72 | - "value": 366 | ||
73 | - }, | ||
74 | - { | ||
75 | - "name": "图表", | ||
76 | - "value": 360 | ||
77 | - }, | ||
78 | - { | ||
79 | - "name": "地图", | ||
80 | - "value": 282 | ||
81 | - }, | ||
82 | - { | ||
83 | - "name": "时钟", | ||
84 | - "value": 273 | ||
85 | - }, | ||
86 | - { | ||
87 | - "name": "标题", | ||
88 | - "value": 265 | ||
89 | - } | ||
90 | -] |
src/packages/components/external/Composes/Mores/WordCloud/index.ts
deleted
100644 → 0
1 | -import { useWidgetKey } from '@/packages/external/useWidgetKey' | ||
2 | -import { ConfigType, ChartFrameEnum } from '@/packages/index.d' | ||
3 | -import { EPackagesCategoryEnum } from '../../../types' | ||
4 | -import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' | ||
5 | - | ||
6 | -const { key, conKey, chartKey } = useWidgetKey('WordCloud') | ||
7 | -export const WordCloudConfig: ConfigType = { | ||
8 | - key, | ||
9 | - chartKey, | ||
10 | - conKey, | ||
11 | - title: '词云', | ||
12 | - category: ChatCategoryEnum.MORE, | ||
13 | - categoryName: ChatCategoryEnumName.MORE, | ||
14 | - package: EPackagesCategoryEnum.COMPOSES, | ||
15 | - chartFrame: ChartFrameEnum.COMMON, | ||
16 | - image: 'words_cloud.png' | ||
17 | -} |
src/packages/components/external/Composes/Mores/WordCloud/index.vue
deleted
100644 → 0
1 | -<template> | ||
2 | - <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" | ||
3 | - :update-options="{ replaceMerge: replaceMergeArr }" autoresize></v-chart> | ||
4 | -</template> | ||
5 | - | ||
6 | -<script setup lang="ts"> | ||
7 | -import { ref, computed, watch, PropType } from 'vue' | ||
8 | -import VChart from 'vue-echarts' | ||
9 | -import 'echarts-wordcloud' | ||
10 | -import { use } from 'echarts/core' | ||
11 | -import { CanvasRenderer } from 'echarts/renderers' | ||
12 | -import config, { includes } from './config' | ||
13 | -import { mergeTheme, setOption } from '@/packages/public/chart' | ||
14 | -import { useChartDataFetch } from '@/hooks' | ||
15 | -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
16 | -import { isPreview } from '@/utils' | ||
17 | -import { GridComponent, TooltipComponent } from 'echarts/components' | ||
18 | -import dataJson from './data.json' | ||
19 | - | ||
20 | -const props = defineProps({ | ||
21 | - themeSetting: { | ||
22 | - type: Object, | ||
23 | - required: true | ||
24 | - }, | ||
25 | - themeColor: { | ||
26 | - type: Object, | ||
27 | - required: true | ||
28 | - }, | ||
29 | - chartConfig: { | ||
30 | - type: Object as PropType<config>, | ||
31 | - required: true | ||
32 | - } | ||
33 | -}) | ||
34 | - | ||
35 | -use([CanvasRenderer, GridComponent, TooltipComponent]) | ||
36 | - | ||
37 | -const replaceMergeArr = ref<string[]>() | ||
38 | - | ||
39 | -const option = computed(() => { | ||
40 | - return mergeTheme(props.chartConfig.option, props.themeSetting, includes) | ||
41 | -}) | ||
42 | - | ||
43 | -const dataSetHandle = (dataset: typeof dataJson) => { | ||
44 | - try { | ||
45 | - dataset && (props.chartConfig.option.series[0].data = dataset) | ||
46 | - vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option) | ||
47 | - } catch (error) { | ||
48 | - console.log(error) | ||
49 | - } | ||
50 | -} | ||
51 | - | ||
52 | -// dataset 无法变更条数的补丁 | ||
53 | -watch( | ||
54 | - () => props.chartConfig.option.dataset, | ||
55 | - newData => { | ||
56 | - dataSetHandle(newData) | ||
57 | - }, | ||
58 | - { | ||
59 | - deep: false | ||
60 | - } | ||
61 | -) | ||
62 | - | ||
63 | -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => { | ||
64 | - dataSetHandle(newData) | ||
65 | -}) | ||
66 | -</script> |
1 | -import { WordCloudConfig } from './WordCloud/index' | ||
2 | import { ButtonConfig } from './Button/index' | 1 | import { ButtonConfig } from './Button/index' |
3 | import { DateTimeConfig } from './DateTime/index' | 2 | import { DateTimeConfig } from './DateTime/index' |
4 | 3 | ||
5 | -export default [WordCloudConfig,ButtonConfig,DateTimeConfig] | 4 | +export default [ButtonConfig,DateTimeConfig] |