127 lines
2.4 KiB
TypeScript
127 lines
2.4 KiB
TypeScript
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||
|
|
import { PieCircleCommenConfig } from './index'
|
||
|
|
import { CreateComponentType } from '@/packages/index.d'
|
||
|
|
import cloneDeep from 'lodash/cloneDeep'
|
||
|
|
import dataJson from './data.json'
|
||
|
|
export const includes = []
|
||
|
|
|
||
|
|
// dataJson:{
|
||
|
|
// "dimensions": ["name", "value"],
|
||
|
|
// "source": [
|
||
|
|
// {
|
||
|
|
// "name": "分类一",
|
||
|
|
// "value": 94
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// "name": "分类二",
|
||
|
|
// "value": 82
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// "name": "分类三",
|
||
|
|
// "value": 78
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// "name": "分类四",
|
||
|
|
// "value": 60
|
||
|
|
// }
|
||
|
|
// ]
|
||
|
|
// }
|
||
|
|
const otherConfig = {
|
||
|
|
// 轮播动画
|
||
|
|
isCarousel: false,
|
||
|
|
}
|
||
|
|
|
||
|
|
// ECharts配置
|
||
|
|
const option = {
|
||
|
|
...otherConfig,
|
||
|
|
color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
|
||
|
|
|
||
|
|
// 使用dataset关联数据
|
||
|
|
dataset: {
|
||
|
|
...dataJson
|
||
|
|
},
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b}: {c} ({d}%)'
|
||
|
|
},
|
||
|
|
|
||
|
|
title: {
|
||
|
|
// text: total, /
|
||
|
|
subtext: '总数',
|
||
|
|
left: '30%',
|
||
|
|
top: 'center',
|
||
|
|
textAlign: 'center',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 35,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
lineHeight: 40
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
color: '#ced4da',
|
||
|
|
fontSize: 15
|
||
|
|
},
|
||
|
|
itemGap: 1
|
||
|
|
},
|
||
|
|
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
orient: 'vertical',
|
||
|
|
left: '60%',
|
||
|
|
top: 'center',
|
||
|
|
itemGap: 15,
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 35,
|
||
|
|
formatter: (name: string) => name,
|
||
|
|
icon: 'roundRect',
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
title: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#ffffff',
|
||
|
|
align: 'left',
|
||
|
|
padding: [0, 0, 10, 10]
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#ced4da',
|
||
|
|
align: 'left',
|
||
|
|
padding: [0, 0, 0, 10]
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '总数',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['50%', '70%'],
|
||
|
|
center: ['30%', '50%'],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||
|
|
public key: string = PieCircleCommenConfig.key
|
||
|
|
|
||
|
|
public chartConfig = cloneDeep(PieCircleCommenConfig)
|
||
|
|
|
||
|
|
// 图表配置项
|
||
|
|
public option = echartOptionProfixHandle(option, includes)
|
||
|
|
}
|