pyecharts 大屏可视化学习记录总结先看看效果图表代码都是官网直接复制的主要是为了学习方法学习到底如何大屏布局。参考学习1.https://blog.csdn.net/bo_gu/article/details/1049909072.https://blog.csdn.net/bo_gu/article/details/1049909073.https://blog.csdn.net/qq_43613793/article/details/104268536三个网站学习以上3篇博客分别使用了三种方法进行大屏可视化的布局都写得挺详细。第一个和第二个都使用的是chart_config.json进行布局只不过第一个在初始化图表的时候指定了chart_id而第二个没有指定所以是随机生成的。第三个使用的是直接修改html一开始挺抵触就像0基础。因为知识不够广的缘故才看第一篇的时候没太明白chart_config.json是个什么。因此看第二篇博客的时间长一些。第二篇博客在初始化page时使用pagePage(layoutPage.DraggablePageLayout)这样在生成网页时有如下图左上角标识-------Save Config图标也是一个挨着一个的排排队并且可以直接拖动进行布局。当布局好了之后点击就会自动生成并下载chart_config.json文件接着再执行page.save_resize_html(test.html,cfg_filechart_config .json,destmy_test.html)不过一定要记得将上一步的page.render(test.html)注释掉。学习的时候使用是用Pycharm编写的就给忘记了啊啊啊我的心这个看起来是挺不错直接拖动就能布局似乎不太了解html也能上手不过不过万事万物总有缺点。我添加的图表顺序如下page.add(draw_bar(北向资金.csv),#26draw_pe(df_pe),#pe 27draw_map(df_map),#28draw_pie(df_bar),#行业流入饼图 29draw_line(df_line),#MACD和均线 30)当生成html文件时自然也会按着这个顺序添加所以所以当拖动图片的时候有两个缺点缺点一图1总是在图2下面有时候因为图的类型这些就不是很美观当然不排除你就是按着图片的大小依次排版不需要叠加情况。如下图所示所以建议是当page.add()添加图片时适当考虑一下添加图表的顺序。缺点二假设我的图2已经放在应该放的位置如下图所示当我要改变图1大小时便会有如下情况我的图2跟着往上跑了所以排版时要按着图片顺序进行排版。我当时总共有六个图表也不算是很多就按着心情进行排版可真的是一言难尽。接着我便结合着第一个网址和第二个网址先进行排版再保存下来的chart_config .json修改id 接着使用第一博客的办法稍微好了一点至少不会出现忘记注释就都没了的情况。还是比较推荐第三个博客的方法直接修改html这个时候layoutPage.DraggablePageLayout就需要去掉了直接使用page Page()不然不使用page.save_resize_html()好像那个图片的虚线就会一直在着。或许有的同学会说没接触html,完全看不懂怎么办呢别担心使用此方法不需要完全懂html根据上面的经验我们只需要知道2点其一如下我们需要一一对应。其二left指的是图片左边到左边的距离top指的是图片头到最上边的距离。有了这两点我们现在开始来布局假设我们有6个图表一个标题首先想想该怎么放我是这样放的想好布局比较容易知道图表占多少把这个图长和宽都看作1便是百分比了。大概布局弄好后就算有不满意的地方也仅仅只是微调不是那么大费周章。接上代码首先图表部分frompyechartsimportoptionsasoptsfrompyecharts.chartsimportBar,Boxplot,Gauge,Map,Pie,HeatMap,Pagefrompyecharts.fakerimportFakerimportrandomdefbar():#柱状图c(Bar().add_xaxis(Faker.choose()).add_yaxis(商家A,Faker.values(),stackstack1).add_yaxis(商家B,Faker.values(),stackstack1).set_series_opts(label_optsopts.LabelOpts(is_showFalse)).set_global_opts(title_optsopts.TitleOpts(titleBar))#.render(bar_stack0.html))returncdefbox():#箱状图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],]cBoxplot()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_optsopts.TitleOpts(titleBoxPlot-基本示例))#c.render(boxplot_base.html)returncdefgau():#仪表图c(Gauge(init_optsopts.InitOpts(width1600px,height800px)).add(series_name业务指标,data_pair[[完成率,55.5]]).set_global_opts(legend_optsopts.LegendOpts(is_showFalse),tooltip_optsopts.TooltipOpts(is_showTrue,formatter{a} br/{b} : {c}%),)#.render(gauge.html))returncdefmaps():#地图c(Map().add(商家A,[list(z)forzinzip(Faker.provinces,Faker.values())],china).set_global_opts(title_optsopts.TitleOpts(titleMap-基本示例))#.render(map_base.html))returncdefpie():#饼图c(Pie().add(,[list(z)forzinzip(Faker.choose(),Faker.values())]).set_colors([blue,green,yellow,red,pink,orange,purple]).set_global_opts(title_optsopts.TitleOpts(title)).set_series_opts(label_optsopts.LabelOpts(formatter{b}: {c}))#.render(pie_set_color.html))returncdefheat():#热力图value[[i,j,random.randint(0,50)]foriinrange(24)forjinrange(7)]c(HeatMap().add_xaxis(Faker.clock).add_yaxis(series0,Faker.week,value).set_global_opts(title_optsopts.TitleOpts(titleHeatMap-基本示例),visualmap_optsopts.VisualMapOpts(),)#.render(heatmap_base.html))returncdeftab1(name,color):#作为标题吧c(Pie().set_global_opts(title_optsopts.TitleOpts(titlename,pos_leftcenter,pos_topcenter,title_textstyle_optsopts.TextStyleOpts(colorcolor,font_size35))))returnc pagePage()page.add(tab1(pyecharts可视化大屏,#FF00FF),gau(),heat(),maps(),bar(),box(),pie())page.render(mytest.html)效果如下后面还有几个图太长了就大概这样重点部分frombs4importBeautifulSoupwithopen(mytest.html,r,encodingutf-8)ashtml:html_bfBeautifulSoup(html,lxml)divshtml_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%;bodyhtml_bf.find(body)body[style]background-color:#FFFFFF;# 背景颜色html_newstr(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在上面已经解释过那也就是还有widthheight图表宽高以及position位置。到此结束