forest-map-scream/src/api/data/LeftRoundChart.js

export default {
    mName : "LeftRoundChart123",
    edit : "Echarts",
    keys : {
        dataInterface:{
            _name:"数据接口配置",
            url:"接口连接",
            params:{
                _name:"请求参数",
                value:"接口参数名称(需有父级数据关联)"
            },
            dataSource:{
                _name:"数据源结构关联",
                SourceKey:"源数据结构",
                AimsKey:"目标数据结构",
                keyRelated:"集合键关联"
            }
        },
        config: {
            title: {
                text: "中心标题",
                subtext: "副标题"
            },
            legend: {
                data: {
                    _name: "图例列表",
                    name: "对应数据名称"
                }
            },
            series: {
                data: {
                    name: "名称",
                    value: "数据",
                    color: "颜色"
                }
            }
        }
    },
    option : {
        title: {
            x: '54%',
            y: '38%',
            textAlign:"center",
            textStyle: {
                fontWeight: 300,
                fontSize: 10,
                color: 'rgba(174, 220, 244, 1)',
                align:"center"
            },
            subtextStyle: {
                color:"rgba(174, 220, 244, 1)",
                fontSize:14,
                align:"center"
            }
        },
        legend: {
            left:"5%",
            right: "0%",
            top:"auto",
            bottom:"5%",
            itemHeight: 8,
            itemWidth: 16,
            itemGap: 10,
            textStyle: {
                fontSize: 12,
                color: '{c}'
            }
        },
        tooltip: {
            show: false
        },
        series: [
            {
                radius: [
                    '35%', '60%'
                ],
                center: [
                    '55%', '45%'
                ],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(68, 102, 244, 0.2)'
                    }
                },
                data: [
                    {
                        value: 1
                    }
                ]
            }, {
                radius: [
                    '28%', '35%'
                ],
                center: [
                    '55%', '45%'
                ],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(68, 102, 244, 0.2)'
                    }
                },
                data: [
                    {
                        value: 1
                    }
                ]
            }, {
                radius: [
                    '35%', "55%"
                ],
                center: [
                    '55%', '45%'
                ],
                type: 'pie',
                roseType: 'area',
                itemStyle: {
                    normal: {
                        color: params => params.data.color
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 4,
                        length2: 4
                    },
                    emphasis: {
                        show: true
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: "{d}%",
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    emphasis: {
                        show: true
                    }
                }
            }
        ]

    },
    data : {
        dataInterface:{
            url:"",
            params:[{
                value:"typeId"
            }],
            dataSource:[{
                SourceKey:"data.list",
                AimsKey:"data.config.legend.data",
                keyRelated:'name.name'
            },{
                SourceKey:"data.list",
                AimsKey:"data.config.series.2.data",
                keyRelated:'name.name|value.value|color.color'
            }],
        },
        config: {
            title: {
                text: '销售额(万元)',
                subtext:"8999"
            },
            legend: {
                data: [
                    {
                        name: '野谷米'
                    }
                ]
            },
            series: [
                null,
                null, {
                    data: [
                        {
                            value: 435,
                            name: '野谷米',
                            color: "rgba(76, 132, 255, 1)"
                        }
                    ]
                }
            ]
        }
    }
}