Echarts在线免费图表

 
            var colorList = ['#66DE69', '#CBD26D', '#0AE3F4', '#1483FF', '#a814ff', '#41CBAB', '#7BDD43', '#FFC653', '#FF6519', '#EE3939', '#FFAFDA', '#00FFFF'];
const colorArr = ['#66DE69', '#CBD26D', '#0AE3F4', '#1483FF', '#a814ff'];
const colorAlpha = ['#fff', '#fff', '#fff', '#fff', '#fff'];
var seriesdata1 = [
    {
        name: '玉米',
        value: 3200,
        percent: 5.01,
        itemStyle: {
            normal: {
                borderWidth: 5,
                borderColor: colorAlpha[0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: colorArr[0],
                    },
                    {
                        offset: 1,
                        color: colorAlpha[0],
                    },]),
            },
        },
    },
    {
        name: '土豆',
        value: 1400,
        percent: 5.12,
        itemStyle: {
            normal: {
                borderWidth: 5,
                borderColor: colorAlpha[1],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: colorArr[1],
                    },
                    {
                        offset: 1,
                        color: colorAlpha[1],
                    },]),
            },
        },
    },
    {
        name: '大豆',
        value: 3400,
        percent: 1.87,
        itemStyle: {
            normal: {
                borderWidth: 5,
                borderColor: colorAlpha[2],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: colorArr[2],
                    },
                    {
                        offset: 1,
                        color: colorAlpha[2],
                    },]),
            },
        },
    },
    {
        name: '番茄',
        value: 3400,
        percent: 1.87,
        itemStyle: {
            normal: {
                borderWidth: 5,
                borderColor: colorAlpha[2],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: colorArr[3],
                    },
                    {
                        offset: 1,
                        color: colorAlpha[3],
                    },]),
            },
        },
    },
    {
        name: '茄子',
        value: 3000,
        percent: 0.87,
        itemStyle: {
            normal: {
                borderWidth: 5,
                borderColor: colorAlpha[3],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: colorArr[4],
                    },
                    {
                        offset: 1,
                        color: colorAlpha[4],
                    },]),
            },
        },
    }];

var objData = array2obj(seriesdata1, 'name');



option = {
    backgroundColor: '#000',
    grid: {
        x: '30%',
        y: '3',
        x2: '5%',
        y2: '5%',
        borderWidth: 1,
        borderColor: '#f0f0f0',
    },
    title: [{
        text: '总种植面积',
        top: '32%',
        left: '34%',
        padding: [-15, 0, 0, -15],
        textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
        },
    }, {
        text: '11000',
        top: '35%',
        left: '35%',
        padding: [15, 0, 0, -20],
        textStyle: {
            color: '#fff',
            fontSize: 30,
            fontWeight: '400',
        },
    }],
    legend: {
        show: true,
        orient: 'horizontal',
        bottom: '10%',
        left: '10%',
        itemGap: 60,
        itemWidth: 10,
        itemHeight: 10,
        data: seriesdata1,
        formatter: function (name) {
            return '{a|' + name + '}{c|' + objData[name].value.toFixed(0) + 'm²}';
        },
        textStyle: {
            rich: {
                a: {
                    align: 'left',
                    fontSize: 24,
                    color: 'rgba(255,255,255,1)',
                    width: 40,
                    padding: [0, 0, 0, 10],
                },
                c: {
                    align: 'right',
                    fontSize: 24,
                    color: 'rgba(255,255,255,1)',
                    width: 30,
                    padding: [0, 0, 0, 160],
                },
            },
        },
    },
    series: {
        type: 'pie',
        center: ['38%', '35%'],
        radius: ['25%', '40%'],
        clockwise: true,
        //startAngle: 50,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            normal: {
                color: function (params) {
                    return colorList[params.dataIndex];
                },
            },
        },
        label: {
            show: true,
            position: 'outside',
            formatter: function (data) {
                //console.log('data',data)
                return (
                    '{name|' + data.name + ':' + '\n}' + ' \n{value|占比：' + data.percent.toFixed(0) + '%}'
                );
            },
            rich: {
                name: {
                    fontSize: 20,
                    color: '#ffffff',
                },
                value: {
                    fontSize: 20,
                    color: '#ffffff',
                },
            },
        },
        labelLine: {
            show: false,
            normal: {
                length: 15,
                length2: 40,
                align: 'right',
                lineStyle: {
                    width: 4,
                },
            },
        },
        data: seriesdata1,
        seriesIndex: 0,
    },
};

function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
    }
    return resObj;
}