- ECharts是一个基于JavaScript的开源可视化图表库，官方文档【Handbook - Apache ECharts】。
- 将echarts.js文件引入到目录下，然后利用Flask框架和官方文档的快速上手，可以搭建出基本的可视化框架。
- 通过Flask框架将整理好的数据传入HTML，替换官方示例的数据，然后运行，即可在网页中得到可视化图表。
import xlrd
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
book = xlrd.open_workbook('static/movie.xls')
sheet = book.sheet_by_name('sheet1')
row = sheet.nrows
name = []
score = []
people = []
for i in range(row):
name.append(sheet.cell(i, 0).value)
score.append(sheet.cell(i, 2).value)
people.append(sheet.cell(i, 3).value)
return render_template('index.html', name=name, score=score, people=people)
if __name__ == '__main__':
app.run()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<script src="static/echarts.js">script>
head>
<body>
<div id="main" style="width: 100%;height:500px;">div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['评分', '人数']
},
xAxis: [
{
type: 'category',
data: {{ name|tojson }},
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '评分',
min: 0,
max: 10,
interval: 2,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '人数',
min: 0,
max: 3000000,
interval: 500000,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '评分',
type: 'line',
data: {{ score|tojson }}
},
{
name: '人数',
type: 'bar',
yAxisIndex: 1,
data: {{ people|tojson }}
}
]
};
option && myChart.setOption(option);
script>
body>
html>
