| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>VChart Area Demo</title> | |
| <!-- 1) 引入 VChart（CDN） --> | |
| <!-- 如果这个不通，再把它换成：https://unpkg.com/@visactor/vchart/build/index.min.js --> | |
| <script src="_deps/cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script> | |
| <style> | |
| /* 2) 给容器一个高度，不然你可能看不到图 */ | |
| #chart { | |
| width: 100%; | |
| height: 520px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 3) 图表容器：id 要和下面 JS 里的 dom 对上 --> | |
| <div id="chart"></div> | |
| <script> | |
| const spec = { | |
| type: 'bar', | |
| data: [ | |
| { | |
| id: 'barData', | |
| values: [ | |
| { month: 'Monday', sales: 22 }, | |
| { month: 'Tuesday', sales: 13 }, | |
| { month: 'Wednesday', sales: 25 }, | |
| { month: 'Thursday', sales: 29 }, | |
| { month: 'Friday', sales: 38 } | |
| ] | |
| } | |
| ], | |
| xField: 'month', | |
| yField: 'sales' | |
| }; | |
| const vchart = new VChart.default(spec, { dom: "chart" }); | |
| vchart.renderSync(); | |
| // Just for the convenience of console debugging, DO NOT COPY! | |
| window['vchart'] = vchart; | |
| // 只要记得：dom 要写成 "chart" | |
| </script> | |
| </body> | |
| </html> | |