LiuXue
/
JinZHouXiYiJi_DaPin2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

main
LX 2024-02-20 15:58:26 +08:00
parent b385589724
commit 9dd0dba772
6 changed files with 321 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
resource/Border/BorderBox7/BorderBox.vue
View File

@ -28,46 +28,30 @@
:stroke="mergedColor[0]" :stroke="mergedColor[0]"
:filter="`url(#${filterId})`" :filter="`url(#${filterId})`"
:points="` :points="`
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2}, 51
20, 30 7, 50 7, ${50 + (height - 167) / 2} 20, 51 7, 50 7, ${50 + (height - 167) / 2}
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2} 13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
7, ${140 + (height - 167) / 2} 7, ${height - 27} 7, ${140 + (height - 167) / 2} 7, ${height - 27}
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27} 20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2} ${width - 7}, ${140 + (height + 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2} ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30 ${width - 7}, 50 ${width - 40}, 51 ${(width + titleWidth) / 2}, 51
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7 ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52 ${(width - titleWidth) / 2}, 51 ${(width - titleWidth) / 2 + 20}, 82
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30 ${(width + titleWidth) / 2 - 20}, 82 ${(width + titleWidth) / 2}, 51
`" `"
/> />
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
`"
/>
<polygon <polygon
:stroke="mergedColor[0]" :stroke="mergedColor[0]"
:fill="fade(mergedColor[1], 30)" :fill="fade(mergedColor[1], 30)"
:filter="`url(#${filterId})`" :filter="`url(#${filterId})`"
:points="` :points="`
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11 ${(width + titleWidth) / 2 - 4}, 51 ${(width + titleWidth) / 2 - 22}, 11
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23 ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 5}, 51
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49 ${(width - titleWidth) / 2 + 23}, 78 ${(width + titleWidth) / 2 - 22}, 78
`" `"
/> />
@ -183,9 +167,9 @@
ref="textRef" ref="textRef"
class="dv-border-box-11-title" class="dv-border-box-11-title"
:x="`${width / 2}`" :x="`${width / 2}`"
y="32" y="48"
fill="#ffffff" fill="#A8F4FF"
font-size="18" font-size="48"
text-anchor="middle" text-anchor="middle"
dominant-baseline="middle" dominant-baseline="middle"
> >

135
resource/echarts/PieChart2/BasicPieChart/BasicPieChart.vue 100644
View File

@ -0,0 +1,135 @@
<template>
<div ref="chartEl" v-resize="resizeHandler"></div>
</template>
<script setup lang="ts">
import type { EChartsOption, PieSeriesOption } from 'echarts'
import type { ResponseData } from 'open-data-v/base'
import { useData, useProp } from 'open-data-v/base'
import { onMounted, ref } from 'vue'
import { useEchart } from '../../hooks'
import { compareResetValue } from '../../utils'
import type BasicLineChartComponent from './config'
import type { BasicLineChart } from './type'
const chartEl = ref<ElRef>(null)
let globalOption: EChartsOption
const props = defineProps<{
component: BasicLineChartComponent
}>()
const { updateEchart, resizeHandler } = useEchart(chartEl)
let chartData:
| Array<{ label: string; value: number }>
| ResponseData<Array<{ label: string; value: number }>>['afterData'] = []
const dataChange = (resp: any, _?: string) => {
if (resp.status === 'SUCCESS') {
chartData = resp.afterData
updateData(chartData)
}
updateData(chartData)
}
useData(props.component, dataChange)
const propValueChange = () => {
updateData(chartData)
}
const { propValue } = useProp<BasicLineChart>(props.component, propValueChange)
onMounted(async () => {
globalOption = getOption()
updateEchart(globalOption)
})
const getOption = () => {
const option: EChartsOption = {
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
tooltip: {
trigger: 'item'
},
legend: {
show: propValue.legend.isShow,
top: '5%',
left: 'center'
},
series: []
}
let series: PieSeriesOption[] = [
{
type: 'pie',
radius: [`${propValue.series.radiusMin || 0}%`, `${propValue.series.radiusMax || 100}%`],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: propValue.series.borderRadius,
borderColor: 'transparent',
borderWidth: 10
},
label: {
show: true,
color: propValue.label.labelColor,
fontSize: propValue.label.labelSize,
alignTo: 'edge',
formatter: '{name|{b}}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 20,
color: '#999'
}
}
},
emphasis: {
label: {
show: propValue.label.isShow,
fontSize: propValue.label.labelSize,
fontWeight: propValue.label.labelWeight
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
show: true,
lineStyle: {
width : 2
}
},
data: []
}
]
option.series = series
return option as EChartsOption
}
const updateData = (resp: Array<{ label: string; value: number }>) => {
const upperLimit = propValue.data.upperLimit
const lowerLimit = propValue.data.lowerLimit
const data = resp.map((ele) => {
return {
value: compareResetValue(Number(ele.value), upperLimit, lowerLimit),
label: ele.label
}
})
globalOption = getOption()
globalOption.series![0].data = data.map((el) => {
return {
value: el.value,
name: el.label
}
})
updateEchart(globalOption)
}
</script>

