占比图数据选择展示
This commit is contained in:
jingna
parent
02b9b2f9a1
commit
3d9c54c38a
@ -384,6 +384,10 @@ declare interface ChartBasicStyle {
|
||||
* 占比图图形底色
|
||||
*/
|
||||
proportionBackgroundColor: string
|
||||
/**
|
||||
* 占比图图形展示选择
|
||||
*/
|
||||
proportionSelect:string
|
||||
}
|
||||
/**
|
||||
* 表头属性
|
||||
|
||||
@ -96,6 +96,10 @@ const props = defineProps({
|
||||
allFields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
allGraphcs:{
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
@ -279,6 +283,7 @@ watch(
|
||||
:property-inner="propertyInnerAll['basic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:allGraphcs = "props.allGraphcs"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
|
||||
@ -41,7 +41,10 @@ const props = defineProps({
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array<string>
|
||||
}
|
||||
},
|
||||
allGraphcs: {
|
||||
type: Object
|
||||
},
|
||||
})
|
||||
const showProperty = prop => {
|
||||
const has = props.propertyInner?.includes(prop)
|
||||
@ -369,6 +372,7 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<el-form size="small" style="width: 100%">
|
||||
@ -1483,7 +1487,6 @@ onMounted(() => {
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="alpha-setting" v-if="showProperty('radius')">
|
||||
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
||||
{{ t('chart.pie_outer_radius') }}
|
||||
@ -1520,6 +1523,23 @@ onMounted(() => {
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 占比图类别隐藏选择 -->
|
||||
<div v-if="showProperty('proportionSelect')"
|
||||
style="margin-bottom:5px;color:#A6A6A6;font-size:12px;">展示数据切换</div>
|
||||
<div class="alpha-setting" v-if="showProperty('proportionSelect')">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.basicStyleForm.proportionSelect"
|
||||
@change="changeBasicStyle('proportionSelect')" clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in props.allGraphcs"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- pie/rose end -->
|
||||
<!-- circle-packing start -->
|
||||
<div v-if="showProperty('circleBorderStyle')">
|
||||
|
||||
@ -63,7 +63,7 @@ import chartViewManager from '@/views/chart/components/js/panel'
|
||||
import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
|
||||
import { useDraggable } from '@vueuse/core'
|
||||
import { PluginComponent } from '@/components/plugin'
|
||||
import { Field, getFieldByDQ, copyChartField, deleteChartField } from '@/api/chart'
|
||||
import { Field, getFieldByDQ, copyChartField, deleteChartField, getData } from '@/api/chart'
|
||||
import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
import { useEmbedded } from '@/store/modules/embedded'
|
||||
@ -983,7 +983,7 @@ const calcData = (view, resetDrill = false, updateQuery = '') => {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//更新图表数据
|
||||
const updateChartData = view => {
|
||||
curComponent.value['state'] = 'ready'
|
||||
useEmitt().emitter.emit('checkShowEmpty', { allFields: allFields.value, view: view })
|
||||
@ -2056,6 +2056,15 @@ const deleteChartFieldItem = id => {
|
||||
fieldLoading.value = false
|
||||
})
|
||||
}
|
||||
const allGraphcs:any = ref([])
|
||||
const tabchange = (val: any) => {
|
||||
if((val.props.label == '样式' || val.props.name == 'style') && view.value.type == 'pie-proportion'){
|
||||
getData(view.value).then(res => {
|
||||
console.log(res.data.data)
|
||||
allGraphcs.value = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -2141,7 +2150,7 @@ const deleteChartFieldItem = id => {
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }">
|
||||
<el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }" @tab-click="tabchange">
|
||||
<el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
|
||||
<el-container direction="vertical">
|
||||
<el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
|
||||
@ -2832,7 +2841,7 @@ const deleteChartFieldItem = id => {
|
||||
:common-background-pop="curComponent?.commonBackground"
|
||||
:common-border-pop="curComponent?.style" :event-info="curComponent?.events" :chart="view"
|
||||
:themes="themes" :dimension-data="state.dimension" :quota-data="state.quota"
|
||||
:all-fields="allFields" @onColorChange="onColorChange" @onMiscChange="onMiscChange"
|
||||
:all-fields="allFields" :all-graphcs="allGraphcs" @onColorChange="onColorChange" @onMiscChange="onMiscChange"
|
||||
@onLabelChange="onLabelChange" @onTooltipChange="onTooltipChange"
|
||||
@onChangeXAxisForm="onChangeXAxisForm" @onChangeYAxisForm="onChangeYAxisForm"
|
||||
@onChangeYAxisExtForm="onChangeYAxisExtForm" @onTextChange="onTextChange"
|
||||
|
||||
@ -1778,7 +1778,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
|
||||
circlePadding: 0,
|
||||
quotaPosition: 'col',
|
||||
quotaColLabel: t('dataset.value'),
|
||||
proportionBackgroundColor:'#ffffff'
|
||||
proportionBackgroundColor:'#ffffff',
|
||||
proportionSelect:''
|
||||
}
|
||||
|
||||
export const BASE_VIEW_CONFIG = {
|
||||
|
||||
@ -18,7 +18,6 @@ export class RichTextChartView extends AbstractChartView {
|
||||
threshold: ['tableThreshold'],
|
||||
'function-cfg': ['emptyDataStrategy']
|
||||
}
|
||||
debugger
|
||||
axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
|
||||
axisConfig: AxisConfig = {
|
||||
xAxis: {
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from '@/views/chart/components/js/util'
|
||||
import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
|
||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { cloneDeep,set } from 'lodash-es'
|
||||
import isEmpty from 'lodash-es/isEmpty'
|
||||
import {
|
||||
PIE_AXIS_CONFIG,
|
||||
@ -18,7 +18,6 @@ import {
|
||||
PIE_EDITOR_PROPERTY,
|
||||
PIE_EDITOR_PROPERTY_INNER
|
||||
} from "@/views/chart/components/js/panel/charts/pie/common";
|
||||
|
||||
/**
|
||||
* G2 Chart 封装器，支持统一销毁和渲染
|
||||
*/
|
||||
@ -63,7 +62,7 @@ export class G2Pie extends G2ChartView {
|
||||
] as any
|
||||
propertyInner: EditorPropertyInner = {
|
||||
...PIE_EDITOR_PROPERTY_INNER,
|
||||
'basic-style-selector': ['colors', 'alpha', 'radius','innerRadius', 'seriesColor','proportionBackgroundColor'],
|
||||
'basic-style-selector': ['colors', 'alpha', 'radius','innerRadius', 'seriesColor','proportionBackgroundColor','proportionSelect'],
|
||||
'tooltip-selector': [...PIE_EDITOR_PROPERTY_INNER['tooltip-selector']],
|
||||
|
||||
}
|
||||
@ -78,10 +77,20 @@ export class G2Pie extends G2ChartView {
|
||||
const customAttr = parseJson(chart.customAttr)
|
||||
const customStyle = parseJson(chart.customStyle)
|
||||
const innerRadius = customAttr.basicStyle.innerRadius ?? 60
|
||||
const data = cloneDeep(chart.data?.data || [])
|
||||
const initdata = cloneDeep(chart.data?.data || [])
|
||||
const colorList = customAttr.basicStyle.colors.map(i =>
|
||||
hexColorToRGBA(i, customAttr.basicStyle.alpha)
|
||||
)
|
||||
let templatedata = []
|
||||
if(customAttr.basicStyle.proportionSelect !== ''){
|
||||
initdata.forEach(item=>{
|
||||
if(item.name == customAttr.basicStyle.proportionSelect){
|
||||
templatedata.push(item)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
templatedata = initdata
|
||||
}
|
||||
const g2 = new Chart({
|
||||
container,
|
||||
autoFit: true
|
||||
@ -90,8 +99,15 @@ export class G2Pie extends G2ChartView {
|
||||
radius: customAttr.basicStyle.radius / 100,
|
||||
innerRadius: innerRadius / 100
|
||||
})
|
||||
|
||||
g2.data(data)
|
||||
let resdata = templatedata
|
||||
let numbertype = 'number'
|
||||
if(chart.yAxis[0].formatterCfg.type == 'percent'){
|
||||
numbertype = 'percent'
|
||||
resdata.forEach(item => {
|
||||
item.value = parseFloat((item.value * 100).toFixed(2));
|
||||
})
|
||||
}
|
||||
g2.data(resdata)
|
||||
g2.legend(false)
|
||||
const formatterMap = customAttr.tooltip.seriesTooltipFormatter
|
||||
?.filter(i => i.show)
|
||||
@ -100,7 +116,7 @@ export class G2Pie extends G2ChartView {
|
||||
return pre
|
||||
}, {}) as Record<string, SeriesFormatter>
|
||||
if(customAttr.tooltip.show == true){
|
||||
this.configTooltip(g2, customAttr, formatterMap);
|
||||
this.configTooltip(g2, customAttr, formatterMap,numbertype);
|
||||
}else{
|
||||
g2.tooltip(false)
|
||||
}
|
||||
@ -141,6 +157,19 @@ export class G2Pie extends G2ChartView {
|
||||
}else{
|
||||
colorval = colorList[0]
|
||||
}
|
||||
if (colorval.startsWith('#')) {
|
||||
colorval = hexColorToRGBA(colorval, customAttr.basicStyle.alpha)
|
||||
}
|
||||
if(customAttr.basicStyle.proportionBackgroundColor.startsWith('#')){
|
||||
customAttr.basicStyle.proportionBackgroundColor = hexColorToRGBA(customAttr.basicStyle.proportionBackgroundColor, customAttr.basicStyle.alpha)
|
||||
}
|
||||
|
||||
if(customAttr.basicStyle.proportionBackgroundColor.startsWith('rgb')){
|
||||
customAttr.basicStyle.proportionBackgroundColor = this.rgbToRgba(customAttr.basicStyle.proportionBackgroundColor,customAttr.basicStyle.alpha)
|
||||
}
|
||||
if(colorval.startsWith('rgb')){
|
||||
colorval = this.rgbToRgba(colorval,customAttr.basicStyle.alpha)
|
||||
}
|
||||
return name === '其他' ? customAttr.basicStyle.proportionBackgroundColor : colorval;
|
||||
})
|
||||
.style({
|
||||
@ -168,7 +197,7 @@ export class G2Pie extends G2ChartView {
|
||||
}else if(item.type == '值' && item.show == true){
|
||||
view.annotation().text({
|
||||
position: positionarr,
|
||||
content: data[0].value,
|
||||
content: chart.yAxis[0].formatterCfg.type == 'percent' ? data[0].value + '%' :data[0].value,
|
||||
style: {
|
||||
fontSize: item.fontSize,
|
||||
fill: item.fill,
|
||||
@ -196,7 +225,7 @@ export class G2Pie extends G2ChartView {
|
||||
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
|
||||
return setUpSingleDimensionSeriesColor(chart, data)
|
||||
}
|
||||
protected configTooltip(g2: Chart, customAttr: CustomAttr, formatterMap: Record<string, SeriesFormatter>){
|
||||
protected configTooltip(g2: Chart, customAttr: CustomAttr, formatterMap: Record<string, SeriesFormatter>,numbertype:any){
|
||||
// 类型断言，确保customAttr是ChartAttr类型
|
||||
const attr = customAttr as ChartAttr;
|
||||
|
||||
@ -235,7 +264,10 @@ export class G2Pie extends G2ChartView {
|
||||
tooltipItems.forEach(item => {
|
||||
const formatter = formatterMap[item.data.quotaList[0].id] ?? (data[0]?.data?.quotaList?.[0] || {})
|
||||
const originValue = parseFloat(item.value as string)
|
||||
const value = valueFormatter(originValue, formatter.formatterCfg)
|
||||
let value = valueFormatter(originValue, formatter.formatterCfg)
|
||||
if(numbertype == 'percent'){
|
||||
value = value + '%'
|
||||
}
|
||||
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
||||
tooltipContent += `
|
||||
<div style="display: flex; align-items: center;font-size:${attr.tooltip.fontSize + 'px'};">
|
||||
@ -269,4 +301,11 @@ export class G2Pie extends G2ChartView {
|
||||
}
|
||||
})
|
||||
}
|
||||
protected rgbToRgba(rgb, alpha) {
|
||||
// 提取 RGB 数值
|
||||
const [r, g, b] = rgb.match(/\d+/g).map(Number);
|
||||
|
||||
// 返回 RGBA 格式
|
||||
return `rgba(${r}, ${g}, ${b}, ${Number(alpha)/100})`;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user