Echarts在线免费图表

 
            
var dataList = [
    {
        value: 310,
        name: 'B轮',
    },
    {
        value: 234,
        name: 'C轮',
    },
    {
        value: 135,
        name: 'D轮',
    },
]
var color2 = [
    {
        color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: "#FC8053"
                },
                {
                    offset: 1,
                    color: "#F2CAA4"
                }
            ],
            global: false
        }
    },
    {
        color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: "#5583e7"
                },
                {
                    offset: 1,
                    color: "#36dddb"
                }
            ],
            global: false
        }
    },
    {
        color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: "#f888b1"
                },
                {
                    offset: 1,
                    color: "#fbe6ee"
                }
            ],
            global: false
        }
    },
]
var dataAll = 0
dataList.forEach((item, index) => {
    item.itemStyle = color2[index]
    dataAll += item.value
})


option = {
    backgroundColor: "#000",
    legend: {
        orient: 'vertical',  //垂直显示
        y: 'center',    //延Y轴居中
        x: 'right', //居右显示
        // selectedMode: 'multiple', 
        padding: [0, 150, 0, 0], //调节legend的位置
        data: ['A轮', 'B轮', 'C轮', 'D轮'],
        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        itemWidth: 10,  // 设置宽度
        itemHeight: 10, // 设置高度

        itemGap: 55, // 设置间距
        textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 16
        },
    },
    graphic: [
        {
            type: 'group',
            top: 'middle',
            left: 'center',
            id: 'data',
            children: [
                {
                    type: 'text',
                    id: 'current',
                    top: 40,
                    style: {
                        text: dataAll,
                        font: 'bolder 36px "Microsoft YaHei", sans-serif',
                        fill: '#fff',
                        textAlign: 'center'
                    }
                },
                {
                    type: 'text',
                    id: 'all',
                    top: 80,
                    style: {
                        text: '数量数量',
                        font: 'bolder 16px "Microsoft YaHei", sans-serif',
                        fill: '#fff',
                        textAlign: 'center'
                    }
                }
            ]
        }
    ],
    series: [
        {
            name: '轮次',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: (params) => {
                        console.log(params);
                        return '{color' + params.dataIndex + '| ' + params.percent + '%}'
                    },
                    rich: {
                        color0: {
                            fontSize: 18,
                            color: color2[0].color.colorStops[1].color,
                            fontWeight: 400,
                            fontFamily: 'PingFangSC'
                        },
                        color1: {
                            fontSize: 18,
                            color: color2[1].color.colorStops[1].color,
                            fontWeight: 400,
                            fontFamily: 'PingFangSC'
                        },
                        color2: {
                            fontSize: 18,
                            color: color2[2].color.colorStops[1].color,
                            fontWeight: 400,
                            fontFamily: 'PingFangSC'
                        }
                    }
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true,
                length: 48,
            },
            data: dataList
        }
    ]
};