Echarts简介
ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具。目前，非常美观，非常好用，非常受欢迎的数据可视化工具。
官方网址：https://echarts.apache.org/zh/index.html
后来，有大神开发了Pyecharts， 是一个用于生成 Echarts 图表的python类库，也非常好用。
关于ECharts和Pyecharts的资料网上非常多，就不细述了，大家自己找吧。
本文主要讲Pyqt5和Pyecharts的结合使用，Pyqt5和ECharts的结合使用。
Pyqt5的数据可视化
在讲ECharts和Pyecharts之前，先说下pyqt5的数据可视化。
pyqt5的数据可视化工具很多。有pyqt5自带的QtChart可以做，有PyQtGraph可以做，有Plotly可以做，当然还有Pyecharts和Echarts可以做，等等等等。
个人也刚开始做数据可视化，这几个工具都摸了一下，发现最后还是Pyecharts和Echarts最好用，最美观，最方便。
而且，考虑到pyqt5打包的问题，这几个库（除了QtChart），都存在同样的困难。所以，最终我选的就是Pyecharts和Echarts。
Pyecharts和Echarts，为什么我一直分开说呢？因为在pyqt5的程序里，你可以单单使用Pyecharts来实现数据可视化，也可以单单使用Echarts来实现数据可视化。
Pyecharts和Echarts的底层原理肯定是一样的，但在pyqt5的程序里去实现，差别却很大。
Pyecharts相对方便，因为直接用的python语言来实现，但有个问题让我无法接受，因为用pyinstaller竟然无法打包Pyecharts！ 网上关于这个问题的解决方案很多，但我尝试了，都没有用。我还尝试去修改Pyecharts源码，大半天也没实现，终于放弃。
最后，通过一位大神的文章《Python数据可视化：PyQt与ECharts的完美结合方案》，发现在pyqt5的程序里，直接使用echarts，其实也很方便，很好用，而且使用pyinstaller打包，无任何障碍，因为根本没有不需要加载任何类库模块，就是直接编辑HTML文本就行了。
下面，Pyecharts和Echarts的两种实现代码，我都分享一下，希望对大家有帮助。
废话不说，上代码。
pyqt5和pyecharts的结合使用，但无法使用pyinstaller打包
【如下代码，完全复制，直接运行，即可使用】
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from pyecharts.charts import Line
from pyecharts import options
################################################
#######创建主窗口
################################################
class MainWindow(QMainWindow):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setWindowTitle('My Browser')
self.showMaximized()
self.webview = QWebEngineView()
self.setCentralWidget(self.webview)
###############################################
self.goto_creat_pyecharts()
def goto_creat_pyecharts(self):
######################################################
the_abscissa_list = ["周一","周二","周三","周四","周五","周六","周日"]
the_allmoney_list = [800,700,500,600,500,400,900]
the_allpoints_list = [200,300,100,200,300,100,400]
######################################################
line = (
Line()
.add_xaxis(xaxis_data=the_abscissa_list)
.add_yaxis(series_name="营业总额", y_axis=the_allmoney_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)
.add_yaxis(series_name="积分总额", y_axis=the_allpoints_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)
.set_global_opts(title_opts=options.TitleOpts(title="每周营收折线图"))
)
#############################################
the_sourceFile_origin = ("D:/monthcountview.html")
line.render(path=the_sourceFile_origin)
self.webview.load(QUrl.fromLocalFile(the_sourceFile_origin))
################################################
#######程序入门
################################################
if __name__ == "__main__":
app = QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
pyqt5和echarts的结合使用，可以使用pyinstaller打包
【如下代码，完全复制，直接运行，即可使用】
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
################################################
#######创建主窗口
################################################
class MainWindow(QMainWindow):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setWindowTitle('My Browser')
self.showMaximized()
self.webview = QWebEngineView()
self.setCentralWidget(self.webview)
###############################################
self.goto_creat_echarts_html()
def goto_creat_echarts_html(self):
###################################################
the_html_content ='''
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-link
-->
<!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/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {focus: 'data'},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
'''
###########################################
self.webview.setHtml(the_html_content)
################################################
#######程序入门
################################################
if __name__ == "__main__":
app = QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
pyqt5和echarts的结合使用，再说明
综上所述，如果有pyinstaller打包需求的，推荐大家使用pyqt5和echarts的结合使用。
echarts的图表html模板，可以去官网的示例进行下载就可。官网很多示例的，需要哪个图表模板，就点击【下载示例】即可。
html的文本编辑，参数传递，就是最原始的字符串操作，这里就不细说了，基本操作嘛，就是繁琐一点，但不复杂。
这里，展示一下我的一个饼图html文本编辑，以供参考。
#创建图表
def goto_creat_echarts_byhtml(self,all_datas):
##############################################
the_html_content ='''
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
</head>
<body style="width:800px; height:300px;margin:auto;top:30px">
<div id="container" style="width:800px; height:300px;margin:auto;top:30px"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
tooltip: {
trigger: 'item',
},
title: {
text: '商城专递员专递单数',
left: 'left'
},
legend: {
orient: 'vertical',
left: 'right',
},'''
#######设置##########################################################################
the_html_content=the_html_content+'''series: ['''
############
the_html_content =the_html_content + "{name: '专递单数',type: 'pie',radius:'70%',emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},data:["
for i in range(len(all_datas)):
the_html_content = the_html_content+"{value:" + str(all_datas[i][4]-all_datas[i][5])+", name: '"+ all_datas[i][3]+"-"+all_datas[i][1] + "'},"
the_html_content = the_html_content+"]},"
############
#######################################################################################
the_html_content = the_html_content + ''']};
if (option && typeof option === 'object') {myChart.setOption(option);}
</script>
</body>
</html>
'''
#########################################################
self.webview.setHtml(the_html_content)
本文如有帮助，敬请留言鼓励。
本文如有错误，敬请留言改进。
