Echarts实战案例代码(19)：利用visualMap视觉映射组件制作五色玫瑰工作进程图

var labelV = {
        position: "inner",
        fontSize: 8,
        align: "right",
        padding: 4,
    },
    option = {
        backgroundColor: '#102045',
        visualMap: {
            type: "piecewise",
            show: true,
            splitNumber: 5,
            /*不设置，自动调整*/
            pieces: [{
                    gte: 0,
                    lt: 20
                },
                {
                    gte: 20,
                    lt: 40
                },
                {
                    gte: 40,
                    lt: 60
                },
                {
                    gte: 60,
                    lt: 80
                },
                {
                    gte: 80,
                    lte: 100
                }
            ],
            inRange: {
                symbolSize: 30,
                symbol: 'circle',
                color: ['#ea0a0a', '#ff9505', '#fffb0f', '#0003ff', '#08fa10']
            },
            textStyle: {
                color: '#fff'
            },
            left: "3%",
            top: "5%"
        },
        series: [{
                type: 'pie',
                clockWise: false,
                radius: ["20%", "80%"],
                center: ['50%', '50%'],
                //startAngle: 0,
                roseType: 'area',
                data: [{
                        value: 100,
                        name: '杭州市',
                        label: {
                            normal: {
                                formatter: '{b}\n{c}亿元',
                                padding: 4,
                            },
                            textStyle: {
                              color: '#000'
                            },
                        },
                    },
                    {
                        value: 38,
                        name: '北京市',
                        label: labelV
                    },
                    {
                        value: 90,
                        name: '南京市',
                        label: labelV
                    },
                    {
                        value: 70,
                        name: '武汉市',
                        label: labelV
                    },
                    {
                        value: 65,
                        name: '广州市',
                        label: labelV
                    },
                    {
                        value: 18,
                        name: '上海市',
                        label: labelV
                    },
                    {
                        value: 55,
                        name: '济南市',
                        label: labelV
                    },
                    {
                        value: 50,
                        name: '测试',
                        label: labelV
                    },
                    {
                        value: 45,
                        name: '测试',
                        label: labelV
                    }
                ].sort(function (a, b) {
                    return b.value - a.value;
                })
            }
        ]
    };