| <div id="chart" style="width:100%;height:520px;"></div> | |
| <script src="_deps/cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script> | |
| <script> | |
| // 这里粘贴你的那段 JS 代码 | |
| const spec = { | |
| type: 'bar', | |
| data: [ | |
| { | |
| id: 'barData', | |
| values: [ | |
| { | |
| State: 'WY', | |
| Age: 'Under 5 Years', | |
| Population: 25635 | |
| }, | |
| { | |
| State: 'WY', | |
| Age: '5 to 13 Years', | |
| Population: 1890 | |
| }, | |
| { | |
| State: 'WY', | |
| Age: '14 to 17 Years', | |
| Population: 9314 | |
| }, | |
| { | |
| State: 'DC', | |
| Age: 'Under 5 Years', | |
| Population: 30352 | |
| }, | |
| { | |
| State: 'DC', | |
| Age: '5 to 13 Years', | |
| Population: 20439 | |
| }, | |
| { | |
| State: 'DC', | |
| Age: '14 to 17 Years', | |
| Population: 10225 | |
| }, | |
| { | |
| State: 'VT', | |
| Age: 'Under 5 Years', | |
| Population: 38253 | |
| }, | |
| { | |
| State: 'VT', | |
| Age: '5 to 13 Years', | |
| Population: 42538 | |
| }, | |
| { | |
| State: 'VT', | |
| Age: '14 to 17 Years', | |
| Population: 15757 | |
| }, | |
| { | |
| State: 'ND', | |
| Age: 'Under 5 Years', | |
| Population: 51896 | |
| }, | |
| { | |
| State: 'ND', | |
| Age: '5 to 13 Years', | |
| Population: 67358 | |
| }, | |
| { | |
| State: 'ND', | |
| Age: '14 to 17 Years', | |
| Population: 18794 | |
| }, | |
| { | |
| State: 'AK', | |
| Age: 'Under 5 Years', | |
| Population: 72083 | |
| }, | |
| { | |
| State: 'AK', | |
| Age: '5 to 13 Years', | |
| Population: 85640 | |
| }, | |
| { | |
| State: 'AK', | |
| Age: '14 to 17 Years', | |
| Population: 22153 | |
| } | |
| ] | |
| } | |
| ], | |
| yField: 'State', | |
| xField: 'Population', | |
| seriesField: 'Age', | |
| direction: 'horizontal', | |
| stack: true, | |
| stackCornerRadius: 1000, | |
| percent: true, | |
| legends: { | |
| visible: true | |
| }, | |
| axes: [ | |
| { | |
| orient: 'top', | |
| label: { | |
| formatMethod: val => { | |
| return `${(val * 100).toFixed(2)}%`; | |
| } | |
| } | |
| } | |
| ] | |
| }; | |
| 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> | |