Table of Contents
install Flask
pip install flask
Get Template
Writing code
Idea:
Based on the proper visualization template, feed data from python program to the template, then render the result in the template.
1. Passing data from python to template through javascript.
In Python file:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def root():
divdata = '草莓,乌梅,蓝莓,红莓,白梅,话梅,绿莓';
areadata = '555,666,777';
return render_template('bigdata.html',
divdata=divdata,
areadata=areadata,
...
)
if __name__ == '__main__':
app.run(debug=True)
2. In template html file
Render data as an html element, using js to convert it into js varaibles.
<div id='divdata' style="display:none">{{ divdata }}</div>
<div id='areadata' style="display:none">{{ areadata }}</div>
<script>
var divdata = document.getElementById('divdata').innerText;
var datadiv = divdata.split(',');
var areadata = document.getElementById('areadata').innerText;
var dataarea = areadata.split(',');
</script>
3. In chart js configuration file:
//initialize echarts, and configure the chart
var myChart = echarts.init(document.getElementById('echart1'));
option = {
...
xAxis: [{
type: 'category',
data: datadiv,
axisLine: {
var data = [
{ name: '海门', value: dataarea[0]},
{ name: '鄂尔多斯', value: dataarea[1]},
{ name: '招远', value: dataarea[2]},
{ name: '舟山', value: dataarea[3]},
Result
Comments