百度echart绘制圆环

来源：互联网发布：网络音柱怎么连接编辑：程序博客网时间：2024/04/30 13:37
效果图
一、代码封装

var pie = function (options) {    var option = {        backgroundColor: "#fff",        //不显示标题        title: {            show: false,            text: options.title,            textStyle: {                fontSize: 24 * iWidth / 720,                color: "#36383c",                fontWeight: "normal",                fontFamily: "Microsoft Yahei"            },            left: 20 * iWidth / 720,            top: 20 * iWidth / 720,        },        grid: {            top: 0 * iWidth / 720,            left: '50%',            right: '50%',            bottom: 45 * iWidth / 720        },        //鼠标放上去提示        // tooltip: {        //     trigger: 'item',        //     formatter: "{a} <br/>{b}: {c} ({d}%)"        // },        legend: {            orient: 'vertical',            left: 180 * iWidth / 720,            top: "middle",            icon: 'circle',            itemGap: 20 * iWidth / 720,            textStyle: {                fontSize: 16 * iWidth / 720,                color: "#91989e",                fontWeight: "normal",                fontFamily: "Microsoft Yahei"            },            //图例不能点击            selectedMode: false,            data: options.legendData        },        series: [            {                name: '访问来源',                type: 'pie',                center: ["28%", "50%"],                radius: [54 * iWidth / 720, 70 * iWidth / 720],                top: "50%",                avoidLabelOverlap: false,                label: {                    normal: {                        show: false,                        position: 'center'                    },                    //鼠标移上去中间显示文字                    emphasis: {                        show: false,                        textStyle: {                            fontSize: 30 * iWidth / 720,                            color: "#91989e",                            fontWeight: "normal",                            fontFamily: "Microsoft Yahei"                        }                    }                },                labelLine: {                    normal: {                        show: false                    }                },                data: [],            }        ]    };    //如果是大图设置样式    if(options.isBig){        option.legend.left = 300 * iWidth / 720;    }    //重组数据    (function () {        options.seriesData.map(function (item, index) {            option.series[0].data.push({                value: item.value,                name: item.name,                itemStyle: {                    normal: {                        color: colorGroup[index % colorGroupLen],                        //中间间隔                        borderColor: '#fff',                        borderType: 'solid',                        borderWidth: 5                    }                }            })        })    })();    return option;}
1 0