| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <meta name="viewport" content="width=device-width,height=device-height">
|
| 6 | <title>多条折线图</title>
|
| 7 | <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
|
| 8 | </head>
|
| 9 | <body>
|
| 10 | <div id="mountNode"></div>
|
| 11 | <script>document.body.clientHeight;
|
| 12 | </script>
|
| 13 | <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.0-beta.6/dist/g2.min.js"></script>
|
| 14 | <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
|
| 15 | <script src="../build/interaction.js"></script>
|
| 16 | <script>
|
| 17 | Interaction.helper.bindInteraction(G2, G2.Chart);
|
| 18 | G2.registerInteraction('shape-select', Interaction.ShapeSelect);
|
| 19 | </script>
|
| 20 | <script>
|
| 21 | const data = [{
|
| 22 | year: '1951 年',
|
| 23 | sales: 38
|
| 24 | }, {
|
| 25 | year: '1952 年',
|
| 26 | sales: 52
|
| 27 | }, {
|
| 28 | year: '1956 年',
|
| 29 | sales: 61
|
| 30 | }, {
|
| 31 | year: '1957 年',
|
| 32 | sales: 145
|
| 33 | }, {
|
| 34 | year: '1958 年',
|
| 35 | sales: 48
|
| 36 | }, {
|
| 37 | year: '1959 年',
|
| 38 | sales: 38
|
| 39 | }, {
|
| 40 | year: '1960 年',
|
| 41 | sales: 38
|
| 42 | }, {
|
| 43 | year: '1962 年',
|
| 44 | sales: 38
|
| 45 | }];
|
| 46 | const chart = new G2.Chart({
|
| 47 | container: 'mountNode',
|
| 48 | forceFit: true,
|
| 49 | height: window.innerHeight
|
| 50 | });
|
| 51 |
|
| 52 | chart.source(data, {
|
| 53 | sales: {
|
| 54 | tickCount: 5
|
| 55 | }
|
| 56 | });
|
| 57 | chart.tooltip(false);
|
| 58 | chart.interval().position('year*sales').active(false);
|
| 59 | chart.render();
|
| 60 |
|
| 61 | chart.interaction('shape-select', {
|
| 62 | selectStyle: {
|
| 63 | stroke: '#000',
|
| 64 | opacity: 1,
|
| 65 | lineWidth: 1
|
| 66 | }
|
| 67 | });
|
| 68 | </script>
|
| 69 | </body>
|
| 70 | </html>
|