| <!doctype html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>VChart Area Demo</title> |
|
|
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script> |
|
|
| <style> |
| |
| #chart { |
| width: 100%; |
| height: 520px; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| |
| <div id="chart"></div> |
|
|
| <script> |
| const spec = { |
| type: "area", |
| data: { |
| values: [ |
| { type: "Nail polish", country: "Africa", value: 4229 }, |
| { type: "Nail polish", country: "EU", value: 4376 }, |
| { type: "Nail polish", country: "China", value: 3054 }, |
| { type: "Nail polish", country: "USA", value: 12814 }, |
| { type: "Eyebrow pencil", country: "Africa", value: 3932 }, |
| { type: "Eyebrow pencil", country: "EU", value: 3987 }, |
| { type: "Eyebrow pencil", country: "China", value: 5067 }, |
| { type: "Eyebrow pencil", country: "USA", value: 13012 }, |
| { type: "Rouge", country: "Africa", value: 5221 }, |
| { type: "Rouge", country: "EU", value: 3574 }, |
| { type: "Rouge", country: "China", value: 7004 }, |
| { type: "Rouge", country: "USA", value: 11624 }, |
| { type: "Lipstick", country: "Africa", value: 9256 }, |
| { type: "Lipstick", country: "EU", value: 4376 }, |
| { type: "Lipstick", country: "China", value: 9054 }, |
| { type: "Lipstick", country: "USA", value: 8814 }, |
| { type: "Eyeshadows", country: "Africa", value: 3308 }, |
| { type: "Eyeshadows", country: "EU", value: 4572 }, |
| { type: "Eyeshadows", country: "China", value: 12043 }, |
| { type: "Eyeshadows", country: "USA", value: 12998 }, |
| { type: "Eyeliner", country: "Africa", value: 5432 }, |
| { type: "Eyeliner", country: "EU", value: 3417 }, |
| { type: "Eyeliner", country: "China", value: 15067 }, |
| { type: "Eyeliner", country: "USA", value: 12321 }, |
| { type: "Foundation", country: "Africa", value: 13701 }, |
| { type: "Foundation", country: "EU", value: 5231 }, |
| { type: "Foundation", country: "China", value: 10119 }, |
| { type: "Foundation", country: "USA", value: 10342 }, |
| { type: "Lip gloss", country: "Africa", value: 4008 }, |
| { type: "Lip gloss", country: "EU", value: 4572 }, |
| { type: "Lip gloss", country: "China", value: 12043 }, |
| { type: "Lip gloss", country: "USA", value: 22998 }, |
| { type: "Mascara", country: "Africa", value: 18712 }, |
| { type: "Mascara", country: "EU", value: 6134 }, |
| { type: "Mascara", country: "China", value: 10419 }, |
| { type: "Mascara", country: "USA", value: 11261 } |
| ] |
| }, |
| title: { |
| visible: true, |
| text: "Unstacked area chart of cosmetic products sales" |
| }, |
| stack: false, |
| xField: "type", |
| yField: "value", |
| seriesField: "country", |
| legends: [{ visible: true, position: "middle", orient: "bottom" }] |
| }; |
| |
| |
| const vchart = new VChart.default(spec, { dom: "chart" }); |
| vchart.renderSync(); |
| |
| |
| window.vchart = vchart; |
| </script> |
| </body> |
| </html> |
|
|
