![[Source] Data Visualization: Based on Echarts + Python Dynamic Real-Time Large Screen Example - DataBase Data Source.zip](https://code711.cn/wp-content/uploads/2024/08/mbd_1702302520547_screenshot_1702302520524-23.jpg)
Big screen data source whether you can show a richer variety, such as Excel, databases, etc., that is more close to the partners of the actual work of the scene, you can quickly apply in the work, so the partners should be demanded, the birth of this [based on Echarts + Python dynamic real-time big screen example - DataBase data source]. In addition, a lot of actual display scenes need to autoplay effects, this case also shows the Events and DispatchAction triggered by the pie chart and map highlighting effect, very practical.
Before the partners suggested that I come up with some video courses to learn Echarts, so that you can get started faster, so I chased the stars to catch up with the moon to record the "Echart-0 basic introductory" series of courses (a total of 14 lessons) , and I hope that the partners more support.
Database connection - python Records
Official open source GitHub address:https://github.com/kennethreitz/records Currently there are 6.7K Star supported databases including RedShift, Postgres, MySQL, SQLite, Oracle, and MS-SQL (drivers not included). Because it is simple enough, powerful enough, and supports enough databases, Records is used in this case.
I. Identification of demand programs
1, determine the screen resolution of the product online deployment
Adaptive display based on computer resolution screen, F11 full screen view;
2. Deployment mode
B/S way: support for Windows, Linux, Mac and other mainstream operating systems; support for mainstream browsers Chrome, Microsoft Edge, 360, etc.; the server is written in python, configure the python dependencies can be.
II. Overall architectural design
Front-end Echarts open source library : using WebStorm editor ;
Backend http server: Python based implementation, using Pycharm or VSCode editor;
Data transfer format: JSON;
Data source type: Mysql DataBase. actual development needs, support for customizing the HTTP API interface mode or a variety of other types of databases, such as PostgreSQL, MySQL, Oracle, Microsoft SQL Server, SQLite, Excel tables and so on.
Data update method: this case in order to show the data, using http get pull. The actual development needs, using the back-end data real-time updates, real-time push to the front-end display;
Third, the coding realization (based on length and readability considerations, here to show some of the key code)
1, front-end html code - the overall layout of the page
<body style="”background-color:" #01030c”>
<div class="”container_fluid”">
<div class="”row_fluid”" id="”vue_app”">
<div style="”padding:0" 0″ class="”col-xs-12" col-md-12″>
<dv-decoration-1 style=”height:4%;”>
</dv-decoration-1>
<h3 id="”container_h”"></h3>
</div>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-3″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_0″"></div>
</dv-border-box-13>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-12″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_1″"></div>
</dv-border-box-13>
</div>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-12″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_2″"></div>
</dv-border-box-13>
</div>
</div>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-6″>
<dv-border-box-13 style=”height:87%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:" 2% 2%” id ="”container_3″"></div>
</dv-border-box-13>
</div>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-3″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_4″"></div>
</dv-border-box-13>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-12″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_5″"></div>
</dv-border-box-13>
</div>
<div style="”padding:0" 0″ class="”col-xs-12" col-md-12″>
<dv-border-box-13 style=”height:29%;padding:0 0″ class=”col-xs-12 col-md-12″>
<div style="”height:100%;padding:5%" 5% 5%;” id ="”container_6″"></div>
</dv-border-box-13>
</div>
</div>
</div>
</div>
</body>
2、Front-end JS code - Echarts map component
document.write("");
var myChart.
var data = [];
var mapOption.
var barOption.
var currentOption.
function initEchartMap(idContainer) {
myChart = echarts.init(document.getElementById(idContainer), window.gTheme);
mapOption = {
tooltip: {
trigger: "item",
formatter: function (params) {
value = 0;
if (!window.isNaN(params.value)) {
value = params.value;
}
return params.name + " : " + value;
},
},
visualMap: {
realtime: true,
calculable: true,
seriesIndex: 0,
},
geo: [
{
map: "china",
roam: true,
layoutCenter: ["50%", "55%"],
layoutSize: "120%",
selectedMode: "single",
zoom: 0.9
},
],
series: [
{
name: "Map",
type: "map",
coordinateSystem: "geo",
geoIndex: 0,
data: [],
}
],
};
barOption = {
grid: {
left: "10%",
top: "20%".
right: "5%".
bottom: "5%".
containLabel: true,
},
xAxis: {
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
yAxis: {
type: "category",
axisLabel: {
rotate: 30,
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
data: data.map(function (item) {
return item.name.
}),
},
dataZoom: [
{
type: "slider",
yAxisIndex: 0,
left: "2%",
start: 50,
end: 100,
},
],
animationDurationUpdate: 1000,
series: [
{
type: "bar",
id: "population",
data: data.map(function (item) {
return item.value;
}),
universalTransition: true,
},
],
};
currentOption = mapOption;
myChart.setOption(mapOption);
setInterval(function () {
currentOption = currentOption === mapOption ? currentOption = currentOption === mapOption ?
myChart.setOption(currentOption, true);
}, 3000);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function asyncDataMap(filename) {
$.getJSON(filename).done(function (res) {
data = res.sort(function (a, b) {
return a.value - b.value;
});
barOption.series[0].data = data.map(function (item) {
return item.value;
});
barOption.yAxis.data = data.map(function (item) {
return item.name.
});
mapOption.series[0].data = res;
currentOption = currentOption === mapOption ? currentOption = currentOption === mapOption ?
myChart.setOption(currentOption, true);
}); //end $.getJSON
}
3. Echarts Auto Highlight - Map Component
In this example, the pie charts and maps are highlighted automatically, which is very useful when displaying them again.
setInterval(function () {
var myChart = echarts.init(document.getElementById(container));
var dataLen = 0;
try {
dataLen = myChart.getOption().dataset[0]["source"].length;
} catch {
dataLen = myChart.getOption().series[0]["data"].length;
}
// Unhighlight the previously highlighted graphic
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: currentIndex,
});
currentIndex = (currentIndex + 1) % dataLen; currentIndex = (currentIndex + 1) % dataLen.
// Highlight the current graph
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: currentIndex,
});
// Show tooltip
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: currentIndex,
});
}, 1000);
4, back-end python implementation of the httpserver code
def HttpServer().
try.
server = HTTPServer((ip, port), MyRequestHandler)
listen = "http://%s:%d" % (ip, port)
print("Server listening address: ", listen)
server.serve_forever()
except ValueError as e.
print("Exception", e)
server.socket.close()
if __name__ == "__main__".
HttpServer()
5、DataBase data source and code
1. Database connection code
# Access to database
db = records.Database(
'mysql+pymysql://username:password@ip:port/database')
2. Database query code
def get_name_value(table_name).
data = []
# Read database
sql = "select * from %s" % table_name
rows = db.query(sql)
for r in rows.all(as_dict=True):
data.append([r["name"], r["value"]])
return data
IV. Effect of on-line operation
V. Start-up commands
<!– 启动server命令 –>
python httpserver.py
<!– 浏览器中输入网址查看大屏（端口为 httpserver.py 中的 port 参数定义） –>
http://localhost:88xx
Resource Disclaimer (Purchase is deemed to be agreement with this statement): 1. Any operation on the website platform is considered to have read and agreed to the registration agreement and disclaimer at the bottom of the website, this site resources have been ultra-low price, and does not provide technical support 2. Some network users share the net disk address may be invalid, such as the occurrence of failure, please send an e-mail to customer service code711cn#qq.com (# replaced by @) will be made up to send 3. This site provides all downloadable resources (software, etc.) site to ensure that no negative changes; but this site can not guarantee the accuracy, security and integrity of the resources, the user downloads at their own discretion, we communicate to learn for the purpose of not all the source code is not 100% error-free or no bugs; you need to have a certain foundation to be able to read and understand the code, be able to modify the debugging yourself! code and solve the error. At the same time, users of this site must understand that the Source Code Convenience Store does not own any rights to the software provided for download, the copyright belongs to the legal owner of the resource. 4. All resources on this site only for learning and research purposes, please must be deleted within 24 hours of the downloaded resources, do not use for commercial purposes, otherwise the legal disputes arising from the site and the publisher of the collateral liability site and will not be borne! 5. Due to the reproducible nature of the resources, once purchased are non-refundable, the recharge balance is also non-refundable
Chinese 
English 
Russian 
Japanese 
Korean 
Spanish 
French 
German 
Arabic