pyecharts 大屏可视化学习

@pyecharts 大屏可视化学习，记录，总结
先看看效果

图表代码都是官网直接复制的，主要是为了学习方法，学习到底如何大屏布局。

参考学习

1.https://blog.csdn.net/bo_gu/article/details/104990907
2.https://blog.csdn.net/bo_gu/article/details/104990907
3.https://blog.csdn.net/qq_43613793/article/details/104268536

三个网站学习

以上3篇博客分别使用了三种方法进行大屏可视化的布局，都写得挺详细。

第一个和第二个都使用的是chart_config.json进行布局，只不过，第一个在初始化图表的时候指定了chart_id，而第二个没有指定所以是随机生成的。

第三个使用的是直接修改html（一开始挺抵触，就像0基础）。

因为知识不够广的缘故，才看第一篇的时候没太明白chart_config.json是个什么。因此看第二篇博客的时间长一些。

第二篇博客在初始化page时使用

page = Page(layout=Page.DraggablePageLayout)

这样在生成网页时，有如下图左上角标识-------Save Config
图标也是一个挨着一个的排排队，并且可以直接拖动，进行布局。

当布局好了之后，点击
就会自动生成并下载chart_config.json文件
接着再执行

page.save_resize_html("test.html",
                       cfg_file="chart_config .json",
                       dest="my_test.html")

不过一定要记得将上一步的page.render("test.html")注释掉。
学习的时候使用是用Pycharm编写的，就给忘记了
啊啊啊，我的心

这个看起来是挺不错，直接拖动就能布局，似乎不太了解html也能上手！！！

不过不过，万事万物总有缺点。

我添加的图表顺序如下

page.add(draw_bar("北向资金.csv"),#26
         draw_pe(df_pe), #pe 27
         draw_map(df_map),#28
         draw_pie(df_bar),#行业流入饼图 29
         draw_line(df_line),#MACD和均线 30
         )

当生成html文件时，自然也会按着这个顺序添加
所以所以
当拖动图片的时候，有两个缺点

缺点一：
图1总是在图2下面，有时候因为图的类型这些就不是很美观，当然不排除，你就是按着图片的大小依次排版，不需要叠加情况。如下图所示：

所以建议是，当page.add()添加图片时，适当考虑一下添加图表的顺序。

缺点二：
假设我的图2已经放在应该放的位置，如下图所示：

当我要改变图1大小时，便会有如下情况

我的图2跟着往上跑了

所以排版时，要按着图片顺序进行排版。
我当时总共有六个图表，也不算是很多，就按着心情进行排版，可真的是一言难尽。

接着我便结合着第一个网址和第二个网址，先进行排版，再保存下来的
chart_config .json修改id 接着使用第一博客的办法，
稍微好了一点，至少不会出现忘记注释就都没了的情况。

还是比较推荐第三个博客的方法，直接修改html
这个时候layout=Page.DraggablePageLayout就需要去掉了，直接使用page = Page()
不然不使用page.save_resize_html()好像那个图片的虚线就会一直在着。

或许，有的同学会说，没接触html,完全看不懂，怎么办呢，
别担心，使用此方法不需要完全懂html
根据上面的经验我们只需要知道2点
其一，如下我们需要一一对应。

其二，left，指的是图片左边到左边的距离，top，指的是图片头到最上边的距离。

有了这两点，我们现在开始来布局，假设我们有6个图表，一个标题，首先想想该怎么放

我是这样放的，
想好布局比较容易知道图表占多少（把这个图长和宽都看作1，便是百分比了）。大概布局弄好后，就算有不满意的地方，也仅仅只是微调，不是那么大费周章。

接上代码

首先，图表部分

from pyecharts import options as opts
from pyecharts.charts import Bar,Boxplot,Gauge,Map,Pie,HeatMap,Page
from pyecharts.faker import Faker
import random

def bar(): #柱状图
    c = (
        Bar()
            .add_xaxis(Faker.choose())
            .add_yaxis("商家A", Faker.values(), stack="stack1")
            .add_yaxis("商家B", Faker.values(), stack="stack1")
            .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar"))
            #.render("bar_stack0.html")
    )
    return c
def box():#箱状图
    v1 = [
        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980],
        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790],
    ]
    v2 = [
        [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920],
        [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870],
    ]
    c = Boxplot()
    c.add_xaxis(["expr1", "expr2"])
    c.add_yaxis("A", c.prepare_data(v1))
    c.add_yaxis("B", c.prepare_data(v2))
    c.set_global_opts(title_opts=opts.TitleOpts(title="BoxPlot-基本示例"))
    #c.render("boxplot_base.html")
    return c

def gau():#仪表图
    c = (
        Gauge(init_opts=opts.InitOpts(width="1600px", height="800px"))
            .add(series_name="业务指标", data_pair=[["完成率", 55.5]])
            .set_global_opts(
            legend_opts=opts.LegendOpts(is_show=False),
            tooltip_opts=opts.TooltipOpts(is_show=True, formatter="{a} <br/>{b} : {c}%"),
        )
            #.render("gauge.html")
    )
    return c

def maps():#地图
    c = (
        Map()
            .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
            .set_global_opts(title_opts=opts.TitleOpts(title="Map-基本示例"))
            #.render("map_base.html")
    )
    return c

def pie():#饼图
    c = (
        Pie()
            .add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
            .set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"])
            .set_global_opts(title_opts=opts.TitleOpts(title=""))
            .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
            #.render("pie_set_color.html")
    )
    return c

def heat():#热力图
    value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
    c = (
        HeatMap()
            .add_xaxis(Faker.clock)
            .add_yaxis("series0", Faker.week, value)
            .set_global_opts(
            title_opts=opts.TitleOpts(title="HeatMap-基本示例"),
            visualmap_opts=opts.VisualMapOpts(),
        )
            #.render("heatmap_base.html")
    )
    return c

def tab1(name,color): #作为标题吧
    c = (Pie().
        set_global_opts(
        title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
                                title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=35))))
    return c

page = Page()
page.add(tab1("pyecharts可视化大屏","#FF00FF"),
         gau(),
         heat(),
         maps(),
         bar(),
         box(),
         pie())
page.render("mytest.html")

效果如下（后面还有几个图，太长了，就大概这样）

重点部分

from bs4 import BeautifulSoup
with open("mytest.html", "r+", encoding='utf-8') as html:
    html_bf = BeautifulSoup(html, 'lxml')
    divs = html_bf.select('.chart-container')
    divs[0]["style"] = "width:40%;height:10%;position:absolute;top:0;left:30%;"
    divs[1]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:30%;"
    divs[2]["style"] = "width:40%;height:50%;position:absolute;top:50%;left:30%;"
    divs[3]["style"] = "width:30%;height:50%;position:absolute;top:0;left:0;"
    divs[4][ "style"] = "width:30%;height:50%;position:absolute;top:50%;left:0;"
    divs[5]["style"] = "width:30%;height:50%;position:absolute;top:0;left:70%;"
    divs[6]['style'] = "width:30%;height:50%;position:absolute;top:50%;left:70%;"
    body = html_bf.find("body")
    body["style"] = "background-color:#FFFFFF;"  # 背景颜色
    html_new = str(html_bf)
    html.seek(0, 0)
    html.truncate()
    html.write(html_new)
    html.close()

来解析一句

 divs[0]["style"] = "width:40%;height:10%;position:absolute;top:0;left:30%;"

这一句变对应我们的标题，top,和left在上面已经解释过，
那也就是还有width，height，图表宽高
以及position，位置。

到此结束