echarts社区饼图 echart饼图 玫瑰图

最新推荐文章于 2024-03-14 18:17:15 发布
最新推荐文章于 2024-03-14 18:17:15 发布
阅读量1.3k 收藏 7
点赞数
分类专栏： echarts 文章标签： echarts javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34200636/article/details/122956855
版权

目录

4圈饼图+会转动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZDAdvsI-1644975828825)(C:\Users\Q\AppData\Local\Temp\1642644053956.png)]

option = {
    backgroundColor: '#142468',
    title:{
          text: '旋转饼图及配色'  
    },
    series: [
        {
            type: 'pie',
            zlevel: 1,
            silent: true,
            /*
            radius
            饼图的半径。可以为如下类型：
            number：直接指定外半径值。
            string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
            Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
            */
            radius: ['97%', '98%'],
            hoverAnimation: false,
            //color: "rgba(88,142,197,0.5)",
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#9933FF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#00CCFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            // animation:false,    //charts3 no
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [1]
        },
        {
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['90%', '91%'],
            startAngle: 90,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#9933FF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#00CCFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: _pie2()
        },
        {
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['83%', '84%'],
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: _pie3()
        }, 
        {
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['78%', '80%'],
            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,0.9)"],
            startAngle: 50,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            label: {
                normal: {
                    show: false
                },
            },
            data: [1,2,3]
        }
    ]
};

function _pie1() {
    let dataArr = [];
    for (var i = 0; i < 8; i++) {

        dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
                normal: {
                    color: "rgba(88,142,197,0.4)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                }
            }
        })

    }
    return dataArr

}

