您的位置：首页 > 其它

实现一个简单的echarts柱状图

2021-11-26 14:39 92 查看

bar.html

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$.ajax({
url:"/type_num",
async:true,
success:function (data) {
option.xAxis[0].data=data.data[0]
option.series[0].data=data.data[1]
myChart.setOption(option);
},
error:function (xhr,type,errorThrown) {
alert("出现错误！")
}
})
</script>

<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: []
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>

这里面有几个问题需要注意：

1、引入js

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
</body>

2、ajax的success方法接收返回的数据并给柱状图赋值

这里要注意一定要加上这一句话：

myChart.setOption(option);

success:function (data) {
option.xAxis[0].data=data.data[0]
option.series[0].data=data.data[1]
myChart.setOption(option);
},

3、后台获取数据库数据

def get_bar():
# 获取数据库连接
conn, cursor = get_conn()
if (conn != None):
print("数据库连接成功！")
typenumsql = "select * from news_num"
detail_sql = ""
res_title = query(typenumsql)  # 数据库原始标题表数据
# print(res_title)
# [('财经', '8597'), ('房产', '200'), ('教育', '500'), ('科技', '830'), ('军事', '158'), ('汽车', '647'), ('体育', '1200'), ('游戏', '1300'), ('娱乐', '1200')]
type_num = []  # 存储类别+数量
for item1 in res_title:
type_num.append(item1)
print(type_num)
return type_num

4、flask路由获取数据库数据并进行处理

#获取柱状图数据
@app.route('/type_num')
def type_num():
res_list=sql.get_bar()
my_list=[]
list_0=[]
list_1=[]
for item in res_list:
         list_0.append(item[0])
list_1.append(item[1])
    my_list.append(list_0)
     my_list.append(list_1)
     return {"data":my_list}

这里要注意：

柱状图需要的数据是两个list[ ]列表，所以在这里进行了数据格式的规范化

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航