**背景：**需求要求点击饼图，饼图右侧出现相应数据，然后对应饼图区块指向数据区块
效果：
思路：
利用饼图的series.startAngle属性，为正值时饼图逆时针旋转startAngle度，负值相反的原理，使饼图旋转到相应的位置。
1. 将要旋转的区块旋转到起始位置（以圆心作坐标轴的第四象限）
2. 再逆时针旋转自身的一半即可
// 传入数组data数据，以及要旋转的区块名
function getStartAngle(list = [], name = '') {
if (list.length && name) {
const findIndex = list.findIndex((item) => item.name === name);
let all = 0, left = 0, now = 0;
// all为总值
// left为在当前区块前的数据总值
// now为当前区块值
list.forEach((l, index) => {
if (index < findIndex) {
left += l.value
} else if (index === findIndex) {
now = l.value
}
all += l.value
})
if (all === 0) return 0
const a = 360 * left / all; // 当前区块前被占用的度数
const b = 360 * now / all; // 当前区块占用度数
return a + (b / 2);
// 逆时针旋转a，使当前区块到起始点
// 再旋转自身的1/2既结果
}
return 0
}
const data = [
{value: 335, name: '直达', selected: true},
{value: 679, name: '营销广告'},
{value: 1548, name: '搜索引擎'}
];
option = {
series: [
{
type: 'pie',
startAngle: getStartAngle(data, '直达'),
radius: ['0', '70%'],
center: ['50%', '50%'],
data: data,
label: {
position: 'inner'
},
labelLine: {
show: false
},
}
]
};
进阶 旋转到指定位置
我们可以利用getStartAngle方法旋转到指向右侧，然后再旋转到指定位置
