Skip to content

D
dataease
提交 5300ed1a authored 作者: junjie's avatar junjie
浏览文件
操作

feat:词云

上级 48280974
隐藏空白字符变更
内嵌 并排
正在显示 包含 90 行增加 和 6 行删除
frontend/src/icons/svg/word-cloud.svg 0 → 100644
浏览文件 @ 5300ed1a
<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>
frontend/src/lang/en.js
浏览文件 @ 5300ed1a
......@@ -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',
......
frontend/src/lang/tw.js
浏览文件 @ 5300ed1a
......@@ -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 頁，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ 5300ed1a
......@@ -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 页，默认抽取第一个',
......
frontend/src/views/chart/chart/waterfall/waterfall.js
浏览文件 @ 5300ed1a
......@@ -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
}
frontend/src/views/chart/chart/wordCloud/word_cloud.js 0 → 100644
浏览文件 @ 5300ed1a
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
}
frontend/src/views/chart/components/ChartComponentG2.vue
浏览文件 @ 5300ed1a
......@@ -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
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 5300ed1a
......@@ -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>
......
frontend/src/views/chart/view/ChartType.vue
浏览文件 @ 5300ed1a
......@@ -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'">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论