Echarts在线免费图表

 
            option = {
   //你的代码
   title: {
            text: '性别分布',
            textStyle: {
                color: '#545B66',
                fontSize: 14,
                fontWeight: 350,
            },
        },
        legend: {
            data: ['女', '男', '未识别'],
            top: 'middle', left: '10%',
            orient: 'vertical',
            show: true,
            itemWidth: 8,
            itemHeight: 8,
            icon: 'roundRect', // 图例项的图标样式
        },
        tooltip: {
            show: true, // 鼠标放上去显示悬浮数据
            trigger: 'item',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            formatter: function (params) {
                return '消费（元）'
                + '<br>' + params.marker + params.name + '   ' + params.value;
            },
        },
        color: ['#ff8f85', '#4d79ff', '#d3d9e6'],
        xAxis: {
            data: ['', ''],
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#848b99',
                    fontSize: 12,
                },
            },
        },
        yAxis: {
            max: 100,
            splitLine: {
                show: false,
            },
            axisTick: {
                // 刻度线
                show: false,
            },
            axisLine: {
                // 轴线
                show: false,
            },
            axisLabel: {
                // 轴坐标文字
                show: false,
            },
        },
        graphic: [{
            type: 'line',
            shape: {
               x1: -45,
               y1: 20,
               x2: 20,
               y2: -45,
            },
            style: {
                fill: '#ebedf5',
                stroke: '#ebedf5',
                lineWidth: 1,
            },
            left: 'center',
            top: 'center',
            z: 10,
        }, {
            type: 'text',
            left: 305, // 调节这里更改位置
            top: 210, // 调节这里更改位置
            style: {
                fill: '#ff8f85',
                text: '28%',
                font: '20px Baidu Number',
            },
            z: 10,
        }, {
            type: 'text',
            left: 310, // 调节这里更改位置
            top: 240, // 调节这里更改位置
            style: {
                fill: '#848b99',
                text: '女性',
                font: '12px Baidu Number',
            },
            z: 10,
        }, {
            type: 'text',
            left: 355, // 调节这里更改位置
            top: 265, // 调节这里更改位置
            style: {
                fill: '#4371f1',
                text: '72%',
                font: '20px Baidu Number',
            },
            z: 10,
        }, {
            type: 'text',
            left: 360, // 调节这里更改位置
            top: 295, // 调节这里更改位置
            style: {
                fill: '#848b99',
                text: '男性',
                font: '12px Baidu Number',
            },
            z: 10,
        }],
        series: [
            {
                name: '男女比例',
                type: 'pie',
                radius: [65, 90],
                avoidLabelOverlap: false,
                itemStyle: {
                    // borderRadius: 5,
                },
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold',
                        },
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: [
{name: '女', value: 2506.14, key: 1},
{name: '男', value: 3335.51, key: 2},
{name: '未识别', value: 2974.13, key: 0}
],
            },
        ],
};