echarts如果实现自由拖动和缩放大小?
网友回复
<!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"> <style> #draggable { width: 350px; height: 250px; padding: 0.5em; } </style> </head> <body> <div id="draggable" class="ui-widget-content"> </div> <script> var myChart; var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; $(function() { $("#draggable").draggable(); $('#draggable').resizable({ //'e'是east,允许拖动右侧边框的意思 resize: function(event, ui) { myChart.resize(); //由于我们调整的是#left的大小,当#left改变时,要同时改变#middle的大小 // $('#middle').width($('#content').width()-ui.size.width-$('#right').width()); } }); }); // 基于准备好的dom,初始化echarts实例 myChart = echarts.init(document.getElementById('draggable')); // 指定图表的配置项和数据 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option, true); </script> </body> </html>