| <div id="chart" style="width:100%;height:520px;"></div> |
| <script src="https://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(); |
| vchart.on('dimensionClick', {}, params => { |
| console.log(params); |
| vchart.updateState({ |
| myCustomState: { |
| filter: datum => { |
| return datum.type === params.dimensionInfo[0]?.value; |
| } |
| } |
| }); |
| }); |
| |
| |
| window['vchart'] = vchart; |
| |
| </script> |
|
|
