前面echarts和pyecharts都做了简单的介绍，这里用主题河流图做对照，来展示这里面的区别
echarts式
echarts式的主题河流图主要以网页内的配置为主，django的视图函数起到传递数据的作用。前面我改编的主题河流图还有缩放数据的功能
视图函数
def myriver(request):
names = ['Tom', 'may', 'jim']
today = datetime.now().date()
data = []
for i in range(50):
date = today + timedelta(days=i)
for name in names:
data.append([str(date), random.randint(0, 80), name])
return render(request, 'themeRiver-basic.html', locals())html文件
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=themeRiver-basic
-->
<!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@{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'left'
},
dataZoom: [
{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: '90%',
labelFormatter: ''
},
{
type: 'inside',
filterMode: 'weakFilter'
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: {{ names|safe }}
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
data: {{ data|safe }}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>效果图
pyecharts式
pyecharts生成的主图河流图在视图函数中直接生成文件，最后渲染成页面
视图函数
视图函数中生成数据的步骤和前面的echarts主题河流图是一样的，为了让两张图表功能基本一致，这里也加了缩放。
代码中被注释掉的部分，是datazoom_opts的另一种字典配置方式。特别注意缩放设置是多重配置，配置的值是一个列表项。
def myriver2(request):
from pyecharts.charts import ThemeRiver
names = ['Tom', 'may', 'jim']
today = datetime.now().date()
data = []
for i in range(50):
date = today + timedelta(days=i)
for name in names:
data.append([str(date), random.randint(0, 80), name])
c=(
ThemeRiver()
.add(
series_name=names,
data=data,
singleaxis_opts=opts.SingleAxisOpts(
pos_top="50", pos_bottom="50", type_="time"
),
)
.set_global_opts(
tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="line"),
# datazoom_opts=[
# {
# 'type': 'slider',
# 'filterMode': 'weakFilter',
# 'showDataShadow': 'false',
# 'top': '90%',
# 'labelFormatter': ''
# },
# {
# 'type': 'inside',
# 'filterMode': 'weakFilter'
# }
# ]
datazoom_opts=[opts.DataZoomOpts(pos_top='90%',type_='slider',filter_mode='weakfilter'),
opts.DataZoomOpts(pos_top='90%',type_='inside',filter_mode='weakfilter')]
)
.render_embed()
)
return HttpResponse(c)生成的网页源代码
通过观察生成的网页源代码就会发现，pyecharts默认会带一些参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="/static/echarts.min.js"></script>
</head>
<body>
<div id="e80db47094044e358d7ef74847d2f1ea" class="chart-container" style="width:900px; height:500px;"></div>
<script>
var chart_e80db47094044e358d7ef74847d2f1ea = echarts.init(
document.getElementById('e80db47094044e358d7ef74847d2f1ea'), 'white', {renderer: 'canvas'});
var option_e80db47094044e358d7ef74847d2f1ea = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"series": [
{
"type": "themeRiver",
"name": [
"Tom",
"may",
"jim"
],
"data": [
[
"2022-01-21",
25,
"Tom"
],
[
"2022-01-21",
54,
"may"
],
[
"2022-01-21",
6,
"jim"
],
[
"2022-01-22",
33,
"Tom"
],
[
"2022-01-22",
64,
"may"
],
[
"2022-01-22",
29,
"jim"
],
[
"2022-01-23",
7,
"Tom"
],
[
"2022-01-23",
35,
"may"
],
[
"2022-01-23",
60,
"jim"
],
[
"2022-01-24",
52,
"Tom"
],
[
"2022-01-24",
76,
"may"
],
[
"2022-01-24",
74,
"jim"
],
[
"2022-01-25",
38,
"Tom"
],
[
"2022-01-25",
3,
"may"
],
[
"2022-01-25",
29,
"jim"
],
[
"2022-01-26",
55,
"Tom"
],
[
"2022-01-26",
24,
"may"
],
[
"2022-01-26",
43,
"jim"
],
[
"2022-01-27",
64,
"Tom"
],
[
"2022-01-27",
3,
"may"
],
[
"2022-01-27",
25,
"jim"
],
[
"2022-01-28",
50,
"Tom"
],
[
"2022-01-28",
66,
"may"
],
[
"2022-01-28",
20,
"jim"
],
[
"2022-01-29",
9,
"Tom"
],
[
"2022-01-29",
57,
"may"
],
[
"2022-01-29",
80,
"jim"
],
[
"2022-01-30",
13,
"Tom"
],
[
"2022-01-30",
78,
"may"
],
[
"2022-01-30",
30,
"jim"
],
[
"2022-01-31",
25,
"Tom"
],
[
"2022-01-31",
53,
"may"
],
[
"2022-01-31",
50,
"jim"
],
[
"2022-02-01",
19,
"Tom"
],
[
"2022-02-01",
18,
"may"
],
[
"2022-02-01",
21,
"jim"
],
[
"2022-02-02",
74,
"Tom"
],
[
"2022-02-02",
11,
"may"
],
[
"2022-02-02",
29,
"jim"
],
[
"2022-02-03",
4,
"Tom"
],
[
"2022-02-03",
42,
"may"
],
[
"2022-02-03",
3,
"jim"
],
[
"2022-02-04",
7,
"Tom"
],
[
"2022-02-04",
21,
"may"
],
[
"2022-02-04",
3,
"jim"
],
[
"2022-02-05",
2,
"Tom"
],
[
"2022-02-05",
15,
"may"
],
[
"2022-02-05",
50,
"jim"
],
[
"2022-02-06",
1,
"Tom"
],
[
"2022-02-06",
15,
"may"
],
[
"2022-02-06",
37,
"jim"
],
[
"2022-02-07",
12,
"Tom"
],
[
"2022-02-07",
71,
"may"
],
[
"2022-02-07",
24,
"jim"
],
[
"2022-02-08",
62,
"Tom"
],
[
"2022-02-08",
12,
"may"
],
[
"2022-02-08",
8,
"jim"
],
[
"2022-02-09",
30,
"Tom"
],
[
"2022-02-09",
50,
"may"
],
[
"2022-02-09",
25,
"jim"
],
[
"2022-02-10",
58,
"Tom"
],
[
"2022-02-10",
36,
"may"
],
[
"2022-02-10",
52,
"jim"
],
[
"2022-02-11",
45,
"Tom"
],
[
"2022-02-11",
41,
"may"
],
[
"2022-02-11",
13,
"jim"
],
[
"2022-02-12",
44,
"Tom"
],
[
"2022-02-12",
27,
"may"
],
[
"2022-02-12",
30,
"jim"
],
[
"2022-02-13",
75,
"Tom"
],
[
"2022-02-13",
32,
"may"
],
[
"2022-02-13",
2,
"jim"
],
[
"2022-02-14",
61,
"Tom"
],
[
"2022-02-14",
64,
"may"
],
[
"2022-02-14",
35,
"jim"
],
[
"2022-02-15",
32,
"Tom"
],
[
"2022-02-15",
13,
"may"
],
[
"2022-02-15",
4,
"jim"
],
[
"2022-02-16",
56,
"Tom"
],
[
"2022-02-16",
70,
"may"
],
[
"2022-02-16",
11,
"jim"
],
[
"2022-02-17",
22,
"Tom"
],
[
"2022-02-17",
34,
"may"
],
[
"2022-02-17",
68,
"jim"
],
[
"2022-02-18",
17,
"Tom"
],
[
"2022-02-18",
0,
"may"
],
[
"2022-02-18",
64,
"jim"
],
[
"2022-02-19",
11,
"Tom"
],
[
"2022-02-19",
73,
"may"
],
[
"2022-02-19",
71,
"jim"
],
[
"2022-02-20",
25,
"Tom"
],
[
"2022-02-20",
10,
"may"
],
[
"2022-02-20",
22,
"jim"
],
[
"2022-02-21",
60,
"Tom"
],
[
"2022-02-21",
64,
"may"
],
[
"2022-02-21",
11,
"jim"
],
[
"2022-02-22",
48,
"Tom"
],
[
"2022-02-22",
47,
"may"
],
[
"2022-02-22",
23,
"jim"
],
[
"2022-02-23",
40,
"Tom"
],
[
"2022-02-23",
23,
"may"
],
[
"2022-02-23",
65,
"jim"
],
[
"2022-02-24",
40,
"Tom"
],
[
"2022-02-24",
15,
"may"
],
[
"2022-02-24",
31,
"jim"
],
[
"2022-02-25",
53,
"Tom"
],
[
"2022-02-25",
2,
"may"
],
[
"2022-02-25",
80,
"jim"
],
[
"2022-02-26",
41,
"Tom"
],
[
"2022-02-26",
67,
"may"
],
[
"2022-02-26",
22,
"jim"
],
[
"2022-02-27",
67,
"Tom"
],
[
"2022-02-27",
65,
"may"
],
[
"2022-02-27",
65,
"jim"
],
[
"2022-02-28",
67,
"Tom"
],
[
"2022-02-28",
49,
"may"
],
[
"2022-02-28",
67,
"jim"
],
[
"2022-03-01",
29,
"Tom"
],
[
"2022-03-01",
1,
"may"
],
[
"2022-03-01",
75,
"jim"
],
[
"2022-03-02",
22,
"Tom"
],
[
"2022-03-02",
16,
"may"
],
[
"2022-03-02",
38,
"jim"
],
[
"2022-03-03",
37,
"Tom"
],
[
"2022-03-03",
37,
"may"
],
[
"2022-03-03",
41,
"jim"
],
[
"2022-03-04",
71,
"Tom"
],
[
"2022-03-04",
23,
"may"
],
[
"2022-03-04",
44,
"jim"
],
[
"2022-03-05",
10,
"Tom"
],
[
"2022-03-05",
43,
"may"
],
[
"2022-03-05",
13,
"jim"
],
[
"2022-03-06",
27,
"Tom"
],
[
"2022-03-06",
57,
"may"
],
[
"2022-03-06",
72,
"jim"
],
[
"2022-03-07",
72,
"Tom"
],
[
"2022-03-07",
11,
"may"
],
[
"2022-03-07",
62,
"jim"
],
[
"2022-03-08",
11,
"Tom"
],
[
"2022-03-08",
34,
"may"
],
[
"2022-03-08",
18,
"jim"
],
[
"2022-03-09",
68,
"Tom"
],
[
"2022-03-09",
24,
"may"
],
[
"2022-03-09",
49,
"jim"
],
[
"2022-03-10",
56,
"Tom"
],
[
"2022-03-10",
51,
"may"
],
[
"2022-03-10",
11,
"jim"
],
[
"2022-03-11",
77,
"Tom"
],
[
"2022-03-11",
31,
"may"
],
[
"2022-03-11",
55,
"jim"
]
],
"label": {
"show": true,
"position": "top",
"margin": 8
}
}
],
"legend": [
{
"data": [
"Tom",
"may",
"jim"
],
"selected": {
"Tom": true,
"may": true,
"jim": true
},
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}
],
"tooltip": {
"show": true,
"trigger": "axis",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"singleAxis": {
"top": "50",
"bottom": "50",
"type": "time"
},
"title": [
{
"padding": 5,
"itemGap": 10
}
],
"dataZoom": [
{
"show": true,
"type": "slider",
"realtime": true,
"start": 20,
"end": 80,
"orient": "horizontal",
"zoomLock": false,
"top": "90%",
"filterMode": "weakfilter"
},
{
"show": true,
"type": "inside",
"realtime": true,
"start": 20,
"end": 80,
"orient": "horizontal",
"zoomLock": false,
"top": "90%",
"filterMode": "weakfilter"
}
]
};
chart_e80db47094044e358d7ef74847d2f1ea.setOption(option_e80db47094044e358d7ef74847d2f1ea);
</script>
</body>
</html>效果图
对比
配置方面
在使用中感觉pyecharts没有echarts配置丰富。
echarts配置的坐标轴有多个选项，但是在pyecharts文档中并没有这些设置。echarts图中的一些效果在pyecharts中就找不到配置。示例gallery中也有些说明是提到部分功能暂不支持的。
单轴配置项明显pyecharts少很多东西。
显示效果方面
两张效果图中这个缩放的位置不太一样，pyecharts图默认采用了2-8分段点（或许是二八定律），而echarts不做相关配置，默认在首尾的，
坐标轴也不太一样，pyecharts将时间标志完整的标注，但是echarts只在关键位置标注较大单位的时间。
配色方面
在pyecharts生成的文件中可以看到，即使不设置颜色，整个图形还是自带一个调色板的，但echarts不设置就是没有的，至少在网页文件里是看不到 。
综合评价
总体而言，两者都是非常不错的，都能实现一些图形。但是还是感觉pyecharts的用途还不是很完善。
pyecharts本身是基于echarts的，也做出了像grid、page这种组件，可以一个页面集成多张图表，这是一种突破。但在一些配置项上面，还远没有echarts灵活。一些配置的缺失就让人感觉图表没有直接用echarts生成出来的看起来高级。
还是希望pyecharts的开发者能够追赶下echarts的进度，将更多的配置集成到库里面，也希望能够出更为完善的开发文档，方便像我这样根据文档学习的开发者能够有更多的学习资料。
更祝愿在新的一年，echarts的pyecharts能够虎虎生威，撸虎添亿！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
