var myChart = echarts.init(document.getElementById('left2_1'), 'vintage'); var names = ['早上', '上午', '下午', '晚上']; var values = [2, 2, 2, 2]; // 计算总数 var total = values.reduce((p, v) => { return p + v; }, 0); var colorList = [ "#e6923e", "#00f0ff", "#3ee679", "#f0422a", ]; var data = []; for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: values[i], }); } data.reverse(); // 公用调整 var itemStyle = { normal: { color: function (params) { return colorList[params.dataIndex]; }, }, }; var leftCenter = ['45%', '50%']; var radius1 = ['0', '35%']; // 饼图 var radius3 = ['40%', '41%']; // 线圈 // 公用调整-end option = { title: { text: '参训时间', bottom:35, left: 75, textStyle: { color: '#fff', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c}小时 ({d}%)", }, series: [ { name: "参训时间", type: 'pie', zlevel: 3, radius: radius1, center: leftCenter, // itemStyle: itemStyle, itemStyle: { normal: { color: function (params) { return colorList[params.dataIndex]; }, }, }, labelLine: { show: false, normal: { length: 5, length2: 0, lineStyle: { color: 'transparent', }, }, }, label: { normal: { formatter: (params) => { return '●'; }, textStyle: { color: '#00f0ff', fontSize: 12, }, }, }, data: data, }, { // 最外圆圈 type: 'pie', zlevel: 1, silent: true, //取消高亮 radius: radius3, center: leftCenter, itemStyle: { normal: { color: function (params) { return colorList[params.dataIndex]; }, }, }, labelLine: { show: false, normal: { length: 10, length2: 0, lineStyle: { color: 'transparent', }, }, }, label: { show: true, textStyle: { color: '#00f0ff', fontSize: 12, fontWeight:'bolder' }, }, data: data, }, ], }; myChart.setOption(option);