echarts+Tweakpane动态改变echart属性和数据效果代码
代码语言:html
所属分类:选择器
代码描述:echarts+Tweakpane动态改变echart属性和数据效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.10.3.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweakpane.3.02.js"></script> <style> #draggable { width: 350px; height: 250px; padding: 0.5em; } </style> </head> <body> <div id="draggable" class="ui-widget-content"> </div> <script> const PARAMS = { title: "", color: '#342', }; const pane = new Tweakpane.Pane(); const input = pane.addInput(PARAMS, 'title'); const colorinput = pane.addInput(PARAMS, 'color'); colorinput.on('change', function(ev) { option.color = ev.value; myChart.setOption(option,); console.log(`change: ${ev.value}`); }); input.on('change', function(ev) { option.title.text = ev.value; myChart.setOption(option,); console.log(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0