效果图:
点击上去的效果:
代码可以借鉴:CSDN – echarts3d饼图,环形图
我这边就展示一下我修改的内容。
// 监听 mouseover,近似实现高亮(放大)效果
myChart.on('mouseover', (params) => {
....
this[optionName].series[params.seriesIndex].pieData.value + 30 //这个方法只改了这个数字
}
主要是修改charts.js 里内容,进文件夹直接搜 grid3D
grid3D: {
show: false,
left:-80,//设置 组件的视图离容器左侧的距离
boxHeight: boxHeight, // 圆环的高度
projection:'perspective',//投影方式,默认为透视投影'perspective'
viewControl: {
// 3d效果可以放大、旋转等,请自己去查看官方配置
alpha, // 角度
distance:160, // 调整视角到主体的距离,类似调整zoom
rotateSensitivity: 0, // 设置为0无法旋转
zoomSensitivity: 0, // 设置为0无法缩放
panSensitivity: 0, // 设置为0无法平移
autoRotate: false // 自动旋转
}
},
参考文章: 添加链接描述(我就是在这个基础上优化的)