30:T7b1,{ const energy = document.querySelector('#energy') const chart = echarts.init(energy) const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: EnergyTypes }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: Category }, series: [ { name: EnergyTypes[0], type: 'bar', stack: 'StackI', emphasis: { focus: 'series' }, data: DataPicker(0) }, { name: EnergyTypes[1], type: 'bar', stack: 'StackI', emphasis: { focus: 'series' }, data: DataPicker(1) }, { name: EnergyTypes[2], type: 'bar', stack: 'StackII', emphasis: { focus: 'series' }, data: DataPicker(2) }, { name: EnergyTypes[3], type: 'bar', stack: 'StackII', emphasis: { focus: 'series' }, data: DataPicker(3) }, { name: EnergyTypes[4], type: 'bar', stack: 'StackIII', emphasis: { focus: 'series' }, data: DataPicker(4) }, { name: EnergyTypes[5], type: 'bar', stack: 'StackIII', emphasis: { focus: 'series' }, data: DataPicker(5) }, { name: EnergyTypes[6], type: 'bar', stack: 'StackIV', emphasis: { focus: 'series' }, data: DataPicker(6) }, { name: EnergyTypes[7], type: 'bar', stack: 'StackIV', emphasis: { focus: 'series' }, data: DataPicker(7) } ] } chart.setOption(option) return md`### Landscape` }31:[{"id":"acb6d7c803c72660a524dba6f4370b1dc58e799cfaedf261fa37c5982aa8302a47f7639d1172746c4abcdd22ddc263ad5e62982eda651f3bd3a5cefb5b304a8d","href":"https://static.observableusercontent.com/files/acb6d7c803c72660a524dba6f4370b1dc58e799cfaedf261fa37c5982aa8302a47f7639d1172746c4abcdd22ddc263ad5e62982eda651f3bd3a5cefb5b304a8d","name":"202103.csv","type":"text/csv","lastModified":1618901900022.196,"size":8570}] 2e:{"title":"Renewable Energy","cells":[{"id":0,"value":"md`# Renewable Energy`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`## Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`### Debug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"async function energyCatogery() {\n let category = {}\n \n const content = await FileAttachment('202103.csv').csv()\n\n content.forEach(item => {\n const city = item[\"能源类型\"]\n\n if (category[city] === undefined) {\n category[city] = true\n }\n })\n\n return Object.keys(category)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`#### Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"energyCatogery()","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"EnergyTypes = ['水电', '核电', '太阳能', '分布式光伏', '风电', '海上风电', '生物质发电', '新能源']","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`### Load Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"async function loadData() {\n const content = await FileAttachment('202103.csv').csv()\n\n let transformed = {\n }\n\n \n content.forEach(item => {\n const city = item[\"地区名称\"]\n\n if (transformed[city] === undefined) {\n transformed[city] = [0, 0, 0, 0, 0, 0, 0, 0]\n }\n\n const type = item[\"能源类型\"]\n const ind = EnergyTypes.indexOf(type)\n if (ind < 0) {\n return\n }\n transformed[city][ind] = parseFloat(item[\"装机容量（万千瓦）\"])\n })\n\n return transformed\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`#### Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"loadData()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`### Globals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"Origin = await loadData()","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"Category = Object.keys(Origin)","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"RenewableEnergyTotal = () => {\n return Category.map(city => {\n const sum = Origin[city].reduce((s, c) => s + c)\n\n return {\n name: city,\n value: sum\n }\n }).sort((a, b) => a.value - b.value)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"// [city1, city2, ...] => [city1.value, city2.value, ...] for ind (EnergyType)\nDataPicker = (ind) => {\n return Category.map(city => {\n return Origin[city][ind]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"// { name: city, value: value }\nKeyValuePicker = (ind) => {\n return Category.map(city => {\n if (Origin[city][ind] > 0) {\n return {\n name: city,\n value: Origin[city][ind]\n }\n }\n }).sort((a, b) => a.value - b.value)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`### Pie Painter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"function piePainter(id, ind) {\n const dom = document.querySelector(`#${id}`)\n const chart = echarts.init(dom)\n\n const option = {\n title: {\n text: EnergyTypes[ind],\n left: 'center'\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: '区域',\n type: 'pie',\n radius: '75%',\n data: KeyValuePicker(ind),\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n };\n\n chart.setOption(option)\n\n return md`### ${EnergyTypes[0]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"{\n const dom = document.querySelector(`#total`)\n const chart = echarts.init(dom)\n\n const option = {\n title: {\n text: '新能源总量',\n left: 'center'\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: '区域',\n type: 'pie',\n radius: '75%',\n data: RenewableEnergyTotal(),\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n };\n\n chart.setOption(option)\n\n return md`#### 新能源总量`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"{\n piePainter('river', 0)\n \n return md`#### ${EnergyTypes[0]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"{\n piePainter('unclear', 1)\n \n return md`#### ${EnergyTypes[1]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"{\n piePainter('solar', 2)\n \n return md`#### ${EnergyTypes[2]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"{\n piePainter('wind', 4)\n \n return md`#### ${EnergyTypes[4]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"{\n piePainter('organic', 6)\n \n return md`#### ${EnergyTypes[6]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"{\n piePainter('new', 7)\n \n return md`#### ${EnergyTypes[7]}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"echarts = require('https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}