Echarts在线免费图表

 
            var seriesData = [{
    name: "养猪（头）",
    value: "4923"
}, {
    name: "养鸡（只）",
    value: "20152"
}, {
    name: "养鱼（亩）",
    value: "362"
}, {
    name: "养牛（头）",
    value: "977"
}, {
    name: "养羊（只）",
    value: "253"
}];
var legendData1 = ["养猪（头）", "养鸡（只）", "养鱼（亩）", "养牛（头）",'养羊（只）']
var colorList = ['#5C7BD9', '#91CC75', '#FAC858', '#EE6666', '#9BBF30', '#E60000'];
var uploadedDataURL = "/asset/get/s/data-1600484669369-9Phqr8RSQ.png";
option = {
     backgroundColor: '#081736',
    // title: {
    //     text: '品种',
    //     x: '56%',
    //     y: 'center',
    //     textStyle: {
    //         fontSize:40,
    //         color: '#fff'
    //     }
    // },
    tooltip: {
        trigger: 'item',
        borderColor: 'rgba(255,255,255,.3)',
        backgroundColor: 'rgba(13,5,30,.6)',
        borderWidth: 1,
        padding: 5,
        formatter: function(parms) {
            var str = parms.marker + "" + parms.data.name + "</br>" +
                "数量：" + parms.data.value + "头</br>" +
                "占比：" + parms.percent + "%";
            return str;
        }
    },
    legend: [{
		itemWidth:15,
		itemHeight: 12,
        orient: 'vertical',
        // type: "scroll",
        // icon:'rectangle',
        align: 'left',
		top: '35%%',
		right:"10%",
        itemGap: 18,
        // bottom:'50%',
        textStyle: {
            fontSize:14,
            color: '#fff'
        },
        data: legendData1
    }],
    graphic: [
        {
            z:4,
            type: 'image',
            id: 'logo',
            left: '32%',
            top: '42%',
            z: -10,
            bounding: 'raw',
            rotation: 0 ,//旋转
            origin: [64.5, 32.5],//中心点
            scale: [1.0, 1.0],//缩放
            style: {
                image: uploadedDataURL,
                // width: 129,
                // height: 65,
                opacity: 1
            }
        }],
    series: [{
        type: 'pie',
        z: 3,
        center: ['40%', '45%'],
        radius: ['30%', '47%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
                // hr: {
                //     backgroundColor: 't',
                //     borderRadius: 3,
                //     width: 3,
                //     height: 3,
                //     padding: [3, 3, 0, -12]
                // },
                a: {
                    color:'#fff',
                    padding: [0, -40, 0, -40]
                }
            }
        },
        labelLine: {
            normal: {
                length: 4,
                length2: 50,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: seriesData
    }]
};