213 lines
6.7 KiB
TypeScript
213 lines
6.7 KiB
TypeScript
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
|
import { PieCenterConfig } from './index'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import dataJson from './data.json'
|
|
|
|
export const includes = ['legend']
|
|
|
|
// 其它配置
|
|
const otherConfig = {
|
|
// 轮播动画
|
|
isCarousel: false,
|
|
}
|
|
|
|
const option = {
|
|
...otherConfig,
|
|
backgroundColor: 'transparent',
|
|
legend: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
left: '60%', // 默认更靠左一点，避免截断
|
|
top: 'center',
|
|
icon: 'rect',
|
|
showEmpty:false,
|
|
// itemWidth: 10,
|
|
itemHeight: 8,
|
|
itemGap: 5,
|
|
selectedMode: 'multiple',
|
|
// padding: [15, 20, 15, 20],
|
|
textStyle: {
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
fontSize: 16
|
|
},
|
|
formatter: function (name: string) {
|
|
return name
|
|
}
|
|
},
|
|
// color: ['rgba(255, 215, 0, 1)', 'rgba(74, 144, 226, 1)', 'rgba(80, 227, 194, 1)', 'rgba(126, 211, 33, 1)', 'rgba(144, 19, 254, 1)'],
|
|
dataset: { ...dataJson },
|
|
series: [
|
|
// 最外浅灰细边框
|
|
{
|
|
type: 'pie',
|
|
radius: ['84%', '86%'],
|
|
center: ['30%', '48%'],
|
|
silent: true,
|
|
z: 1,
|
|
data: [{ value: 1, name: '', itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(200, 200, 200, 0.01)' },
|
|
{ offset: 0.5, color: 'rgba(200, 200, 200, 0.1)' },
|
|
{ offset: 1, color: 'rgba(200, 200, 200, 0.01)' },
|
|
]
|
|
}
|
|
} }],
|
|
label: { show: false },
|
|
labelLine: { show: false }
|
|
},
|
|
// 中层蓝色细边框
|
|
{
|
|
type: 'pie',
|
|
radius: ['73%', '75%'],
|
|
center: ['30%', '48%'],
|
|
silent: true,
|
|
z: 2,
|
|
data: [{
|
|
value: 1, name: '', itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(58, 160, 255, 0.2)' },
|
|
{ offset: 1, color: 'rgba(58, 160, 255, 1)' },
|
|
]
|
|
}
|
|
}
|
|
}],
|
|
label: { show: false },
|
|
labelLine: { show: false }
|
|
},
|
|
// 内层（蓝->黑）渐变环：在外边框里面
|
|
{
|
|
type: 'pie',
|
|
radius: ['66%', '73%'],
|
|
center: ['30%', '48%'],
|
|
silent: true,
|
|
z: 3,
|
|
data: [
|
|
{
|
|
value: 1,
|
|
name: '',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(10, 21, 35, 0.3)' },
|
|
{ offset: 1, color: 'rgba(127, 216, 255, 0.3)' },
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
label: { show: false },
|
|
labelLine: { show: false }
|
|
},
|
|
// 主数据环：内半径加大，让"最内环更薄"
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '66%'], // 原 ['35%','65%'] -> 更薄的环
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 4, // 扇区间隙
|
|
z: 9,
|
|
itemStyle: {
|
|
borderColor: 'rgba(13, 16, 22, 1)', // 用深色细边强调间隙
|
|
borderWidth: 2,
|
|
borderRadius: 0
|
|
},
|
|
label: { show: false },
|
|
labelLine: { show: false },
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0, 0, 0, 0.35)' }
|
|
},
|
|
data: dataJson.source
|
|
},
|
|
// 内部渐变装饰环（在空洞边缘，提升质感）
|
|
{
|
|
type: 'pie',
|
|
radius: ['48%', '50%'], // 位于主环内侧
|
|
center: ['30%', '50%'],
|
|
silent: true,
|
|
z: 0,
|
|
data: [
|
|
{
|
|
value: 1,
|
|
name: '',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(90, 220, 255, 0.15)' },
|
|
{ offset: 1, color: 'rgba(90, 220, 255, 0.15)' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
label: { show: false },
|
|
labelLine: { show: false }
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['0%', '48%'], // 位于主环内侧
|
|
center: ['30%', '50%'],
|
|
// silent: true,
|
|
z: 10,
|
|
label: {
|
|
show: true,
|
|
position: 'center',
|
|
formatter: '{a|23211}\n\n{b|总数}',
|
|
rich: {
|
|
a: {
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
fontSize: 34,
|
|
align: 'center'
|
|
},
|
|
b: {
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
fontSize: 16,
|
|
align: 'center'
|
|
}
|
|
}
|
|
},
|
|
|
|
data: [
|
|
{
|
|
value: 1,
|
|
name: '',
|
|
itemStyle: {
|
|
color: 'transparent'
|
|
}
|
|
}
|
|
],
|
|
labelLine: { show: false }
|
|
}
|
|
],
|
|
}
|
|
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|
public key: string = PieCenterConfig.key
|
|
public chartConfig = cloneDeep(PieCenterConfig)
|
|
public option = echartOptionProfixHandle(option, includes)
|
|
} |