Commit 8e47a5c7dc31b873754059dd87d2aee0eb64450b

Authored by fengwotao
1 parent bc0b09fc

perf(external/Componse): 移除组合下的词云

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 -}  
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>  
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 -]  
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 -}  
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]