feat(图表): 国际化(基础折线图)

This commit is contained in:
jianneng-fit2cloud
2024-12-10 16:32:30 +08:00
parent edd868f6c7
commit d1073720e6
10 changed files with 63 additions and 28 deletions

View File

@@ -1869,7 +1869,16 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
chart_symbolic_map: 'Symbolic map',
chart_stock_line: 'K line',
liquid_condition_style_tips: `Condition style settings, determine water wave chart interval colors, leave blank to disable thresholds, range (0-100), incremental levels<br>Example: input 30,70; this means: divided into 3 segments, namely [0,30], [30,70], [70,100]`,
conversion_rate: 'Conversion rate'
conversion_rate: 'Conversion rate',
show_extremum: 'Show extremum',
left_axis: 'Left axis',
right_axis: 'Right axis',
no_other_configurable_properties: 'No other configurable properties',
custom_label_content_tip:
"Can read field values in the form of ${'{'}fieldName{'}'} (does not support line breaks) ",
number_of_scales_tip: 'Expected number of axis ticks, not the final result',
assist_line_settings: 'Auxiliary line settings',
invalid_field: 'Invalid field'
},
dataset: {
scope_edit: 'only effective when editing',

View File

@@ -1829,7 +1829,15 @@ export default {
chart_symbolic_map: '符號地圖',
chart_stock_line: 'K 線圖',
liquid_condition_style_tips: `條件樣式設定,決定水波圖區間顏色,為空則不啟用閾值,範圍(0-100),逐級遞增<br/>例如:輸入 30,70表示分為3段分別為[0,30],[30,70],[70,100]`,
conversion_rate: '轉換率'
conversion_rate: '轉換率',
show_extremum: '顯示極值',
left_axis: '左軸',
right_axis: '右軸',
no_other_configurable_properties: '無其他可配置屬性',
custom_label_content_tip: "可以使用 ${'{'}fieldName{'}'} 的形式讀取欄位值不支援換行",
number_of_scales_tip: '期望的座標軸刻度數量,非最終結果',
assist_line_settings: '輔助線設置',
invalid_field: '無效欄位'
},
dataset: {
scope_edit: '僅編輯時生效',

View File

@@ -1831,7 +1831,15 @@ export default {
chart_symbolic_map: '符号地图',
chart_stock_line: 'K 线图',
liquid_condition_style_tips: `条件样式设置,决定水波图颜色,为空则不开启阈值,范围(0-100),逐级递增<br/>例如:输入 30,70表示分为3段分别为[0,30],[30,70],[70,100]`,
conversion_rate: '转化率'
conversion_rate: '转化率',
show_extremum: '显示最值',
left_axis: '左轴',
right_axis: '右轴',
no_other_configurable_properties: '无其他可配置属性',
custom_label_content_tip: "可以${'{'}fieldName{'}'}的形式读取字段值不支持换行",
number_of_scales_tip: '期望的坐标轴刻度数量,非最终结果',
assist_line_settings: '辅助线设置',
invalid_field: '无效字段'
},
dataset: {
scope_edit: '仅编辑时生效',

View File

@@ -149,14 +149,16 @@ onMounted(() => {
<template>
<div @keydown.stop @keyup.stop class="assist-line-container">
<div class="inner-container">
<span class="label" :class="'label-' + props.themes">辅助线设置</span>
<span class="label" :class="'label-' + props.themes">{{
t('chart.assist_line_settings')
}}</span>
<span class="right-btns">
<span
class="set-text-info"
:class="{ 'set-text-info-dark': themes === 'dark' }"
v-if="state.assistLineCfg.assistLine.length > 0"
>
已设置
{{ t('visualization.already_setting') }}
</span>
<button
:class="'label-' + props.themes"
@@ -180,7 +182,7 @@ onMounted(() => {
<el-col :span="8" class="line-style">
<span :title="item.name">{{ item.name }}</span>
</el-col>
<el-col :span="6">
<el-col :span="6" class="line-style">
<span v-if="item.field === '0'" :title="t('chart.field_fixed')">{{
t('chart.field_fixed')
}}</span>
@@ -198,7 +200,7 @@ onMounted(() => {
</span>
</template>
<template v-else>
<span style="color: red">无效字段</span>
<span style="color: red">{{ t('chart.invalid_field') }}</span>
</template>
</el-col>
</el-row>
@@ -337,7 +339,6 @@ span {
.line-style {
width: 100%;
font-weight: 400;
padding: 4px 8px;
display: flex;
flex-direction: row;
align-items: center;

View File

@@ -41,7 +41,7 @@ const yAxisTypes = [
const state = reactive({
lineArr: [],
lineObj: {
name: '辅助线',
name: t('chart.assist_line'),
field: '0', // 固定值
fieldId: '',
summary: 'avg',

View File

@@ -257,7 +257,7 @@ onMounted(() => {
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
{{ t('chart.axis_value_split_count') }}
<el-tooltip class="item" :effect="toolTip" placement="top">
<template #content>期望的坐标轴刻度数量非最终结果</template>
<template #content>{{ t('chart.number_of_scales_tip') }}</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>

View File

@@ -12,7 +12,6 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import Icon from '../../../../../../components/icon-custom/src/Icon.vue'
import { iconFieldMap } from '@/components/icon-group/field-list'
import { parseJson } from '../../../js/util'
const { t } = useI18n()
@@ -129,8 +128,8 @@ const initSeriesLabel = () => {
}${
props.chart.type.includes('chart-mix')
? next.axisType === 'yAxis'
? '(左轴)'
: '(右轴)'
? `(${t('chart.left_axis')})`
: `(${t('chart.right_axis')})`
: ''
}` as string
const optionShowName: string = `${next.chartShowName ?? next.name}${
@@ -138,8 +137,8 @@ const initSeriesLabel = () => {
}${
props.chart.type.includes('chart-mix')
? next.axisType === 'yAxis'
? '(左轴)'
: '(右轴)'
? `(${t('chart.left_axis')})`
: `(${t('chart.right_axis')})`
: ''
}` as string
let tmp = {
@@ -417,7 +416,7 @@ watch(
{ deep: true }
)
watch(chartType, (value, oldValue) => {
watch(chartType, () => {
initPosition()
})
@@ -485,7 +484,9 @@ const isProgressBar = computed(() => {
:model="state.labelForm"
label-position="top"
>
<el-row v-show="showEmpty" style="margin-bottom: 12px"> 无其他可设置的属性</el-row>
<el-row v-show="showEmpty" style="margin-bottom: 12px">
{{ t('chart.no_other_configurable_properties') }}</el-row
>
<div>
<el-form-item v-if="noFullDisplay" class="form-item" :class="'form-item-' + themes">
<el-checkbox
@@ -597,7 +598,7 @@ const isProgressBar = computed(() => {
</span>
<el-tooltip class="item" :effect="toolTip" placement="bottom">
<template #content>
<div>可以${fieldName}的形式读取字段值不支持换行</div>
<div>{{ t('chart.custom_label_content_tip') }}</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -1156,7 +1157,7 @@ const isProgressBar = computed(() => {
v-model="curSeriesFormatter.show"
label="quota"
>
{{ t('chart.label') + t('chart.show') }}
{{ t('chart.show_label') }}
</el-checkbox>
</el-form-item>
@@ -1336,7 +1337,7 @@ const isProgressBar = computed(() => {
v-model="curSeriesFormatter.showExtremum"
label="quota"
>
{{ t('chart.show') }}最值
{{ t('chart.show_extremum') }}
</el-checkbox>
</el-form-item>
</template>
@@ -1350,7 +1351,7 @@ const isProgressBar = computed(() => {
v-model="state.labelForm.childrenShow"
label="quota"
>
{{ t('chart.label') + t('chart.show') }}
{{ t('chart.show_label') }}
</el-checkbox>
</el-form-item>
<div style="padding-left: 22px">
@@ -1543,7 +1544,7 @@ const isProgressBar = computed(() => {
v-model="state.labelForm.showExtremum"
label="quota"
>
{{ t('chart.show') }}最值
{{ t('chart.show_extremum') }}
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" v-show="showProperty('showGap')">
@@ -1566,13 +1567,17 @@ const isProgressBar = computed(() => {
@change="changeLabelAttr('conversionTag')"
v-model="state.labelForm.conversionTag.show"
>
转化率
{{ t('chart.conversion_rate') }}
</el-checkbox>
</el-form-item>
<div style="padding-left: 22px" v-if="showProperty('conversionTag')">
<el-row :gutter="8">
<el-col :span="12">
<el-form-item label="保留小数" class="form-item" :class="'form-item-' + themes">
<el-form-item
:label="t('chart.label_reserve_decimal_count')"
class="form-item"
:class="'form-item-' + themes"
>
<el-select
size="small"
style="width: 108px"
@@ -1591,7 +1596,11 @@ const isProgressBar = computed(() => {
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="转化率名称" class="form-item" :class="'form-item-' + themes">
<el-form-item
:label="t('chart.conversion_rate') + t('chart.name')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input
:effect="themes"
v-model="state.labelForm.conversionTag.text"

View File

@@ -215,7 +215,7 @@ onMounted(() => {
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
{{ t('chart.axis_value_split_count') }}
<el-tooltip class="item" :effect="toolTip" placement="top">
<template #content>期望的坐标轴刻度数量非最终结果</template>
<template #content>{{ t('chart.number_of_scales_tip') }}</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>

View File

@@ -274,7 +274,7 @@ onMounted(() => {
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
{{ t('chart.axis_value_split_count') }}
<el-tooltip class="item" :effect="toolTip" placement="top">
<template #content>期望的坐标轴刻度数量非最终结果</template>
<template #content>{{ t('chart.number_of_scales_tip') }}</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>

View File

@@ -242,7 +242,7 @@ onMounted(() => {
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
{{ t('chart.axis_value_split_count') }}
<el-tooltip class="item" :effect="toolTip" placement="top">
<template #content>期望的坐标轴刻度数量非最终结果</template>
<template #content>{{ t('chart.number_of_scales_tip') }}</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>