| {% import 'macro' as macro %} |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>{{ chart.page_title }}</title> |
| {{ macro.render_chart_dependencies(chart) }} |
| </head> |
| <body> |
| <div id="{{ chart.chart_id }}" style="width:{{ chart.width }}; height:{{ chart.height }};"></div> |
| <script> |
| var canvas_{{ chart.chart_id }} = document.createElement('canvas'); |
| var mapChart_{{ chart.chart_id }} = echarts.init( |
| canvas_{{ chart.chart_id }}, '{{ chart.theme }}', {width: 4096, height: 2048, renderer: '{{ chart.renderer }}'}); |
| {% for js in chart.js_functions.items %} |
| {{ js }} |
| {% endfor %} |
| var mapOption_{{ chart.chart_id }} = {{ chart.json_contents }}; |
| mapChart_{{ chart.chart_id }}.setOption(mapOption_{{ chart.chart_id }}); |
| |
| var chart_{{ chart.chart_id }} = echarts.init( |
| document.getElementById('{{ chart.chart_id }}'), '{{ chart.theme }}', {renderer: '{{ chart.renderer }}'}); |
| var options_{{ chart.chart_id }} = { |
| "globe": { |
| "show": true, |
| "baseTexture": mapChart_{{ chart.chart_id }}, |
| shading: 'lambert', |
| light: { |
| ambient: { |
| intensity: 0.6 |
| }, |
| main: { |
| intensity: 0.2 |
| } |
| } |
| |
| }}; |
| chart_{{ chart.chart_id }}.setOption(options_{{ chart.chart_id }}); |
| </script> |
| </body> |
| </html> |
