no message
parent
b385589724
commit
9dd0dba772
|
|
@ -28,46 +28,30 @@
|
|||
:stroke="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2}, 30
|
||||
20, 30 7, 50 7, ${50 + (height - 167) / 2}
|
||||
${(width - titleWidth) / 2}, 51
|
||||
20, 51 7, 50 7, ${50 + (height - 167) / 2}
|
||||
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
|
||||
7, ${140 + (height - 167) / 2} 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 - 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}, 30 ${(width - titleWidth) / 2 + 20}, 52
|
||||
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
|
||||
${(width - titleWidth) / 2}, 51 ${(width - titleWidth) / 2 + 20}, 82
|
||||
${(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
|
||||
:stroke="mergedColor[0]"
|
||||
:fill="fade(mergedColor[1], 30)"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
|
||||
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
|
||||
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
|
||||
${(width + titleWidth) / 2 - 4}, 51 ${(width + titleWidth) / 2 - 22}, 11
|
||||
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 5}, 51
|
||||
${(width - titleWidth) / 2 + 23}, 78 ${(width + titleWidth) / 2 - 22}, 78
|
||||
`"
|
||||
/>
|
||||
|
||||
|
|
@ -183,9 +167,9 @@
|
|||
ref="textRef"
|
||||
class="dv-border-box-11-title"
|
||||
:x="`${width / 2}`"
|
||||
y="32"
|
||||
fill="#ffffff"
|
||||
font-size="18"
|
||||
y="48"
|
||||
fill="#A8F4FF"
|
||||
font-size="48"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import BasicPieChartComponent, { componentName } from './config'
|
||||
|
||||
export default {
|
||||
componentName,
|
||||
component: () => import('./BasicPieChart.vue'),
|
||||
config: BasicPieChartComponent
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue