| <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: 'pie',
|
| data: [
|
| {
|
| id: 'id0',
|
| values: [
|
| { type: 'oxygen', value: '46.60' },
|
| { type: 'silicon', value: '27.72' },
|
| { type: 'aluminum', value: '8.13' },
|
| { type: 'iron', value: '5' },
|
| { type: 'calcium', value: '3.63' },
|
| { type: 'sodium', value: '2.83' },
|
| { type: 'potassium', value: '2.59' },
|
| { type: 'others', value: '3.5' }
|
| ]
|
| }
|
| ],
|
| outerRadius: 0.8,
|
| valueField: 'value',
|
| categoryField: 'type',
|
| title: {
|
| visible: true,
|
| text: 'Statistics of Surface Element Content'
|
| },
|
| legends: {
|
| visible: true,
|
| orient: 'left'
|
| },
|
| label: {
|
| visible: true
|
| },
|
| tooltip: {
|
| mark: {
|
| content: [
|
| {
|
| key: datum => datum['type'],
|
| value: datum => datum['value'] + '%'
|
| }
|
| ]
|
| }
|
| }
|
| };
|
|
|
|
|
| const vchart = new VChart.default(spec, { dom: "chart" });
|
| vchart.renderSync();
|
|
|
|
|
| window['vchart'] = vchart;
|
|
|
| </script>
|
|
|