echarts3D环形图(包含点击效果)

这里写自定义目录标题

效果图:

在这里插入图片描述

点击上去的效果:

在这里插入图片描述

代码可以借鉴: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 // 自动旋转
	   }
 },

参考文章: 添加链接描述(我就是在这个基础上优化的)

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要创建echarts3D环形,你需要先安装echartsecharts-gl库。在你的Vue项目中,你可以通过以下方式引入echartsecharts-gl: ```javascript import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 引入echarts-gl库 Vue.prototype.$echarts = echarts ``` 接下来,你可以使用echarts的API来创建3D环形。具体的代码可以参考echarts的官方文档和示例。在创建环形时,你可以使用tooltip配置来实现鼠标经过弹框滚动效果。例如,你可以设置tooltip的enterable为true,以便在点击tips时滚动里面的内容,并通过extraCssText设置弹框的样式,如设置高度为20%: ```javascript tooltip: { enterable: true, extraCssText: "overflow:scroll;height:20%;", } ``` 这样就可以创建一个具有鼠标经过弹框滚动效果echarts 3D环形了。希望对你有帮助! #### 引用[.reference_title] - *1* [echarts3d环形包含透明效果)](https://blog.csdn.net/weixin_41326021/article/details/120195920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [3D圆环Echarts + 例滚动显示 + tooltip鼠标经过的弹框滚动显示](https://blog.csdn.net/weixin_45096939/article/details/128771023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值