Echarts在线免费图表

 
            var t3 = {
    color: '#eef',
    fontSize: 16,
    fontFamily: 'pingfang sc, microsoft yahei',
};

var gradList = [
    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        {
            offset: 0.2,
            color: '#25e7df00',
        },
        {
            offset: 0.8,
            color: '#25e7df',
        },
    ]),

    new echarts.graphic.LinearGradient(1, 0, 0, 1, [
        {
            offset: 0.2,
            color: '#25e7df00',
        },
        {
            offset: 0.8,
            color: '#25e7df',
        },
    ]),

    new echarts.graphic.LinearGradient(1, 1, 0, 0, [
        {
            offset: 0.4,
            color: '#25e7df00',
        },
        {
            offset: 0.8,
            color: '#25e7df',
        },
    ]),
];

option = {
    backgroundColor: '#071347',
    grid: {
        left: '10%',
        right: '20%',
        bottom: '10%',
        top: '10%',
        containLabel: true,
    },
    tooltip: {
        // confine: true,
        // borderWidth: 0,
        padding: [15, 20],
        backgroundColor: '#071347',
        textStyle: t3,
        formatter: '{b}:{d}%',
    },
    legend: {
        data: ['指标1', '指标2', '指标3'],
        right: 20,
        bottom: 20,
        orient: 'vertical',
        icon: 'circle',
        textStyle: {
            color: '#fff',
            fontFamily: 'pingfang sc, microsoft yahei',
        },
    },
    series: [
        //外环
        {
            name: "外环",
            type: 'pie',
            silent: true,
            clockwise: true,
            radius: ['70%', '71%'],
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                color: '#223755',
            },
            data: [0]
        },
        // core
        {
            name: '需求类型占比',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            itemStyle: {
                normal: {
                    color: function (params) {
                        return gradList[params.dataIndex];
                    }
                },
            },
            label: {
                normal: {
                    show: false,
                //     position: 'center',
                //     formatter: '{value|{c}}\n{label|{b}}',
                //     rich: {
                //         value: {
                //             padding: 5,
                //             align: 'center',
                //             verticalAlign: 'middle',
                //             fontSize: 48,
                //             fontFamily: 'electronicFont, impact, pingfang sc, microsoft yahei',
                //             color: '#fff',
                //         },
                //         label: {
                //             align: 'center',
                //             verticalAlign: 'middle',
                //             fontSize: 16,
                //             fontFamily: 'pingfang sc, microsoft yahei',
                //             color: '#9cf',
                //         },
                //     },
                },
                // emphasis: {
                //     show: true,
                //     textStyle: {
                //         fontSize: 12,
                //     },
                // },
            },
            labelLine: {
                show: false,
                length: 0,
                length2: 0,
            },
            data: [
                { name: '指标1', value: 33 },
                { name: '指标2', value: 33 },
                { name: '指标3', value: 33 },
            ],
        },
        //内环1
        {
            name: "外环",
            type: 'pie',
            silent: true,
            clockwise: true,
            radius: ['15%', '16%'],
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                color: '#223755',
            },
            data: [0]
        },
        //内环2
        {
            name: "外环",
            type: 'pie',
            silent: true,
            clockwise: true,
            radius: ['0%', '8%'],
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                color: '#223755',
            },
            data: [0]
        },
    ],
};