| <div id="chart" style="width:100%;height:520px;"></div>
|
| <script src="_deps/cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
|
| <script>
|
|
|
| const spec = {
|
| type: 'common',
|
| data: [
|
| {
|
| id: 'id0',
|
| values: [
|
| { type: '0~29', value: '126.04' },
|
| { type: '30~59', value: '128.77' },
|
| { type: '60 and over', value: '77.09' }
|
| ]
|
| },
|
| {
|
| id: 'id1',
|
| values: [
|
| { type: '0~9', value: '39.12' },
|
| { type: '10~19', value: '43.01' },
|
| { type: '20~29', value: '43.91' },
|
| { type: '30~39', value: '45.4' },
|
| { type: '40~49', value: '40.89' },
|
| { type: '50~59', value: '42.48' },
|
| { type: '60~69', value: '39.63' },
|
| { type: '70~79', value: '25.17' },
|
| { type: '80 and over', value: '12.29' }
|
| ]
|
| }
|
| ],
|
| series: [
|
| {
|
| type: 'pie',
|
| dataIndex: 0,
|
| outerRadius: 0.65,
|
| innerRadius: 0,
|
| valueField: 'value',
|
| categoryField: 'type',
|
| label: {
|
| position: 'inside',
|
| visible: true,
|
| style: {
|
| fill: 'white'
|
| }
|
| },
|
| pie: {
|
| style: {
|
| stroke: '#ffffff',
|
| lineWidth: 2
|
| }
|
| }
|
| },
|
| {
|
| type: 'pie',
|
| dataIndex: 1,
|
| outerRadius: 0.8,
|
| innerRadius: 0.67,
|
| valueField: 'value',
|
| categoryField: 'type',
|
| label: {
|
| visible: true
|
| },
|
| pie: {
|
| style: {
|
| stroke: '#ffffff',
|
| lineWidth: 2
|
| }
|
| }
|
| }
|
| ],
|
| color: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'],
|
| title: {
|
| visible: true,
|
| text: 'Population Distribution by Age in the United States, 2021 (in millions)',
|
| textStyle: {
|
| fontFamily: 'Times New Roman'
|
| }
|
| },
|
| legends: {
|
| visible: true,
|
| orient: 'left'
|
| }
|
| };
|
|
|
|
|
|
|
| const vchart = new VChart.default(spec, { dom: "chart" });
|
| vchart.renderSync();
|
|
|
|
|
| window['vchart'] = vchart;
|
|
|
| </script>
|
|
|
