forked from github/dataease
feat:词云
This commit is contained in:
junjie
parent
482809747f
commit
5300ed1a7d
1
frontend/src/icons/svg/word-cloud.svg
Normal file
1
frontend/src/icons/svg/word-cloud.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1635820237435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" width="200" height="200"><path d="M881.371429 610.377143H785.066667v295.033905h101.814857c36.59581 2.779429 72.679619-10.410667 100.205714-36.571429 25.35619-30.841905 37.64419-71.68 33.913905-112.713143 2.82819-40.350476-11.142095-79.969524-38.107429-108.129524-26.965333-28.16-64.146286-41.935238-101.473524-37.619809z m-29.013334 66.072381h26.819048c48.201143 0 70.631619 26.575238 71.728762 80.847238 1.097143 54.296381-21.894095 84.382476-71.168 84.382476h-27.355429v-165.229714z m-437.930666-266.727619L191.073524 1019.928381h120.441905l54.735238-154.624h218.965333l54.759619 154.624h122.075429L533.211429 409.746286h-118.784z m59.123809 138.678857v11.215238s8.777143 23.015619 72.801524 201.825524h-147.260952c59.684571-167.594667 71.192381-198.875429 73.362285-203.580953l1.097143-9.459809zM199.826286 619.812571c-109.470476-6.485333-168.594286-74.361905-174.616381-201.825523 4.388571-133.948952 63.488-200.630857 174.08-208.286477 71.119238-2.608762 135.070476 46.470095 156.013714 119.783619l5.461333 17.115429-82.115047 23.015619-4.388572-15.36c-7.558095-37.64419-38.692571-64.316952-74.435047-63.707428-34.474667 0-83.21219 18.870857-88.673524 126.268952 3.82781 106.22781 54.735238 122.733714 89.234286 126.293333 43.008 0.975238 78.726095-35.669333 79.920762-82.041905l3.291428-17.700571 81.017905 25.356191-3.291429 14.774857c-11.337143 85.26019-83.090286 145.700571-162.596571 136.899047l1.097143-0.585143z m783.384381-240.152381c-2.876952-52.49219-34.54781-98.011429-80.457143-115.687619 37.571048-22.162286 60.269714-65.365333 58.563047-111.518476-4.388571-56.07619-36.132571-123.928381-164.230095-128.048762H597.820952v505.124572h214.064762c141.775238 0 171.324952-81.432381 171.324953-149.894095z m-103.472762-4.729904c0 31.865905-8.752762 69.022476-78.823619 69.022476h-106.203429v-128.633905h101.814857c71.728762 1.77981 82.115048 35.401143 83.772953 59.611429h-0.560762z m-91.428572-149.894096h-93.598476V112.90819h93.622857c65.145905 0 73.874286 30.110476 74.435048 51.931429 0.560762 21.845333-9.849905 60.196571-74.435048 60.196571z" p-id="862"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -946,7 +946,10 @@ export default {
|
||||
table_page_size: 'Page Size',
|
||||
table_page_size_unit: 'Item/Page',
|
||||
result_count: 'Result',
|
||||
result_mode_all: 'ALL'
|
||||
result_mode_all: 'ALL',
|
||||
chart_word_cloud: 'Word Cloud',
|
||||
drag_block_word_cloud_label: 'Word Label',
|
||||
drag_block_word_cloud_size: 'Word Size'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -947,7 +947,10 @@ export default {
|
||||
table_page_size: '分頁',
|
||||
table_page_size_unit: '條/頁',
|
||||
result_count: '結果展示',
|
||||
result_mode_all: '全部'
|
||||
result_mode_all: '全部',
|
||||
chart_word_cloud: '詞雲',
|
||||
drag_block_word_cloud_label: '詞標簽',
|
||||
drag_block_word_cloud_size: '詞大小'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
|
||||
|
||||
@ -950,7 +950,10 @@ export default {
|
||||
table_page_size: '分页',
|
||||
table_page_size_unit: '条/页',
|
||||
result_count: '结果展示',
|
||||
result_mode_all: '全部'
|
||||
result_mode_all: '全部',
|
||||
chart_word_cloud: '词云',
|
||||
drag_block_word_cloud_label: '词标签',
|
||||
drag_block_word_cloud_size: '词大小'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -103,5 +103,8 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
|
||||
}
|
||||
plot = new Waterfall(container, options)
|
||||
|
||||
plot.off('interval:click')
|
||||
plot.on('interval:click', action)
|
||||
|
||||
return plot
|
||||
}
|
||||
|
||||
62
frontend/src/views/chart/chart/wordCloud/word_cloud.js
Normal file
62
frontend/src/views/chart/chart/wordCloud/word_cloud.js
Normal file
@ -0,0 +1,62 @@
|
||||
import {
|
||||
getPadding,
|
||||
getTheme,
|
||||
getTooltip
|
||||
} from '@/views/chart/chart/common/common_antv'
|
||||
import { WordCloud } from '@antv/g2plot'
|
||||
|
||||
export function baseWordCloudOptionAntV(plot, container, chart, action) {
|
||||
// theme
|
||||
const theme = getTheme(chart)
|
||||
// attr
|
||||
const tooltip = getTooltip(chart)
|
||||
// data
|
||||
const data = chart.data.datas
|
||||
// options
|
||||
const options = {
|
||||
theme: theme,
|
||||
data: data,
|
||||
wordField: 'field',
|
||||
weightField: 'value',
|
||||
colorField: 'field',
|
||||
wordStyle: {
|
||||
fontFamily: 'Verdana',
|
||||
fontSize: [8, 32],
|
||||
rotation: [0, 0],
|
||||
padding: 6
|
||||
},
|
||||
random: () => 0.5,
|
||||
appendPadding: getPadding(chart),
|
||||
tooltip: tooltip,
|
||||
legend: false,
|
||||
interactions: [
|
||||
{
|
||||
type: 'element-active', cfg: {
|
||||
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
|
||||
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// size
|
||||
// let customAttr = {}
|
||||
// if (chart.customAttr) {
|
||||
// customAttr = JSON.parse(chart.customAttr)
|
||||
// if (customAttr.size) {
|
||||
// const s = JSON.parse(JSON.stringify(customAttr.size))
|
||||
// if (s.barDefault) {
|
||||
// delete options.marginRatio
|
||||
// } else {
|
||||
// options.marginRatio = s.barGap
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// 开始渲染
|
||||
if (plot) {
|
||||
plot.destroy()
|
||||
}
|
||||
plot = new WordCloud(container, options)
|
||||
|
||||
return plot
|
||||
}
|
||||
@ -23,6 +23,7 @@ import { baseFunnelOptionAntV } from '@/views/chart/chart/funnel/funnel_antv'
|
||||
import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
|
||||
import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
|
||||
import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
|
||||
import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponentG2',
|
||||
@ -161,6 +162,8 @@ export default {
|
||||
this.myChart = baseLiquid(this.myChart, this.chartId, chart)
|
||||
} else if (chart.type === 'waterfall') {
|
||||
this.myChart = baseWaterfallOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
||||
} else if (chart.type === 'word-cloud') {
|
||||
this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
||||
} else {
|
||||
if (this.myChart) {
|
||||
this.antVRenderStatus = false
|
||||
|
||||
@ -176,6 +176,7 @@
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
|
||||
/
|
||||
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'table-info'">{{ $t('chart.dimension_or_quota') }}</span>
|
||||
@ -211,6 +212,7 @@
|
||||
<span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
|
||||
/
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
</span>
|
||||
@ -334,7 +336,7 @@
|
||||
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'waterfall'" class="padding-lr" style="margin-top: 6px;">
|
||||
<el-row v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'" class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('chart.drill') }}</span>
|
||||
/
|
||||
@ -381,7 +383,7 @@
|
||||
<el-collapse-item name="color" :title="$t('chart.color')">
|
||||
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="chart.type !== 'map' && chart.type !== 'waterfall'" name="size" :title="$t('chart.size')">
|
||||
<el-collapse-item v-show="chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'" name="size" :title="$t('chart.size')">
|
||||
<size-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
<size-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
</el-collapse-item>
|
||||
|
||||
@ -103,13 +103,17 @@
|
||||
<svg-icon icon-class="treemap" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="word-cloud" label="word-cloud">
|
||||
<span :title="$t('chart.chart_word_cloud')">
|
||||
<svg-icon icon-class="word-cloud" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="liquid" label="liquid">
|
||||
<span :title="$t('chart.chart_liquid')">
|
||||
<svg-icon icon-class="liquid" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="chart.render && chart.render === 'echarts'">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user