| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/prettify/prettify.js"></script> |
| <script src="../common/showCode.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| <link rel="stylesheet" href="../common/prettify/prettify.css"> |
| <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script> |
| <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"> |
| </head> |
| <body> |
| |
| <div id="main"> |
| <pre class="prettyprint"> |
| // 屏幕上初始的点。 |
| var data = [ |
| [15, 0], [-50, 10], [-56.5, 20] |
| ]; |
| |
| // 首先初始化坐标系。 |
| chart.setOption({ |
| xAxis: ..., |
| yAxis: ..., |
| series: [{ |
| type: 'line', |
| data: data |
| }] |
| }); |
| |
| // 放置可以拖拽的圆点。 |
| chart.setOption({ |
| graphic: echarts.util.map(data, function (item, dataIndex) { |
| return { |
| type: 'circle', |
| // 从 data 转化为像素位置。 |
| position: myChart.convertToPixel('grid', item), |
| shape: { |
| cx: 0, |
| cy: 0, |
| r: symbolSize / 2 |
| }, |
| invisible: true, |
| draggable: true, |
| // 监听拖拽事件。 |
| ondrag: echarts.util.curry(onPointDragging, dataIndex), |
| ... |
| z: 100 |
| }; |
| }) |
| }); |
| |
| function onPointDragging(dataIndex, dx, dy) { |
| // 从像素位置转化为 data。 |
| data[dataIndex] = myChart.convertFromPixel('grid', this.position); |
| |
| // 更新 echarts。 |
| chart.setOption({ |
| series: [{ |
| data: data |
| }] |
| }); |
| } |
| |
| </pre> |
| <div id="chart"></div> |
| </div> |
| |
| |
| <script> |
| |
| var symbolSize = 20; |
| var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]]; |
| |
| option = { |
| backgroundColor: '#eee', |
| tooltip: { |
| triggerOn: 'none', |
| formatter: function (params) { |
| return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2); |
| } |
| }, |
| grid: { |
| top: 30, |
| left: 50, |
| right: 50, |
| bottom: 70 |
| }, |
| xAxis: { |
| min: -100, |
| max: 80, |
| type: 'value', |
| axisLine: {onZero: false} |
| }, |
| yAxis: { |
| min: -30, |
| max: 60, |
| type: 'value', |
| axisLine: {onZero: false} |
| }, |
| dataZoom: [ |
| { |
| type: 'slider', |
| xAxisIndex: 0, |
| height: 20, |
| filterMode: 'empty', |
| handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| handleSize: '100%' |
| }, |
| { |
| type: 'slider', |
| yAxisIndex: 0, |
| width: 20, |
| filterMode: 'empty', |
| handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| handleSize: '100%' |
| }, |
| { |
| type: 'inside', |
| xAxisIndex: 0, |
| filterMode: 'empty' |
| }, |
| { |
| type: 'inside', |
| yAxisIndex: 0, |
| filterMode: 'empty' |
| } |
| ], |
| series: [ |
| { |
| id: 'a', |
| type: 'line', |
| smooth: true, |
| symbolSize: symbolSize, |
| data: data |
| } |
| ] |
| }; |
| |
| var myChart = initShowCode(option, { |
| codeWidth: 650, |
| onResize: function () { |
| myChart.resize(); |
| updatePosition(); |
| } |
| }); |
| |
| myChart.on('dataZoom', updatePosition); |
| |
| // Add shadow circles (which is not visible) to enable drag. |
| myChart.setOption({ |
| graphic: echarts.util.map( |
| data, |
| function (item, dataIndex) { |
| return { |
| type: 'circle', |
| position: myChart.convertToPixel('grid', item), |
| shape: { |
| cx: 0, |
| cy: 0, |
| r: symbolSize / 2 |
| }, |
| invisible: true, |
| draggable: true, |
| ondrag: echarts.util.curry(onPointDragging, dataIndex), |
| onmousemove: echarts.util.curry(showTooltip, dataIndex), |
| onmouseout: echarts.util.curry(hideTooltip, dataIndex), |
| z: 100 |
| }; |
| } |
| ) |
| }); |
| |
| function updatePosition() { |
| myChart.setOption({ |
| graphic: echarts.util.map(data, function (item, dataIndex) { |
| return { |
| position: myChart.convertToPixel('grid', item) |
| }; |
| }) |
| }); |
| } |
| |
| function showTooltip(dataIndex) { |
| myChart.dispatchAction({ |
| type: 'showTip', |
| seriesIndex: 0, |
| dataIndex: dataIndex |
| }); |
| } |
| |
| function hideTooltip(dataIndex) { |
| myChart.dispatchAction({ |
| type: 'hideTip' |
| }); |
| } |
| |
| function onPointDragging(dataIndex, dx, dy) { |
| data[dataIndex] = myChart.convertFromPixel('grid', this.position); |
| |
| // Update data |
| myChart.setOption({ |
| series: [{ |
| id: 'a', |
| data: data |
| }] |
| }); |
| } |
| |
| </script> |
| </body> |
| </html> |
