echarts散点图默认选框,不用点击按钮再选框
直接上代码
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Basic Scatter Chart - Apache ECharts Demo</title> </head> <body> <div id="chart-container"></div> <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> </body> </html>
CSS
* { margin: 0; padding: 0; } #chart-container { position: relative; height: 100vh; overflow: hidden; }
JS
var dom = document.getElementById('chart-container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { xAxis: {}, yAxis: {}, //配置选框方式按钮 brush:{ toolbox:['rect', 'polygon', 'keep', 'clear','keep'] }, series: [ { symbolSize: 20, data: [ [10.0, 8.04], [8.07, 6.95], [13.0, 7.58], [9.05, 8.81], [11.0, 8.33], [14.0, 7.66], [13.4, 6.81], [10.0, 6.33], [14.0, 8.96], [12.5, 6.82], [9.15, 7.2], [11.5, 7.2], [3.03, 4.23], [12.2, 7.83], [2.02, 4.47], [1.05, 3.33], [4.05, 4.96], [6.03, 7.24], [12.0, 6.26], [12.0, 8.84], [7.08, 5.82], [5.02, 5.68] ], type: 'scatter' } ] }; if (option && typeof option === 'object') { myChart.setOption(option); //设置默认进页面就可以多个矩形框选 myChart.dispatchAction({ type: 'takeGlobalCursor', key: 'brush', brushOption: { brushType: 'rect', //选框类型 brushMode: 'multiple' //单选还是多选 } }); } window.addEventListener('resize', myChart.resize);
本文作者:来瓶冰镇可乐吧
本文链接:https://www.cnblogs.com/LTQ151/p/17861664.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通