streamlit_echarts的理解

由于本人没有找到相关的文档(找到了一些 但是很不完整)

所以就分析别人的代码 一点一点改动查看其作用

1.  
   options = {
2.  
   #这里控制标题 left控制其位置
3.  
   "title": {"text": "某站点用户访问来源", "subtext": "纯属虚构", "left": "center"},
4.  
   #这里是提示 trigger的值都填写item吧 就是鼠标放在上面显示的春夏秋冬和对应的值
5.  
   "tooltip": {"trigger": "item"},
6.  
   #这里的orient代表左侧对应颜色标识的摆放方式 legend:{}代表默认
7.  
   "legend": {"orient": "vertical", "left": "top",},
8.  
   #这里是数据集 如果用字典格式就把数据写在series下的data里面(详情见下面代码)
9.  
   "dataset": {
10.  
    "source": [
11.  
    ['销量', '2015'],
12.  
    ['春天', 56.5],
13.  
    ['夏天', 51.1],
14.  
    ['秋天', 40.1],
15.  
    ['冬天', 25.2]
16.  
    ]
17.  
    },
18.  
    "series": [
19.  
    {
20.  
    #鼠标放置显示的提示
21.  
    "name": "季节",
22.  
    #以什么方式展现 bar是柱状图 line是线状图 这里没绘制xy肯定只能pie
23.  
    "type": "pie",
24.  
    #变更饼状图显示的大小 就直接"radius": 50% 下方第二个参数改变空心大小
25.  
    #第二个参数是根据第一个参数来改变的
26.  
    "radius": ['30%', '5%'],
27.  
    #饼状图位置 距离x 距离y
28.  
    "center": ['50%', '60%'],
29.  
    #显示每个对应饼块的提示 下面的a=name(季节)b=春夏秋冬c=春夏秋冬和对应的值
30.  
    #d=值占比
31.  
    "label":{
32.  
    "formatter": '{b}: {@2015} ({d}%)'
33.  
    },
34.  
     
35.  
    "emphasis": {
36.  
    "itemStyle": {
37.  
    "shadowBlur": 10,
38.  
    "shadowOffsetX": 0,
39.  
    "shadowColor": "rgba(0, 0, 0, 0.5)",
40.  
    }
41.  
    },
42.  
    }
43.  
    ],
44.  
    }
45.  
    st_echarts(options=options, height="600px",)

如果以字典形式放置数据 就要把下方的格式数据放在series里面

1.  
   "data": [
2.  
   {"value": 1048, "name": "搜索引擎"},
3.  
   {"value": 735, "name": "直接访问"},
4.  
   {"value": 580, "name": "邮件营销"},
5.  
   {"value": 484, "name": "联盟广告"},
6.  
   {"value": 300, "name": "视频广告"},
7.  
   ]

官方在线demo演示地址stremlit_echaets-demo

下面再记录下 柱状图 看了官方的demo不是很清楚 比如 我给的是列表集而文档是给的分开的字典  柱状的对应颜色如何更改  就比较烦心 所以我对streamlit公众号里的作者代码进行了精简 作者代码是饼状图柱状图合并的 我最后改变参数让他只显示 柱状图 当然 你也可以让他只显示饼状图 所以这段代码稍修改 就可以实现

1.  
   option = {
2.  
   "tooltip": {"trigger": 'item',
3.  
   },
4.  
   "legend": {},
5.  
   "dataset": {
6.  
   "source": [
7.  
   #这里的第一个列表第二索引必须要有值 否则顶部选择项会把值也当选项
8.  
   ['销量', '数量'],
9.  
   ['春天', 56.5],
10.  
    ['夏天', 51.1],
11.  
    ['秋天', 40.1],
12.  
    ['冬天', 25.2]
13.  
    ]
14.  
    },
15.  
    "xAxis": {"type": 'category'},
16.  
    "yAxis": {"gridIndex": 0},
17.  
    "series": [
18.  
    #对应着列表集里面有多少个
19.  
    {"type": 'bar', "smooth": "true", "seriesLayoutBy": 'row', "emphasis": {"focus": 'series'}},
20.  
    {"type": 'bar', "smooth": "true", "seriesLayoutBy": 'row', "emphasis": {"focus": 'series'}},
21.  
    {"type": 'bar', "smooth": "true", "seriesLayoutBy": 'row', "emphasis": {"focus": 'series'}},
22.  
    {"type": 'bar', "smooth": "true", "seriesLayoutBy": 'row', "emphasis": {"focus": 'series'}},
23.  
    {
24.  
    #这个是类型饼状图 不可删除
25.  
    "type": 'pie',
26.  
    "emphasis": {"focus": 'data'},
27.  
    #这里是饼状图的参数 不可删除 value值不存在就会消失饼状图 或者只要和上方第一个列表第二值不同就可以
28.  
    "encode": {
29.  
    "itemName": '',
30.  
    "value": '',
31.  
    #这里控制饼抓状图显示的数量的
32.  
    "tooltip": '',
33.  
    "label":""
34.  
     
35.  
    }
36.  
    }
37.  
    ],
38.  
    #这里是柱状图的显示数量的 写在series外
39.  
    "tooltip": {
40.  
    "show": "true",
41.  
    },
42.  
    "label": {
43.  
    "show":"true"
44.  
    };

1.  
   sysmenu = '''
2.  
   <style>
3.  
   #MainMenu {visibility:hidden;}
4.  
   footer {visibility:hidden;}
5.  
   '''
6.  
   st.markdown(sysmenu,unsafe_allow_html=True)

上方这段代码可以屏蔽下方的streamlit的属性

这篇好文章是转载于：学新通技术网