pythonidechart_Python调用echarts5实现数据可视化-02-魅惑黑

背景

本主在最初接触可视化的时候，也尝试着echarts，但是当时有人在开发pyecharts库，且其没有系统化的实施方案，尤其是导出图片功能。这几天，看到各大号在宣传Echarts5，看了看，还是有惊喜的地方。接下来尝试使用jinja2、bootstrap实现echarts官方示例的展示。对于有Django、Flask基础的道友，下面的代码可以拿来即用(简单修改)。

yeayee：蹭一蹭Echarts5的热度，用Python jinja2实现渲染​zhuanlan.zhihu.com

本期实现：

1.采用黑色背景；

2.使用jinja2的Template函数渲染JS；

Talk is cheap...

代码01-实现魅惑黑背景

import os

import jinja2

from jinja2 import Template

import webbrowser

# 加载基础模板

path = os.getcwd().replace("\\", "/")

base_temp_path = '/templates/base_flask_tmp.html'

base_temp_fullpath = path+base_temp_path

env = jinja2.Environment(loader=jinja2.FileSystemLoader(path))

base_temp = env.get_template(base_temp_path)

# 图像数据组

# 构造all_div

#

all_div='''

# 构造all_js

all_js=''''''

# jinja2 渲染模板

temp_out = base_temp.render(all_div=all_div,all_js=all_js)

# 保存

temp_out_name = '/templates/ex_006_line03.html'

with open(path+temp_out_name, 'w', encoding='utf-8') as f:

f.writelines(temp_out)

f.close()

# 系统浏览器打开html文件

webbrowser.open(path+temp_out_name)

代码02-Template()渲染JS

import os

import jinja2

from jinja2 import Template

import webbrowser

# 加载基础模板

path = os.getcwd().replace("\\", "/")

base_temp_path = '/templates/base_flask_tmp.html'

base_temp_fullpath = path+base_temp_path

env = jinja2.Environment(loader=jinja2.FileSystemLoader(path))

base_temp = env.get_template(base_temp_path)

# 图像数据组

# 构造all_div

#

all_div='''

'''

pie_data={ 'name': '面积模式',

'borderRadius': 8,

'data': [

{'value': 40, 'name': 'rose 1'},

{'value': 38, 'name': 'rose 2'},

{'value': 32, 'name': 'rose 3'},

{'value': 30, 'name': 'rose 4'},

{'value': 28, 'name': 'rose 5'},

{'value': 26, 'name': 'rose 6'},

{'value': 22, 'name': 'rose 7'},

{'value': 18, 'name': 'rose 8'}

],

}

# 构造all_js

all_js='''

var chartDom = document.getElementById('main1');

var myChart1 = echarts.init(chartDom, 'dark');

var option;

var pie_data = {{pie_data}}

option = {

legend: {

top: 'bottom'

},

toolbox: {

show: true,

feature: {

mark: {show: true},

saveAsImage: {show: true}

}

},

series: [

{

name: pie_data.name,

type: 'pie',

radius: [50, 250],

center: ['50%', '50%'],

roseType: 'area',

itemStyle: {

borderRadius: pie_data.borderRadius

},

data: pie_data.data

}

]

};

option && myChart1.setOption(option);

var chartDom = document.getElementById('main2');

var myChart2 = echarts.init(chartDom, 'dark');

var option;

option = {

title: {

text: '某地区蒸发量和降水量',

subtext: '纯属虚构'

},

tooltip: {

trigger: 'axis'

},

legend: {

data: ['蒸发量', '降水量']

},

toolbox: {

show: true,

feature: {

magicType: {show: true, type: ['line', 'bar']},

saveAsImage: {show: true}

}

},

calculable: true,

xAxis: [

{

type: 'category',

data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '蒸发量',

type: 'bar',

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

markPoint: {

data: [

{type: 'max', name: '最大值'},

{type: 'min', name: '最小值'}

]

},

markLine: {

data: [

{type: 'average', name: '平均值'}

]

}

},

{

name: '降水量',

type: 'bar',

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

markPoint: {

data: [

{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},

{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}

]

},

markLine: {

data: [

{type: 'average', name: '平均值'}

]

}

}

]

};

option && myChart2.setOption(option);

var charts = [myChart1,myChart2];

window.onresize = function(){

for(var i = 0; i < charts.length; i++){

charts[i].resize();

}

};

'''

# 万法皆对象

all_js_render = Template(all_js).render(pie_data=pie_data)

# jinja2 渲染模板

temp_out = base_temp.render(all_div=all_div,all_js=all_js_render)

# 保存

temp_out_name = '/templates/ex_007_line03.html'

with open(path+temp_out_name, 'w', encoding='utf-8') as f:

f.writelines(temp_out)

f.close()

# 系统浏览器打开html文件

webbrowser.open(path+temp_out_name)

【注】仅仅对玫瑰图进行了重构，柱状图感兴趣的可以自行重构。

视图模板

ECharts5学习 By 微信 civilpy

示例预览

{{all_div|safe}}

{{all_js|safe}}

【注】小杨，你距离Dashboard又进了一步~

结语

本主已经打包了base_flask_tmp.html以及bootstrap、echarts先关css\js文件，对于有基础的道友，从上面代码可以自行构造相关文件；对于小白用户，拿来及运行，可以小支持一下：

易一网络科技 - 付费文章​www.intumu.com