function _pie2() {
    let dataArr = [];
    let _color = {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#9933FF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#00CCFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
    }
    for (var i = 0; i < 16; i++) {
        if (i % 4 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 50,
                itemStyle: {
                    normal: {
                        //color: "rgba(88,142,197,0.5)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }else if (i % 4 === 1) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 2,
                itemStyle: {
                    normal: {
                        color: "rgba(88,142,197,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else if (i % 4 === 2) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        //color: "rgba(88,142,197,0.2)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 2,
                itemStyle: {
                    normal: {
                        //color: "rgba(0,0,0,0)",
                        color: "rgba(88,142,197,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }

    }
    return dataArr

}

function _pie3() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: "rgb(126,190,255)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }

    }
    return dataArr

}

function _pieData(data) {
    let _data = data;
    let dataArr = [];
    for (var i = 0; i < 5; i++) {
        if (i === 2) {
            let dt = (data[0].unit) ? 25 : (Number(data[0].value));
            dataArr.push({
                name: (i + 1).toString(),
                value: dt,
                itemStyle: {
                    normal: {

                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                            offset: 0,
                            color: 'rgb(147,187,216)'
                        }, {
                            offset: 1,
                            color: '#588ec5'
                        }]),
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0.4)"

                    }
                }
            })
        } else {
            let dta = (data[0].unit) ? 25 : (1 - Number(data[0].value)) / 4;
            dataArr.push({
                name: (i + 1).toString(),
                value: dta,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }

    }
    //console.log(dataArr)
    return dataArr
}


//鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

myChart.on('mouseover', function(params) {
    stopTimer();
});

myChart.on('mouseout', function(params) {
    startTimer();
});


var timer;

function doing() {
    let option = myChart.getOption();
    option.series[1].startAngle = option.series[1].startAngle - 1;
    //option.series[2].startAngle = option.series[2].startAngle - 1;
    //option.series[6].data[0].value = option.series[6].data[0].value + 1;
    myChart.setOption(option);

}

function startTimer() {

    timer = setInterval(doing, 100);

}

function stopTimer() {

    clearInterval(timer);

    xzTimer = null;

}

setTimeout(startTimer, 500);
/*
window.onload = function() {
    setTimeout(startRotate, 500);
}
*/

在这里插入图片描述

玫瑰图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sQM3xLvY-1644975828825)(C:\Users\Q\AppData\Local\Temp\1642644127691.png)]

option = {
    backgroundColor: 'rgb(43, 51, 59)',
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    "tooltip": {
        "trigger": "item",
        "formatter": "{a}<br/>{b}:{c}千万元"
    },
    "title": {
        "text": "南丁格尔玫瑰图--PieHalfRose",
        "left": "center",
        "top": 20,
        "textStyle": {
            "color": "#ccc"
        }
    },
    "calculable": true,
    "legend": {
        "icon": "circle",
        "x": "center",
        "y": "15%",
        "data": [
            "义乌市1",
            "义乌市2",
            "义乌市3",
            "义乌市4",
            "义乌市5",
            "义乌市6",
            "义乌市7",
            "义乌市8",
            "义乌市9"
        ],
        "textStyle": {
            "color": "#fff"
        }
    },
    "series": [{
        "name": "XX线索",
        "type": "pie",
        "radius": [
            37,
            155
        ],
        "avoidLabelOverlap": false,
        "startAngle": 0,
        "center": [
            "50.1%",
            "34%"
        ],
        "roseType": "area",
        "selectedMode": "single",
        "label": {
            "normal": {
                "show": true,
                "formatter": "{c}千万元"
            },
            "emphasis": {
                "show": true
            }
        },
        "labelLine": {
            "normal": {
                "show": true,
                "smooth": false,
                "length": 20,
                "length2": 10
            },
            "emphasis": {
                "show": true
            }
        },
        "data": [{
                "value": 600.58,
                "name": "义乌市1",
                "itemStyle": {
                    "normal": {
                        "color": "#f845f1"
                    }
                }
            },
            {
                "value": 1100.58,
                "name": "义乌市2",
                "itemStyle": {
                    "normal": {
                        "color": "#ad46f3"
                    }
                }
            },
            {
                "value": 1200.58,
                "name": "义乌市3",
                "itemStyle": {
                    "normal": {
                        "color": "#5045f6"
                    }
                }
            },
            {
                "value": 1300.58,
                "name": "义乌市4",
                "itemStyle": {
                    "normal": {
                        "color": "#4777f5"
                    }
                }
            },
            {
                "value": 1400.58,
                "name": "义乌市5",
                "itemStyle": {
                    "normal": {
                        "color": "#44aff0"
                    }
                }
            },
            {
                "value": 1500.58,
                "name": "义乌市6",
                "itemStyle": {
                    "normal": {
                        "color": "#45dbf7"
                    }
                }
            },
            {
                "value": 1500.58,
                "name": "义乌市7",
                "itemStyle": {
                    "normal": {
                        "color": "#f6d54a"
                    }
                }
            },
            {
                "value": 1600.58,
                "name": "义乌市8",
                "itemStyle": {
                    "normal": {
                        "color": "#f69846"
                    }
                }
            },
            {
                "value": 1800,
                "name": "义乌市9",
                "itemStyle": {
                    "normal": {
                        "color": "#ff4343"
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            },
            {
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            }
        ]
    }]
};
男女饼图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kx8WIYMg-1644975828825)(C:\Users\Q\AppData\Local\Temp\1642644198258.png)]

// PS: 饼图非常吃数据，想要好看的饼图，必须有合格的数据支持

// mock 数据
const dataArray = [
    { name: '教师', num: 2000 },
    { name: '医生', num: 2000 },
    { name: '程序员', num: 2000 },
    { name: '公务员', num: 2000 },
    { name: '金融', num: 2000 },
    { name: '客服', num: 2000 },
    { name: '老板', num: 2000 },
    { name: '其他', num: 2000 },
]
const dataArr = [
    { name: '女', num: 50 },
    { name: '男', num: 50 }
]
// 计算总数
let total = dataArray.reduce((p,v) => { return p + v.num }, 0)

const colorList = [
    [{ offset: 0, color: 'rgba(173, 255, 248, 1)'},  { offset: 1, color: 'rgba(50, 255, 238, 1)'}],
    [{ offset: 0, color: 'rgba(177, 255, 237, 1)'},  { offset: 1, color: 'rgba(0, 233, 179, 1)'}],
    [{ offset: 0, color: 'rgba(178, 255, 191, 1)'},  { offset: 1, color: 'rgba(29, 246, 66, 1)'}],
    [{ offset: 0, color: 'rgba(248, 255, 163, 1)'},  { offset: 1, color: 'rgba(240, 255, 71, 1)'}],
    [{ offset: 0, color: 'rgba(255, 234, 149, 1)'},  { offset: 1, color: 'rgba(255, 213, 47, 1)'}],
    [{ offset: 0, color: 'rgba(255, 180, 145, 1)'},  { offset: 1, color: 'rgba(255, 126, 76, 1)'}],
    [{ offset: 0, color: 'rgba(255, 156, 150, 1)'},  { offset: 1, color: 'rgba(255, 96, 86, 1)'}],
    [{ offset: 0, color: 'rgba(178, 217, 255, 1)'},  { offset: 1, color: 'rgba(97, 187, 255, 1)'}],
]
const colorList2 = [
    [{ offset: 0, color: '#68d3ff'},  { offset: 1, color: '#bfecff'}],
    [{ offset: 0, color: '#ff938d'},  { offset: 1, color: '#ffdfdd'}],
]

const color = [ 'rgba(50, 255, 238, 1)', 'rgba(0, 233, 179, 1)', 'rgba(29, 246, 66, 1)', 'rgba(240, 255, 71, 1)', 'rgba(255, 213, 47, 1)', 'rgba(255, 126, 76, 1)', 'rgba(255, 96, 86, 1)', 'rgba(97, 187, 255, 1)', ]
const color2 = ['#00a7ec', '#ff564c']
// data数据
const echartData = dataArray.map((v, i) => ({
    name: v.name,
    value: v.num,
    itemStyle: { 
        color: { type: 'linear', colorStops: colorList[i] }
    },
    label: {
        color: color[i]
    }
}))

const totalData = dataArr.map((v, i) => ({
    name: v.name,
    value: v.num,
    itemStyle: { color: { type: 'linear', colorStops: colorList2[i] } },
    label: { color: color2[i] }
}))

// tooltip
const tooltip = {
    trigger: 'item',
    formatter: params => {
        return `
            <div>${params.data.name}: ${params.data.value}</div>
        `
    }
}

// series
const series = [{
    name: '性别比例',
    type: 'pie',
    center: ['50%', '50%'],
    radius: [0, '45%'],
    label: { 
        fontSize: 16,
        position: 'inner',
        formatter: params => {
            return `{${params.name === '男'? 'a': 'b'}|}\n\n${params.percent.toFixed(0)}%`
        },
        rich: {
            a: {
                width: 24,
                height: 34,
                backgroundColor: { image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAARCAYAAAGeOn00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTAxLTI2VDE0OjAxOjA3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMS0yNlQwNjowMTowNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMS0yNlQwNjowMTowNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzkzNDUzODc1N0MwMTFFQjg4MUFBREMzRTE4MjA1QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzkzNDUzODg1N0MwMTFFQjg4MUFBREMzRTE4MjA1QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOTM0NTM4NTU3QzAxMUVCODgxQUFEQzNFMTgyMDVCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTM0NTM4NjU3QzAxMUVCODgxQUFEQzNFMTgyMDVCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqz3FB4AAAFASURBVHjaYvwf5sMAAkxA7A7EvCxAYidIBCCAGIBSniDhOSBCGiCAGGEqQYAFSv8HEQABBJN5BsRSTFAZKZihN6DK/oM4v6CyjCCOHhAfBfEAAgjZaJAhkiAxZGteArEYkpUiIO3zgVifAQE+AXE6SEciVMAXiDcDMT+IAxBA6HYkA/F2mBthAGTxPHQ/MsBcAwMgHcIwX0HxS5jEGyDmQ7LnPRB7gIyqBuInSIEDsqsd5qr/SMaDAkyTCc1iP5AgunOPQD0IBgABhhI/aIEJAs9hkYLsDXSQAsQvgPgplM2AS4M3EH8A4q1ALAFKHlA2SMwHXcMiIN4CxHOB+CaSITehYpuhasAa7gFxDBDbQd2vjqRBHSpmC1VzGxSwSlBJkElJWPzUA5VjQvdDMjR8G5DEGqFiKfhCaRYSeya6JACa+kVE7jeZ3AAAAABJRU5ErkJggg=="},
            },
            b: {
                width: 24,
                height: 34,
                backgroundColor: { image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAAGTJA1zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTAxLTI2VDE0OjAxOjA3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMS0yNlQwNjowMTowNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMS0yNlQwNjowMTowNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzkzNDUzODM1N0MwMTFFQjg4MUFBREMzRTE4MjA1QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzkzNDUzODQ1N0MwMTFFQjg4MUFBREMzRTE4MjA1QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOTM0NTM4MTU3QzAxMUVCODgxQUFEQzNFMTgyMDVCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTM0NTM4MjU3QzAxMUVCODgxQUFEQzNFMTgyMDVCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkPD8hsAAAEYSURBVHjaYmRY/oYBBJiAOBaI/4MYi4GYESCAGIBSz0A8SRAhDBBAjDCVMNUgsAREAAQQTMYTJrodxGgBGQaT+g+TYgAIIGRj/gPxC5gFMAEQkADiDSDBdxCHgGkQMAIJCkE5eVBaDiCA4A4A4rlALIXsRJCAJMxGFigtxYAEQCp3QW2HYbA7/yMpagXiyyDtj4FYFuqkGiB+C9IuB/M5lBZmQtK6HT3UUAQBAgwlXIHgGZJ7nyM7FVk3CKRAQ+8plI0ROXZQ07ZCQ1Qayr4HxJYwhQJAvAeIPzBggh9AvA+IeZmg4cgKTSToACTGAcTzQJ5xAjK+APEpaFDCaHNoXJoBMQ8L1GgGtCCBKWSAasTwNUzhdnRBADYqQ0hfEuEBAAAAAElFTkSuQmCC' }
            }
        }
    },
    selectedMode: 'single',
    data: totalData, 
    
},{
    name: '从业人员统计',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    avoidLabelOverlap: false,
    label: {
        show: true,
        fontSize: 16,
        formatter: params => {
            let percent = (params.data.value / total) * 100
            return `${percent.toFixed(1)}%`
        }
    },
    labelLine: { show: true},
    data: echartData,
    emphasis:{ 
        labelLine: { itemStyle: { shadowColor: 'rgba(250,250,250,0.2)', shadowBlur: 20 }},
        label: { 
            fontSize: 24,
            formatter: params => {
                let percent = (params.data.value / total) * 100
                return `${percent.toFixed(1)}%\n{a|${params.data.name}}`
            },
            rich: {
                a: {
                    fontSize: 12,
                    align:'center'
                }
            }
        }
    }
}]

// 渲染
option = { tooltip, series, color, backgroundColor: 'rgba(0, 0, 0, .8)' }

demo来源echarts、Makepie社区

进击的企鹅呀
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现以下情况 改为true之后就不会重叠 代码如下 var option = { tooltip: { trigger: "item", formatter: "{a} <br>{b} : {c} ({d}%)" }, legend: { //orient: "vertical"
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
echarts - 鼠标事件详解
最新发布
kelly0721的博客
03-14 1484
echarts 鼠标点击事件
echarts饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个板块之间的空隙如何实现的文章就介绍到这了,更多相关echarts饼图板块的空隙内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
echarts 3d饼图资源
05-12
echarts 3d饼图资源
echarts 3D饼图组件
09-26
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" <PieChart3D values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />
十个html模板，词云图、动态图、统计图、玫瑰图、象形图、多渐变色柱状图、双色叠加象形图等多个图。直接用，不用再下载js包
04-15
十个html模板，词云图、动态图、统计图、玫瑰图、象形图、多渐变色柱状图、双色叠加象形图等多个图。直接用，不用再下载js包
2.Echart----绘制饼图
lazy_tomato的博客
04-15 7875
EChart 超级详细的饼图绘制逻辑，带你从零到有，一步一步学习EChart的绘制
ECharts常用图表 饼图
黑马程序员官方博客
12-08 6980
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~，表示外半径为可视区尺寸（容器高宽中较小一项）的 20%南丁格尔图指的是每一个扇形的半径随着数据的大小而不同。饼图可以很好地帮助用户快速了解不同分类的数据的。选 'single'：数组的第一项是内半径，第二项是外半径。下一篇：ECharts。组成的字典所形成的数组。，分别表示单选还是多选。可以将饼图设置为圆环图。是一个空空如也的对象。：直接指定外半径值。
echarts 饼图
热门推荐
weixin_43931625的博客
10-31 2万+
echarts 饼图
Echarts 饼图基本用法
qq_50148250的博客
08-05 8479
Echarts 饼图基本用法
echarts 3d饼图_玩转ECharts之实现“1/2圆的玫瑰图”
weixin_39763293的博客
11-29 628
前言玩转ECharts系列，主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表，接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些“小心机”。导读 阅读完此文，你会了解基于ECharts： 1、如何实现非全圆的饼图 2、如何实现非全圆的玫瑰图 3、如何实现扇区间有空隙的饼图背景在绘制饼图或玫瑰图时，你也许会遇到以下问题：1.容器为窄长矩...
echarts使用（一）
Todd的专栏
09-13 1610
项目中不少地方用到了图表来进行数据展示，所以系统的学习一下。 官网样例链接： http://echarts.baidu.com/echarts2/doc/example.html 导入一个简单的饼图： 项目需要jquery.js 和 echarts的类库。我是直接从我们项目中拷贝出来的类库，然后去官网找了一个饼图的样例。 项目结构： static---echarts
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
林太白
04-21 5029
echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
用echarts绘制饼图---绘制南丁格尔玫瑰图
dongdouzin的博客
06-16 3106
南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，它将柱图转化为更美观的饼图形式，是极坐标化的柱图，放大了数据之间差异的视觉效果，适用于对比数据原本差异小的数据。 在ECharts中绘制南丁格尔玫瑰图时，参数与标准饼图类似，但是南丁格尔玫瑰图有一个特殊的参数是roseType，称为南丁格尔玫瑰图模式，可以使用的值有两种：“radius”（半径）和“area”（面积）。 当使用半径模式时，以各个item的值作为扇形的半径，一般情况下，半径模式可能造成较大的失真；当使用面积模式时，以各个item的值作为扇形的面积，一般
【echarts】 饼图
qq_43806488的博客
11-29 1万+
基本配置 //1.初始化图表 let myCharts = echarts.init(document.getElementById('charts')) //2.准备数据 //饼图无需配置 xaxis 和 yaxis 数据是由 value name构成的数组 let data = [ { value: 11231, name: "淘宝", }, { value: 22673, name:
echarts画四分之一玫瑰图
qq_41952476的博客
01-25 540
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
Echarts之饼图
m0_55173487的博客
07-29 3305
Echarts之饼图 环形图大小、图例、延长线等配置
Echarts南丁格尔玫瑰图和Highcharts可变宽度的环形饼图
weixin_41967475的博客
02-02 5039
Echarts南丁格尔玫瑰图和Highcharts可变宽度的环形饼图 最近业务需要做一个环形饼图，当时就想着采用Echarts的南丁格尔玫瑰图方案，但是由于数据差距太大，实现效果不理想；然而网上也没有合适的解决方案，几经折腾，最后采用Highcharts的可变宽度的环形饼图方案，特写此博客为大家提供更多的思路。 设计狮的效果图 使用Echarts南丁格尔图的半径模式 采用Echarts方案我所实现的效果图： 下面是实现源码，为方便阅读，我未对“虚拟数据”进行提取 <div id="dataEc
echarts年龄饼图_ECharts中饼图的操作
06-02
在 ECharts 中绘制饼图需要以下步骤： 1. 引入 ECharts 的 JavaScript 文件。 2. 在 HTML 中创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息，如标题、提示框等。 5. 配置饼图的数据和样式，如饼图的半径、颜色、标签等。 下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码中，我们使用 ECharts 的 `init` 方法初始化了一个图表，并使用 `setOption` 方法配置了饼图的基本信息和数据。其中，`series` 属性中的 `type` 属性指定了图表类型为饼图，`data` 属性指定了饼图的数据，`itemStyle` 属性指定了饼图的样式。 需要注意的是，上述代码中的 ECharts 版本为 5.1.2，如果你使用的是其他版本的 ECharts，可能会有些许差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值