echart——圆角饼图

var trafficWay = [
    {
        name: '病假',
        value: 20,
    },
    {
        name: '事假',
        value: 10,
    },
    {
        name: '婚假',
        value: 30,
    },
    {
        name: '丧假',
        value: 40,
    },
    {
        name: '年休假',
        value: 40,
    },
    {
        name: '产假',
        value: 40,
    },
    {
        name: '调休',
        value: 40,
    },
    {
        name: '陪产假',
        value: 40,
    },
];

var data = [];
var color = ['#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#7b2cff', '#fd5151', '#f071ff', '#85f67a'];
for (var i = 0; i < trafficWay.length; i++) {
    data.push(
        {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 8,
                    shadowBlur: 20,
                    borderRadius: 20, // 圆角
                    borderColor: color[i],
                    shadowColor: color[i],
                },
            },
        },
        {
            value: 8,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                },
            },
        }
    );
}
var seriesOption = [
    {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        center: ['50%', '50%'],
        itemStyle: {
            normal: {
                label: {
                    show: false,
                },
            },
        },
        data: data,
    },
];
option = {
    backgroundColor: '#0A2E5D',
    color: color,
    tooltip: {
        show: false,
    },
    toolbox: {
        show: false,
    },
    series: seriesOption,
};

/*********************** 饼图构造相关 ***********************/
// 饼图配色（自定义）
const chartColorList = ["#5470c6", "#91cc75", "#ffdc60", "#ee6666", "#73c0de"];
// 饼图测试数据
let testData = [
    {value: 1048, name: 'Search Engine'},
    {value: 735, name: 'Direct'},
    {value: 580, name: 'Email'},
    {value: 484, name: 'Union Ads'},
    {value: 300, name: 'Video Ads'}
];

// 由于这套饼图中除了“大饼”外的饼图构造非常相似（只有“大饼”高亮时显示中间的标签）
// 可以用一个数组存储其中不相同的配置，然后遍历配置数组自动生成所有serie
const pieSeriesSettings = [
    {
        name: '内部小饼', // 饼图名称
        radius: ['46%', '53%'], // 饼图内径/外径尺寸
        opacity: 0.56, // 普通状态下的透明度
        empyOpacity: 0.6, // 高亮状态下的透明度
        scaleSize: 14, // 高亮状态下图形放大的尺寸
        isBorder: false // 是否是外圈（外圈只有一条数据，否则与“大饼”数据相同）
    },
    {
        name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
    },
    {
        name: '大饼阴影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    },
    {
        name: '大饼阴影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    },
    {
        name: '大饼阴影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    },
    {
        name: '大饼阴影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    },
    {
        name: '大饼阴影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    },
    {
        name: '大饼阴影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
    }
];

let serieList = [];
serieList.push({
    name: '大饼',
    z: 10, // 放在最上层
    type: 'pie',
    radius: ['56%', '63%'], // 通过设置内径与外径将饼图变为圆环饼图
    itemStyle: {
        borderRadius: 40 // 设置圆环的圆角弧度
    },
    emphasis: { // 设置高亮时显示标签
        label: {
            show: true
        },
        scale: true, // 设置高亮时放大图形
        scaleSize: 18
    },
    label: { // 设置图形标签样式
        show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
        position: 'center',
        // 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
        formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',
        // 为标签内容指定样式，只能设置series-pie.label支持的样式
        rich: {
            d_style: {
                fontSize: 80
            },
            per_style: {
                fontSize: 60
            },
            b_style: {
                fontSize: 42
            }
        }
    },
    data: testData
});

for (let pieSetting of pieSeriesSettings) {
    serieList.push({
        name: pieSetting.name,
        z: 1, // 放在最下层
        type: 'pie',
        radius: pieSetting.radius, // 通过设置内径与外径将饼图变为圆环饼图
        itemStyle: {
            color: pieSetting.isBorder ? '#fff' : null,
            borderRadius: 40, // 设置圆环的圆角弧度
            opacity: pieSetting.opacity // 设置普通状态下圆环的透明度
        },
        emphasis: { // 设置高亮时不显示标签
            disabled: pieSetting.isBorder, // 外圈需关闭高亮效果
            itemStyle: {
                opacity: pieSetting.empyOpacity // 设置高亮状态下圆环的透明度
            },
            label: {
                show: false
            },
            scale: !pieSetting.isBorder, // 外圈需关闭高亮放大效果
            scaleSize: pieSetting.scaleSize
        },
        label: { // 设置图形标签样式
            show: false // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
        },
        data: pieSetting.isBorder ? [{value: 1, name: 'border'}] : testData
    });
}

option = {
    backgroundColor: "#000002",
    color: chartColorList, // 设置饼图全局配色
    series: serieList
};
console.log(option); // 可以打印出具体的option便于理解其结构

/*********************** 饼图轮播相关 ***********************/
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
let changePieInterval = setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器

function highlightPie() { // 取消所有高亮并高亮当前图形
    for (let optIdx in option.series) {
        let opt = option.series[optIdx].data;
        if (opt.length < 2) // 外圈（只有一条数据）
            continue;

        // 遍历饼图数据，取消所有图形的高亮效果, 高亮当前图形
        for (let idx in opt)
            myChart.dispatchAction({
                type: idx != currentIndex ? 'downplay' : 'highlight',
                seriesIndex: optIdx,
                dataIndex: idx
            });
    }
}

myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
    clearInterval(changePieInterval);
    currentIndex = params.dataIndex;
    highlightPie();
});

myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
    if(changePieInterval)
        clearInterval(changePieInterval);
    changePieInterval = setInterval(selectPie, 1000);
});

function selectPie() { // 高亮效果切换到下一个图形
    var dataLen = testData.length;
    currentIndex = (currentIndex + 1) % dataLen;
    highlightPie();
}