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]