from pyecharts import options as opts
from pyecharts.charts import Bar, Line, Grid, Kline
from pyecharts.globals import ThemeType
xdata = [1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15]
ydata = [1, 2, 3, 3, 2, 1,7,8,9,10,11,12,13,14,15]
bar=Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT, width='800px', height='500px'))
bar.add_xaxis(xdata)
bar.add_yaxis("主动", ydata, z=0)
bar.set_colors(["#FF3030", "#0000FF"])
bar.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
bar.set_global_opts(
tooltip_opts=opts.TooltipOpts(is_show=True, trigger="axis", axis_pointer_type="cross"),
title_opts=opts.TitleOpts(title="主动买卖(日线)", pos_left="left", title_textstyle_opts={"fontSize": "15"},
padding=[30, 5]),
datazoom_opts=opts.DataZoomOpts(range_start=None, range_end=None,
start_value=len(xdata) - 7,
end_value=len(xdata) - 1,), # type_="inside",
xaxis_opts=opts.AxisOpts(axislabel_opts={"interval": "0", "rotate": "-0", "fontSize": "8"}),
yaxis_opts=opts.AxisOpts(axislabel_opts={"fontSize": "8"}),
legend_opts=opts.LegendOpts(pos_left="center", padding=[30, 5]),
)
bar.render("pybar.html")
# 链式编程
# bar = (
# Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT, width='370px', height='250px'))
# .add_xaxis(xdata)
# .add_yaxis("主动", ydata, z=0)
# .set_colors(["#FF3030", "#0000FF"])
# .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
# .set_global_opts(
# tooltip_opts=opts.TooltipOpts(is_show=True, trigger="axis", axis_pointer_type="cross"),
# title_opts=opts.TitleOpts(title="主动买卖(日线)", pos_left="left", title_textstyle_opts={"fontSize": "15"},
# padding=[30, 5]),
# datazoom_opts=opts.DataZoomOpts(range_start=None, range_end=None,
# start_value=len(xdata) - 7,
# end_value=len(xdata) - 1,), # type_="inside",
# xaxis_opts=opts.AxisOpts(axislabel_opts={"interval": "0", "rotate": "-0", "fontSize": "8"}),
# yaxis_opts=opts.AxisOpts(axislabel_opts={"fontSize": "8"}),
# legend_opts=opts.LegendOpts(pos_left="center", padding=[30, 5]),
# )
# .render("pybar.html")
# )
from pyecharts import options as opts
from pyecharts.charts import Bar, Line, Grid, Kline
from pyecharts.globals import ThemeType
import re
from flask_sqlalchemy import SQLAlchemy
from flask import Flask, jsonify, request, jsonify,render_template
# from snapshot_phantomjs import snapshot
from snapshot_selenium import snapshot
from pyecharts.render import make_snapshot
xdata = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'markl', '12', '13', '14', '15', '16']
ydata = [3, 2, 3, 3, 2, 1, 7, 8, 9, 10, 11, 12, 13, 14, 15]
ydata2 = [3, 5, 8, 9, 8, 6, 4, 3, 1, 7, 8, 9, 10, 13, 16]
# 创建一个Line并且进行初始化设置
line = Line(
init_opts=opts.InitOpts(
# 图表主题风格，可以依赖于from pyecharts.globals import
# ThemeType，库里自带的一些风格，如ThemeType.LIGHT，当然也可以直接写"white"|"dark"
theme=ThemeType.LIGHT,
# 图的宽度和高度
width='800px',
height='500px',
# 图的ID，图表唯一标识，用于在多图表时区分。一般用不着。Optional[str]
chart_id=None,
# 显示在浏览器标签栏上的名字，可以选择自己需要的名字
page_title="这里是网页标题",
# 图的背景色，会覆盖掉theme设置的主题的背景色
bg_color='#F3F3F3',
# 动画效果设置
animation_opts=opts.AnimationOpts(
# 是否开启动画，默认开启
animation=True,
# Numeric，是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。默认 2000。
animation_threshold=2000,
# Union[Numeric, JSFunc] 初始动画的时长，默认值为 1000。
# 支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
animation_duration=1000,
##################################这部分没啥用，也找不到参考资料，暂时不用#######################################
# Union[str] 初始动画的缓动效果。
# bounceOut|cubicOut。
animation_easing="cubicOut",
# Union[Numeric, JSFunc] 初始动画的延迟，默认值为 0。单位是毫秒1000
# 支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
animation_delay=0,
# Union[Numeric, JSFunc] 数据更新动画的时长，默认值为 300。
# 支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：
animation_duration_update=300,
# : Union[Numeric] 数据更新动画的缓动效果。
# 不同的缓动效果可以参考，缓动示例 (https://www.echartsjs.com/gallery/editor.html?c=line-easing)。
animation_easing_update="cubicOut",
# Union[Numeric, JSFunc] 数据更新动画的延迟，默认值为 0。
# 支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
animation_delay_update=0,
###############################################################################
)
),
)
# 添加x轴序列
# xdata = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
# xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
# xdata = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
# xdata=[6,5,4,3,2,1]
# ydata=[1,2,3,4,5,6]
# 1.xdata的list里的内容，如果是int类型，那么从0开始才会从第一格开始画图，如果是从1开始，就会从第二个开始画图，如果是从2开始，就会从第三格开始画图
# 若要从2开始，还想从1开始画图，那么就需要str类型
# 另外，如果xdata=[6,5,4,3,2,1]，那么会从第二个格子开始画图，并且ydata为倒序
# 为了避免错误，xdata尽量使用字符串list
line.add_xaxis(xdata)
# 添加x轴序列
# 顺序依次为：
# 1.数据名称（显示在图上的legend（序列名称）上的名字）为""时，在legend上不显示，
# 2.ydata为y轴的数据list，
# 3.z为使用overlap叠加多图时的图层顺序，0代表在最底层,
# 4.label_opts可以设置每一个y标签的属性，选择是否显示标签，也可以在set_series_opts里一次性设置所有的标签是否显示,需要注意的是，如果在下面set_series_opts里设置label会覆盖这里的设置
# 使用非链式编程，方便for循环加载y轴多个数据：
# for i in range(len(data)):
# line.add_yaxis("", data[i], z=i)
line.add_yaxis("ydata", ydata, z=0,
label_opts=opts.LabelOpts(
# 是否显示标签，也就是序列上的点的y值
is_show=True,
# Union[str, Sequence] 标签的位置。可选
# 'top'，'left'，'right'，'bottom'，'inside'，'insideLeft'，'insideRight'
# 'insideTop'，'insideBottom'， 'insideTopLeft'，'insideBottomLeft'
# 'insideTopRight'，'insideBottomRight'
position="top",
# : Optional[str] 文字的颜色。
# 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。默认None，可以是"#0000FF"，一般可以使用默认，跟legend保持一致
color="#0000FF",
# : Union[Numeric, Sequence, None] 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。默认None
# 经过自己的测试，只支持类似30或者-30之类，Sequence不知道指的是什么
distance=None,
# : Numeric 文字的字体大小
font_size=18,
# : Optional[str] 文字字体的风格，可选：
# 'normal'，'italic'（字体的斜体属性，当字体本身有斜体效果的时候有效，如果该字体没斜体效果就失效），'oblique（把字倾斜，不管字体有没有斜体属性都生效）'，None
font_style='oblique',
# : Optional[str] 文字字体的粗细，可选：
# 'normal'，'bold'，'bolder'前两个是粗，'lighter'这一个是细，None
font_weight='normal',
# : Optional[str] 文字的字体系列，使用时，小心字体侵权
# 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...None
font_family=None,
# : Optional[Numeric] 标签旋转。从 -90 度到 90 度。正值是逆时针。None
rotate=-30,
# ###################这些好像无效，前面的试了没用，后面两个不会试###########################################################
# : Optional[Numeric] 刻度标签与轴线之间的距离。
# 不知道干嘛用的，我试了改完数据没反映，不知道是不是不能作用在Line上，还是跟其他设置冲突了
margin=8,
# : Union[Numeric, str, None] 坐标轴刻度标签的显示间隔，在类目轴中有效。None
# 默认会采用标签不重叠的策略间隔显示标签。
# 可以设置成 0 强制显示所有标签。
# 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
# 可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
# (index:number, value: string) => boolean
# 第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。
interval=None,
# : Optional[str] 文字水平对齐方式，默认自动。可选：
# 'left'，'center'，'right'，None
horizontal_align='right',
# : Optional[str] 文字垂直对齐方式，默认自动。可选：
# 'top'，'middle'，'bottom'，None
vertical_align='bottom',
# : Optional[str] 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
# 也没测试，也不会用，不知道是不是有效果
formatter=None,
# : Optional[dict] 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
# 具体配置可以参考一下 https://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
# 好像功能很不错，不过不会用，也没试验，富文本为啥是dict格式的
rich=None,
# #######################################################################
),
itemstyle_opts=opts.ItemStyleOpts(
# 图形的颜色。: Optional[str] None
# 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，
# 可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。
# 除了纯色之外颜色也支持渐变色和纹理填充
#
# 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，
# 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
# color: {
# type: 'linear',
# x: 0,
# y: 0,
# x2: 0,
# y2: 1,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜色
# }, {
# offset: 1, color: 'blue' // 100% 处的颜色
# }],
# global: false // 缺省为 false
# }
#
# 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
# color: {
# type: 'radial',
# x: 0.5,
# y: 0.5,
# r: 0.5,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜色
# }, {
# offset: 1, color: 'blue' // 100% 处的颜色
# }],
# global: false // 缺省为 false
# }
#
# 纹理填充
# color: {
# image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
# repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
# }
color=None,
# 不知道阴线是什么，改了看不出来效果，有可能是用在K线一类的图里的吧
# : Optional[str] 阴线 图形的颜色。None
color0=None,
# 描边指的是每根线的数据点的圆圈，鼠标放上去时会放大
# : Optional[str] 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
border_color=None,
# : Optional[str] 阴线 图形的描边颜色。
border_color0=None,
# : Optional[Numeric] 描边宽度，默认不描边。
border_width=None,
# : Optional[str] 支持 'dashed', 'dotted'。None
border_type=None,
# : Optional[Numeric] 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。对于线好像没用，应该只能用在有面积的图里
opacity=None,
# : Optional[str] 区域的颜色。 有可能用在面积图里吧，还不确定，需要用的时候再试试
area_color=None,
),
linestyle_opts=opts.LineStyleOpts(
# : bool 是否显示,这里设置没有效果
is_show=True,
# : Numeric 线宽。
width=1,
# : Numeric 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
opacity=1,
# : Numeric 线的弯曲度，0 表示完全不弯曲，好像没效果
curve=0,
# : str 线的类型。可选：
# 'solid', 'dashed', 'dotted'
type_="solid",
# 线的颜色。: Union[str, Sequence, None]
# 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，
# 可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。
# 除了纯色之外颜色也支持渐变色和纹理填充
#
# 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，
# 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
# color: {
# type: 'linear',
# x: 0,
# y: 0,
# x2: 0,
# y2: 1,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜色
# }, {
# offset: 1, color: 'blue' // 100% 处的颜色
# }],
# global: false // 缺省为 false
# }
#
# 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
# color: {
# type: 'radial',
# x: 0.5,
# y: 0.5,
# r: 0.5,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜色
# }, {
# offset: 1, color: 'blue' // 100% 处的颜色
# }],
# global: false // 缺省为 false
# }
#
# 纹理填充
# color: {
# image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
# repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
# }
# 这里设置线的颜色不影响描边的颜色，就是数据的那个点点
color=None,
),
# 添加markpoint
markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="min")]),
# 数据是否有None 值，如果有就要设置，不然线会断
is_connect_nones=True,
#是否显示线上的点
is_symbol_show=False,
)
# 添加另外一条线做对比
line.add_yaxis("ydata2", ydata2, z=1, label_opts=opts.LabelOpts(is_show=False, ), )
# 在不满足默认风格时，自己设置序列的颜色，overlap时同样有效，会覆盖在ydata里设置过的颜色
# line.set_colors(
# ["#FF3030", "#0000FF"],
# )
line.set_series_opts(
# label_opts=opts.LabelOpts(
# is_show=False
# ),
markline_opts=opts.MarkLineOpts(
# : bool 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
is_silent=True,
# 标记线数据,x可以等于具体的第几个数据，类型为int，也可以为x轴的具体数据，类型为str，用什么lable就显示什么
data=[opts.MarkLineItem(x='markl'), opts.MarkLineItem(x='7')],
# : Optional[str] 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定，具体格式见 data.symbol。
# symbol 的几种样式 ：默认["circle","arrow"]。circle圆 | rect长方 | roundRect圆长方 | triangle三角 | diamond菱形 | pin大头针 | arrow箭头 | none没有
symbol=[None, None],
# : Union[None, Numeric] 标线两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
symbol_size=0,
# : int 标线数值的精度，在显示平均值线的时候有用。
precision=2,
# : LabelOpts 标签配置项，参考 `series_options.LabelOpts`
# label_opts=opts.LabelOpts(
# font_size=20,
# rotate=-30,
# ),
# 利用padding可以改变markline的标签显示位置,可以直接使用示例中的写法，第三位是Y轴的偏移，第四位是X轴的偏移
label_opts={"rotate": "-90", "fontSize": "15", "padding": [0, 0, -380, 50]},
# : Union[LineStyleOpts, dict, None] 标记线样式配置项，参考 `series_options.LineStyleOpts`
linestyle_opts=opts.LineStyleOpts(
color="#FF3030",
width=3,
),
),
# markpoint_opts=opts.MarkPointOpts(
# # : Sequence[Union[MarkPointItem, dict]] 标记点数据，参考 `series_options.MarkPointItem`
# # data= None,
# data=[opts.MarkPointItem(x='9'), opts.MarkPointItem(x='10')],
#
# # : Optional[str] 标记的图形。
# # ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle',
# # 'diamond', 'pin', 'arrow', 'none'
# # 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
# symbol='diamond',
#
# # : Union[None, Numeric] 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，
# # 例如 [20, 10] 表示标记宽为 20，高为 10。
# # 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：
# # (value: Array|number, params: Object) => number|Array
# # 其中第一个参数 value 为 data 中的数据值。第二个参数 params 是其它的数据项参数。
# # symbol_size= None,
# symbol_size=20,
# ),
)
line.set_global_opts(
tooltip_opts=opts.TooltipOpts(
is_show=True,
trigger="axis",
axis_pointer_type="cross"
),
title_opts=opts.TitleOpts(
title="主动买卖(日线)",
pos_left="left",
title_textstyle_opts={"fontSize": "15"},
padding=[30, 5]),
datazoom_opts=opts.DataZoomOpts(
range_start=None, range_end=None,
# start_value=len(xdata) - 7,
# end_value=len(xdata) - 1,
# type_="inside",
),
xaxis_opts=opts.AxisOpts(
axislabel_opts={"interval": "0", "rotate": "-0", "fontSize": "8"},
# 数据点是不是跟坐标轴的名字对齐
axistick_opts=opts.AxisTickOpts(is_align_with_label=True),
is_scale=False,
# 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。也就是让线定格显示
# 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，
# 标签和数据点都会在两个刻度之间的带(band)中间。
# 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围
# 可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：boundaryGap: ['20%', '20%']
boundary_gap=False,
),
yaxis_opts=opts.AxisOpts(
axislabel_opts={"fontSize": "8"}
),
legend_opts=opts.LegendOpts(
pos_left="center",
padding=[30, 5],
),
toolbox_opts=opts.ToolboxOpts(
is_show=False,
)
)
def mystrip(mylist): # 把语句中的空格和\n排除
templist = []
for i in range(len(mylist)):
templist.append(re.sub('\n|\t', '', mylist[i].strip()))
return templist
def txthtml2v(txthtml):
def mystripstr(mystr): # 把语句中的空格和\n排除
outstr = re.sub('\n|\t', '', mystr.strip())
return outstr
qian = '<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>'
obj = re.compile(r'<div.*?</script>', re.S)
div_script = obj.findall(txthtml)[0]
objdiv=re.compile(r'<div.*?</div>', re.S)
objscript=re.compile(r'<script.*?</script>', re.S)
divhtml=objdiv.findall(div_script)
objid=re.compile(r'id="(.*?)" class', re.S)
myid=objid.findall(divhtml[0])[0]
kebiandiv="""
<div style="max-width: 1200px;margin: 0 auto" class="cswcsclass" >
<script>
const w = document.getElementsByClassName("cswcsclass")[0].clientWidth;
document.write('<div id="""+ myid +""" class="chart-container" style="width:'+w+'px; height:'+w*0.6+'px;"></div>');
</script>
</div>
"""
scripthtml = objscript.findall(div_script)
zuizhonglist = qian + mystripstr(kebiandiv) + mystrip(scripthtml)[0]
return zuizhonglist
# file_path = 'E:\cs'
#
# txthtml=line.render_embed()
#
#
# outht=txthtml2v(txthtml)
# f = open(file_path+'/cs.html','w')
#
#
# f.write(outht)
#
# f.close()
# app = Flask(__name__)
#
#
# @app.route("/")
# def jyck():
# return outht
#
#
# app.run(host='172.18.20.181', port=5009)
# line.render("pyline.html")
make_snapshot(snapshot,line.render(),"cs1.jpeg")