From 20f720bf27f96610cfba50061227b6480c877898 Mon Sep 17 00:00:00 2001 From: tnt group Date: Thu, 22 Sep 2022 01:01:54 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=AF=8D=E4=BA=91=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 13 +++ .../Informations/Mores/TextCloud/config.vue | 6 -- .../Informations/Mores/TextCloud/index.vue | 13 --- .../Informations/Mores/WordCloud/config.ts | 95 +++++++++++++++++++ .../Informations/Mores/WordCloud/config.vue | 89 +++++++++++++++++ .../Informations/Mores/WordCloud/data.json | 90 ++++++++++++++++++ .../Mores/{TextCloud => WordCloud}/index.ts | 10 +- .../Informations/Mores/WordCloud/index.vue | 63 ++++++++++++ .../components/Informations/Mores/index.ts | 4 +- 10 files changed, 358 insertions(+), 26 deletions(-) delete mode 100644 src/packages/components/Informations/Mores/TextCloud/config.vue delete mode 100644 src/packages/components/Informations/Mores/TextCloud/index.vue create mode 100644 src/packages/components/Informations/Mores/WordCloud/config.ts create mode 100644 src/packages/components/Informations/Mores/WordCloud/config.vue create mode 100644 src/packages/components/Informations/Mores/WordCloud/data.json rename src/packages/components/Informations/Mores/{TextCloud => WordCloud}/index.ts (61%) create mode 100644 src/packages/components/Informations/Mores/WordCloud/index.vue diff --git a/package.json b/package.json index c839d980..fe97fc5d 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "crypto-js": "^4.1.1", "echarts-liquidfill": "^3.1.0", "echarts-stat": "^1.2.0", + "echarts-wordcloud": "^2.0.0", "highlight.js": "^11.5.0", "html2canvas": "^1.4.1", "keymaster": "^1.6.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ebec3794..e8717b6c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,6 +25,7 @@ specifiers: echarts: ^5.3.2 echarts-liquidfill: ^3.1.0 echarts-stat: ^1.2.0 + echarts-wordcloud: ^2.0.0 eslint: ^8.12.0 eslint-config-prettier: ^8.5.0 eslint-plugin-import: ^2.26.0 @@ -71,6 +72,7 @@ dependencies: crypto-js: 4.1.1 echarts-liquidfill: 3.1.0_echarts@5.3.3 echarts-stat: registry.npmmirror.com/echarts-stat/1.2.0 + echarts-wordcloud: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3 highlight.js: 11.5.1 html2canvas: 1.4.1 keymaster: 1.6.2 @@ -5396,6 +5398,17 @@ packages: version: 1.2.0 dev: false + registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3: + resolution: {integrity: sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz} + id: registry.npmmirror.com/echarts-wordcloud/2.0.0 + name: echarts-wordcloud + version: 2.0.0 + peerDependencies: + echarts: ^5.0.1 + dependencies: + echarts: 5.3.3 + dev: false + registry.npmmirror.com/esbuild-android-64/0.14.43: resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.43.tgz} name: esbuild-android-64 diff --git a/src/packages/components/Informations/Mores/TextCloud/config.vue b/src/packages/components/Informations/Mores/TextCloud/config.vue deleted file mode 100644 index 44a7bc22..00000000 --- a/src/packages/components/Informations/Mores/TextCloud/config.vue +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/src/packages/components/Informations/Mores/TextCloud/index.vue b/src/packages/components/Informations/Mores/TextCloud/index.vue deleted file mode 100644 index a962fd67..00000000 --- a/src/packages/components/Informations/Mores/TextCloud/index.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/packages/components/Informations/Mores/WordCloud/config.ts b/src/packages/components/Informations/Mores/WordCloud/config.ts new file mode 100644 index 00000000..b21f89c4 --- /dev/null +++ b/src/packages/components/Informations/Mores/WordCloud/config.ts @@ -0,0 +1,95 @@ +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' +import { WordCloudConfig } from './index' +import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' +import dataJson from './data.json' + +export const includes = [] + +export const ShapeEnumList = [ + { label: '圆形', value: 'circle' }, + { label: '心形', value: 'cardioid' }, + { label: '钻石', value: 'diamond' }, + { label: '右三角形', value: 'triangle-forward' }, + { label: '三角形', value: 'triangle' }, + { label: '五边形', value: 'pentagon' }, + { label: '星星', value: 'star' } +] + +export const option = { + dataset: [...dataJson], + tooltip: {}, + series: [ + { + type: 'wordCloud', + + // “云”绘制的形状，可以是表示为回调函数，也可以是固定关键字。 + // 可用值有：circle|cardioid|diamond|triangle-forward|triangle|pentagon|star + shape: 'circle', + + // 白色区域将被排除在绘制文本之外的剪影图像。 + // 随着云的形状生长，形状选项将继续应用。 + // maskImage: maskImage, + + // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud + // Default to be put in the center and has 75% x 80% size. + left: 'center', + top: 'center', + width: '70%', + height: '80%', + right: null, + bottom: null, + + // 文本大小范围，默认 [12,60] + sizeRange: [12, 60], + + // 文本旋转范围和程度的步骤。 文本将通过旋转步骤45在[-90，90]中随机旋转 + rotationRange: [0, 0], + rotationStep: 45, + + // size of the grid in pixels for marking the availability of the canvas + // 网格大小越大，单词之间的差距就越大。 + gridSize: 8, + + // 设置为true，以允许单词在画布之外部分地绘制。允许绘制大于画布的大小 + drawOutOfBound: false, + + // If perform layout animation. + // NOTE disable it will lead to UI blocking when there is lots of words. + layoutAnimation: true, + + // Global text style + textStyle: { + fontFamily: 'sans-serif', + fontWeight: 'bold' + // 颜色可以是回调功能或颜色字符串 + // color: function () { + // // 随机颜色 + // return ( + // 'rgb(' + + // [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join( + // ',' + // ) + + // ')' + // ) + // } + }, + emphasis: { + focus: 'self', + + textStyle: { + shadowBlur: 10, + shadowColor: '#333' + } + }, + data: [...dataJson] + } + ] +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = WordCloudConfig.key + public chartConfig = cloneDeep(WordCloudConfig) + // 图表配置项 + public option = echartOptionProfixHandle(option, includes) +} diff --git a/src/packages/components/Informations/Mores/WordCloud/config.vue b/src/packages/components/Informations/Mores/WordCloud/config.vue new file mode 100644 index 00000000..0f129120 --- /dev/null +++ b/src/packages/components/Informations/Mores/WordCloud/config.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/packages/components/Informations/Mores/WordCloud/data.json b/src/packages/components/Informations/Mores/WordCloud/data.json new file mode 100644 index 00000000..f0918723 --- /dev/null +++ b/src/packages/components/Informations/Mores/WordCloud/data.json @@ -0,0 +1,90 @@ +[ + { + "name": "数据可视化", + "value": 8000, + "textStyle": { + "color": "#78fbb2" + }, + "emphasis": { + "textStyle": { + "color": "red" + } + } + }, + { + "name": "GO VIEW", + "value": 6181 + }, + { + "name": "低代码", + "value": 4386 + }, + { + "name": "Vue3", + "value": 4055 + }, + { + "name": "TypeScript4", + "value": 2467 + }, + { + "name": "Vite2", + "value": 2244 + }, + { + "name": "NaiveUI", + "value": 1898 + }, + { + "name": "ECharts5", + "value": 1484 + }, + { + "name": "Axios", + "value": 1112 + }, + { + "name": "Pinia2", + "value": 965 + }, + { + "name": "PlopJS", + "value": 847 + }, + { + "name": "sfc", + "value": 582 + }, + { + "name": "SCSS", + "value": 555 + }, + { + "name": "pnpm", + "value": 550 + }, + { + "name": "eslint", + "value": 462 + }, + { + "name": "json", + "value": 366 + }, + { + "name": "图表", + "value": 360 + }, + { + "name": "地图", + "value": 282 + }, + { + "name": "时钟", + "value": 273 + }, + { + "name": "标题", + "value": 265 + } +] diff --git a/src/packages/components/Informations/Mores/TextCloud/index.ts b/src/packages/components/Informations/Mores/WordCloud/index.ts similarity index 61% rename from src/packages/components/Informations/Mores/TextCloud/index.ts rename to src/packages/components/Informations/Mores/WordCloud/index.ts index edc04d88..a8cfd789 100644 --- a/src/packages/components/Informations/Mores/TextCloud/index.ts +++ b/src/packages/components/Informations/Mores/WordCloud/index.ts @@ -1,11 +1,11 @@ import image from '@/assets/images/chart/informations/words_cloud.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' -import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' -export const TextCloudConfig: ConfigType = { - key: 'TextCloud', - chartKey: 'VTextCloud', - conKey: 'VCTextCloud', +export const WordCloudConfig: ConfigType = { + key: 'WordCloud', + chartKey: 'VWordCloud', + conKey: 'VCWordCloud', title: '词云', category: ChatCategoryEnum.MORE, categoryName: ChatCategoryEnumName.MORE, diff --git a/src/packages/components/Informations/Mores/WordCloud/index.vue b/src/packages/components/Informations/Mores/WordCloud/index.vue new file mode 100644 index 00000000..a483dce9 --- /dev/null +++ b/src/packages/components/Informations/Mores/WordCloud/index.vue @@ -0,0 +1,63 @@ + + + + diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts index eb12db36..661a8889 100644 --- a/src/packages/components/Informations/Mores/index.ts +++ b/src/packages/components/Informations/Mores/index.ts @@ -1,4 +1,4 @@ -import { TextCloudConfig } from './TextCloud/index' import { ImageConfig } from './Image/index' +import { WordCloudConfig } from './WordCloud/index' -export default [ImageConfig, TextCloudConfig] +export default [ImageConfig, WordCloudConfig] From 96384d7b397e2f6abaace8b515d6e350b165ad6b Mon Sep 17 00:00:00 2001 From: tnt group Date: Thu, 22 Sep 2022 09:01:19 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=20mock=20api?= =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=A7=88=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E4=B8=8B=E5=8A=A8=E6=80=81=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mock/index.ts | 6 +++ src/api/mock/test.mock.ts | 39 +++++++++++++++++++ .../Informations/Mores/WordCloud/index.vue | 15 +++++-- 3 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts index 413be00c..52f669b9 100644 --- a/src/api/mock/index.ts +++ b/src/api/mock/index.ts @@ -14,6 +14,7 @@ export const scrollBoardUrl = '/mock/scrollBoard' export const radarUrl = '/mock/radarData' export const heatMapUrl = '/mock/heatMapData' export const scatterBasicUrl = '/mock/scatterBasic' +export const wordCloudUrl = '/mock/wordCloud' const mockObject: MockMethod[] = [ { @@ -73,6 +74,11 @@ const mockObject: MockMethod[] = [ method: RequestHttpEnum.GET, response: () => test.fetchScatterBasic }, + { + url: wordCloudUrl, + method: RequestHttpEnum.GET, + response: () => test.fetchWordCloud + } ] export default mockObject diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts index b2a4079a..57e81564 100644 --- a/src/api/mock/test.mock.ts +++ b/src/api/mock/test.mock.ts @@ -198,5 +198,44 @@ export default { status: 200, msg: '请求成功', data: scatterJson + }, + // 词云 + fetchWordCloud: { + code: 0, + status: 200, + msg: '请求成功', + data: [ + { + name: '@name', + value: 8000, + textStyle: { + color: '#78fbb2' + }, + emphasis: { + textStyle: { + color: 'red' + } + } + }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' }, + { name: '@name', value: '@integer(10, 8000)' } + ] } } diff --git a/src/packages/components/Informations/Mores/WordCloud/index.vue b/src/packages/components/Informations/Mores/WordCloud/index.vue index a483dce9..902483dd 100644 --- a/src/packages/components/Informations/Mores/WordCloud/index.vue +++ b/src/packages/components/Informations/Mores/WordCloud/index.vue @@ -23,6 +23,7 @@ import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' +import dataJson from './data.json' const props = defineProps({ themeSetting: { @@ -47,17 +48,25 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) +const dataSetHandle = (dataset: typeof dataJson) => { + // eslint-disable-next-line vue/no-mutating-props + dataset && (props.chartConfig.option.series[0].data = dataset) + + vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option) +} + // dataset 无法变更条数的补丁 watch( () => props.chartConfig.option.dataset, newData => { - // eslint-disable-next-line vue/no-mutating-props - props.chartConfig.option.series[0].data = newData + dataSetHandle(newData) }, { deep: false } ) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => { + dataSetHandle(newData) +}) From 3ac03973fbb1ca46eabd0f1c1bf0dad7ea014f9d Mon Sep 17 00:00:00 2001 From: tnt group Date: Thu, 22 Sep 2022 09:20:36 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=B1=9E=E6=80=A7=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Informations/Mores/WordCloud/config.vue | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/packages/components/Informations/Mores/WordCloud/config.vue b/src/packages/components/Informations/Mores/WordCloud/config.vue index 0f129120..3882657c 100644 --- a/src/packages/components/Informations/Mores/WordCloud/config.vue +++ b/src/packages/components/Informations/Mores/WordCloud/config.vue @@ -14,7 +14,7 @@ - + diff --git a/src/packages/components/Informations/Mores/WordCloud/index.vue b/src/packages/components/Informations/Mores/WordCloud/index.vue index 902483dd..7d29c8ef 100644 --- a/src/packages/components/Informations/Mores/WordCloud/index.vue +++ b/src/packages/components/Informations/Mores/WordCloud/index.vue @@ -1,4 +1,3 @@ -