实现一个简单的echarts柱状图
bar.html
1 DOCTYPE html> 2 <html style="height: 100%"> 3 <head> 4 <meta charset="utf-8"> 5 head> 6 <body style="height: 100%; margin: 0"> 7 <div id="container" style="height: 100%">div> 8 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js">script> 9 <script src="../static/js/jquery-3.3.1.min.js">script> 10 body> 11 html> 12 <script> 13 $.ajax({ 14 url:"/type_num", 15 async:true, 16 success:function (data) { 17 option.xAxis[0].data=data.data[0] 18 option.series[0].data=data.data[1] 19 myChart.setOption(option); 20 }, 21 error:function (xhr,type,errorThrown) { 22 alert("出现错误！") 23 } 24 }) 25 script> 26 27 <script type="text/javascript"> 28 var dom = document.getElementById("container"); 29 var myChart = echarts.init(dom); 30 var app = {}; 31 var option; 32 option = { 33 tooltip: { 34 trigger: 'axis', 35 axisPointer: { 36 type: 'shadow' 37 } 38 }, 39 grid: { 40 left: '3%', 41 right: '4%', 42 bottom: '3%', 43 containLabel: true 44 }, 45 xAxis: [ 46 { 47 type: 'category', 48 data: [], 49 axisTick: { 50 alignWithLabel: true 51 } 52 } 53 ], 54 yAxis: [ 55 { 56 type: 'value' 57 } 58 ], 59 series: [ 60 { 61 name: 'Direct', 62 type: 'bar', 63 barWidth: '60%', 64 data: [] 65 } 66 ] 67 }; 68 69 if (option && typeof option === 'object') { 70 myChart.setOption(option); 71 } 72 script>
这里面有几个问题需要注意：
1、引入js
1 <body style="height: 100%; margin: 0"> 2 <div id="container" style="height: 100%">div> 3 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js">script> 4 <script src="../static/js/jquery-3.3.1.min.js">script> 5 body>
2、ajax的success方法接收返回的数据并给柱状图赋值
这里要注意一定要加上这一句话：
myChart.setOption(option);
1 success:function (data) { 2 option.xAxis[0].data=data.data[0] 3 option.series[0].data=data.data[1] 4 myChart.setOption(option); 5 },
3、后台获取数据库数据
1 def get_bar(): 2 # 获取数据库连接 3 conn, cursor = get_conn() 4 if (conn != None): 5 print("数据库连接成功！") 6 typenumsql = "select * from news_num" 7 detail_sql = "" 8 res_title = query(typenumsql) # 数据库原始标题表数据 9 # print(res_title) 10 # [('财经', '8597'), ('房产', '200'), ('教育', '500'), ('科技', '830'), ('军事', '158'), ('汽车', '647'), ('体育', '1200'), ('游戏', '1300'), ('娱乐', '1200')] 11 type_num = [] # 存储类别+数量 12 for item1 in res_title: 13 type_num.append(item1) 14 print(type_num) 15 return type_num
4、flask路由获取数据库数据并进行处理
1 #获取柱状图数据 2 @app.route('/type_num') 3 def type_num(): 4 res_list=sql.get_bar() 5 my_list=[] 6 list_0=[] 7 list_1=[] 8 for item in res_list: 9 list_0.append(item[0]) 10 list_1.append(item[1]) 11 my_list.append(list_0) 12 my_list.append(list_1) 13 return {"data":my_list}
这里要注意：
柱状图需要的数据是两个list[ ]列表，所以在这里进行了数据格式的规范化