“数据可视化图形展示pyecharts”的版本间的差异
跳到导航
跳到搜索
| 第1行： | 第1行： | ||
pip3 install pyecharts | pip3 install pyecharts | ||
| + | |||
| + | |||
| + | |||
| + | =思路= | ||
| + | <pre> | ||
| + | 具体思路： | ||
| + | |||
| + | 首先需要在绘图前为ECharts准备一个具备宽高的DOM容器，通过echarts.init方法初始化一个ECharts实例，然后接收从后台传过来的JSON，通过SetOption方法生成一个折线图。大致的流程就是这样，需要注意的点就是，jq接收Django传送过来的JSON时，要加一个Safe过滤器，关闭自动转义，同时也是为了防止页面乱码。 | ||
| + | |||
| + | varmem_total = {{ mem_total|safe }}; | ||
| + | |||
| + | 其次设置绑定查询按钮点击监听事件，将需要查询的时间段发送到后台，然后接收后台传送回来的JSON，通过SetOption方法重新生成一个折线图。这就是ECharts生成折线图大概的过程，其中如果考虑到如果数据加载时间过长，可以添加一段loading动画，使其变得更加人性化: | ||
| + | |||
| + | myChart.showLoading();//添加加载动画myChart.hideLoading();//隐藏加载动画 | ||
| + | |||
| + | 4、完善后台的逻辑操作： | ||
| + | |||
| + | 后台的逻辑十分简单，最主要的就是查询数据库中的数据，发送到初始页面的JSON，以及接受前台查询的时间段，查询数据库中指定时间段的数据。 | ||
| + | </pre> | ||
=see also= | =see also= | ||
2021年6月18日 (五) 02:49的版本
pip3 install pyecharts
思路
具体思路：
首先需要在绘图前为ECharts准备一个具备宽高的DOM容器，通过echarts.init方法初始化一个ECharts实例，然后接收从后台传过来的JSON，通过SetOption方法生成一个折线图。大致的流程就是这样，需要注意的点就是，jq接收Django传送过来的JSON时，要加一个Safe过滤器，关闭自动转义，同时也是为了防止页面乱码。
varmem_total = {{ mem_total|safe }};
其次设置绑定查询按钮点击监听事件，将需要查询的时间段发送到后台，然后接收后台传送回来的JSON，通过SetOption方法重新生成一个折线图。这就是ECharts生成折线图大概的过程，其中如果考虑到如果数据加载时间过长，可以添加一段loading动画，使其变得更加人性化:
myChart.showLoading();//添加加载动画myChart.hideLoading();//隐藏加载动画
4、完善后台的逻辑操作：
后台的逻辑十分简单，最主要的就是查询数据库中的数据，发送到初始页面的JSON，以及接受前台查询的时间段，查询数据库中指定时间段的数据。