144
resource/echarts/PieChart2/BasicPieChart/config.ts 100644
View File

@ -0,0 +1,144 @@
import type { MetaContainerItem } from 'open-data-v/base'
import { ComponentGroup, CustomComponent, DataMode, FormType } from 'open-data-v/base'
import { h } from 'vue'
export const componentName = 'BasicPieChart2'
class BasicPieChartComponent extends CustomComponent {
constructor(id?: string, name?: string, icon?: string) {
super({
component: componentName,
group: ComponentGroup.PIE,
name: name ? name : '基础饼状图2',
id,
width: 520,
height: 260,
icon,
dataMode: DataMode.UNIVERSAL
})
}
_prop: MetaContainerItem[] = [
{
label: '数据配置',
prop: 'data',
children: [
{
prop: 'upperLimit',
label: '上限',
type: FormType.NUMBER,
props: {
defaultValue: 150
}
},
{
prop: 'lowerLimit',
label: '下限',
type: FormType.NUMBER,
props: {
defaultValue: 0
}
}
]
},
{
label: '图例',
prop: 'legend',
children: [
{
prop: 'isShow',
label: '是否显示',
type: FormType.SWITCH,
props: {
defaultValue: true
}
}
]
},
{
label: '标签',
prop: 'label',
children: [
{
prop: 'isShow',
label: '是否显示',
type: FormType.SWITCH,
props: {
defaultValue: true
}
},
{
prop: 'labelColor',
label: '文字颜色',
type: FormType.COLOR,
props: {
defaultValue: '#00BAFF'
}
},
{
prop: 'labelSize',
label: '文字大小',
type: FormType.NUMBER,
props: {
defaultValue: 40
}
},
{
prop: 'labelWeight',
label: '文字宽度',
type: FormType.FONT_WEIGHT,
props: {
defaultValue: 400
}
}
]
},
{
label: '系列样式',
prop: 'series',
children: [
{
prop: 'radiusMin',
label: '半径下限',
type: FormType.NUMBER,
props: {
defaultValue: 40,
suffix: () => h('span', {}, '%')
}
},
{
prop: 'radiusMax',
label: '半径上限',
type: FormType.NUMBER,
props: {
defaultValue: 70,
suffix: () => h('span', {}, '%')
}
},
{
prop: 'borderRadius',
label: '边框半径',
type: FormType.NUMBER,
props: {
defaultValue: 10
}
}
]
}
]
_style: MetaContainerItem[] = []
get exampleData() {
return [
{ label: '秦', value: Math.round(Math.random() * 100) },
{ label: '齐', value: Math.round(Math.random() * 100) },
{ label: '楚', value: Math.round(Math.random() * 100) },
{ label: '赵', value: Math.round(Math.random() * 100) },
{ label: '燕', value: Math.round(Math.random() * 100) },
{ label: '韩', value: Math.round(Math.random() * 100) },
{ label: '魏', value: Math.round(Math.random() * 100) }
]
}
}
export default BasicPieChartComponent

7
resource/echarts/PieChart2/BasicPieChart/index.ts 100644
View File

@ -0,0 +1,7 @@
import BasicPieChartComponent, { componentName } from './config'
export default {
componentName,
component: () => import('./BasicPieChart.vue'),
config: BasicPieChartComponent
}

20
resource/echarts/PieChart2/BasicPieChart/type.ts 100644
View File

@ -0,0 +1,20 @@
export interface BasicLineChart {
data: {
upperLimit: number
lowerLimit: number
}
label: {
isShow: boolean
labelColor: string
labelSize: number
labelWeight: number
}
series: {
radiusMin: number
radiusMax: number
borderRadius: number
}
legend: {
isShow: boolean
}
}