|
|
@@ -103,11 +103,71 @@ Component({
|
|
|
data: data.map(v => {
|
|
|
return {
|
|
|
name: getMapText(v.type),
|
|
|
- value: (v.ratio * 100).toFixed(2)
|
|
|
+ value: (v.ratio * 100).toFixed(2),
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ '标准订单': '#5B8FF9',
|
|
|
+ '特殊订单': '#5AD8A6',
|
|
|
+ '促销订单': '#5D7092',
|
|
|
+ '项目订单': '#F6BD16',
|
|
|
+ '工具订单': '#6F5EF9',
|
|
|
+ '工具借用订单': '#6DC8EC'
|
|
|
+ }[v.type] || '#CCCCCC' // Default color if type is not matched
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
+ }),
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ formatter: '{b}: {c} ({d}%)',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ total: {
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#333'
|
|
|
+ },
|
|
|
+ desc: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ length: 10,
|
|
|
+ length2: 10
|
|
|
+ }
|
|
|
+ }
|
|
|
}]
|
|
|
};
|
|
|
+
|
|
|
+ // Add total in the center of the ring
|
|
|
+ option.graphic = {
|
|
|
+ type: 'text',
|
|
|
+ left: 'center',
|
|
|
+ top: '63%',
|
|
|
+ style: {
|
|
|
+ text: `${getMapText('总计')}\n\n${total}`,
|
|
|
+ textAlign: 'center',
|
|
|
+ fill: '#333',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ };
|
|
|
this.chartComponent = this.selectComponent('#mychart');
|
|
|
this.chartComponent.init((canvas, width, height, dpr) => {
|
|
|
const chart = echarts.init(canvas, null, {
|
