首先给出Echarts官网实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts (1).js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;">ss</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指。定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>运行效果如下所示:
然后在本地mysql中创建一个数据库test,在mysql中创建一个表tvalues,在tvalues中创建两个字段一个字段为id,一个字段为tdsvalue.
然后在pycharm中创建一个demo.py后台py文件，在template文件夹下创建一个my_template.html前端展示界面
首先生成一个Flask实例
app=Flask(__name__)定义一个视图函数 hello():，对my_template.html进行渲染
@app.route("/")
def hello():
return render_template('my_template.html')然后定义一个视图函数my_echart():进行数据库的连接和查询功能，并把查询出来的结果放到一个json中
#/test路由 接收前端的Ajax请求
@app.route('/test',methods=['POST'])
def my_echart():
#连接数据库
conn=pymysql.connect(host='127.0.0.1',user='root',password='123456',db='test')
cur=conn.cursor()
sql='SELECT t.id,t.tdsvalue from tvalues t'
cur.execute(sql)
u=cur.fetchall()
#转换成json格式
jsonData={}
xdays=[]
yvalues=[]
for data in u:
xdays.append(data[0])
yvalues.append(data[1])
print(xdays)
print(yvalues)
jsonData['xdays']=xdays
jsonData['yvalues']=yvalues
#json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错，因此将数据写入时需要用到此函数
j=json.dumps(jsonData)
cur.close()
conn.close()
#在浏览器上渲染my_template.html模板（为了查看输出数据)
return (j)xdays这个数组放的是id，yvalues这个数组放的是销售量
完整的demo.py代码如下所示:
from flask import Flask,render_template,url_for
import pymysql
import json
#生成Flask实例
app=Flask(__name__)
@app.route("/")
def hello():
return render_template('my_template.html')
#/test路由 接收前端的Ajax请求
@app.route('/test',methods=['POST'])
def my_echart():
#连接数据库
conn=pymysql.connect(host='127.0.0.1',user='root',password='123456',db='test')
cur=conn.cursor()
sql='SELECT t.id,t.tdsvalue from tvalues t'
cur.execute(sql)
u=cur.fetchall()
#转换成json格式
jsonData={}
xdays=[]
yvalues=[]
for data in u:
xdays.append(data[0])
yvalues.append(data[1])
print(xdays)
print(yvalues)
jsonData['xdays']=xdays
jsonData['yvalues']=yvalues
#json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错，因此将数据写入时需要用到此函数
j=json.dumps(jsonData)
cur.close()
conn.close()
#在浏览器上渲染my_template.html模板（为了查看输出数据)
return (j)
if __name__ == '__main__':
app.run(debug=True)然后我们编写my_template.html文件‘
先分别引入jquery.js和echarts.js文件
<!--引入echarts.js-->
<script src="../static/echarts%20.js"></script>
<!--引入jquery.js-->
<script src="../static/jquery-3.1.1.js"></script>然后为echarts准备一个具有大小的Dom
<div id="main" style="width: 800px;height:500px;margin: 0 auto;"></div>然后初始化echarts
var myChart = echarts.init(document.getElementById('main'));然后发出Ajax请求，从后台获取json数据
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue)
});定义方法getData（）获取数据:
function getData() {
$.ajax({
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue = data.yvalues;
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: app.xday
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: app.yvalue
}]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
};完整的my_template.html代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炫酷的ECharts</title>
<!--引入echarts.js-->
<script src="../static/echarts%20.js"></script>
<!--引入jquery.js-->
<script src="../static/jquery-3.1.1.js"></script>
</head>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:500px;margin: 0 auto;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var app = {
xday:[],
yvalue:[]
};
// 发送ajax请求，从后台获取json数据
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue)
});
function getData() {
$.ajax({
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue = data.yvalues;
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: app.xday
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: app.yvalue
}]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
};
</script>
<body>
</body>
</html>运行效果如图所示：
