def render_datazoom():
with st.echo("below"):
data = [
["14.616", "7.241", "0.896"],
["3.958", "5.701", "0.955"],
["2.768", "8.971", "0.669"],
["9.051", "9.710", "0.171"],
["14.046", "4.182", "0.536"],
["12.295", "1.429", "0.962"],
["4.417", "8.167", "0.113"],
["0.492", "4.771", "0.785"],
["7.632", "2.605", "0.645"],
["14.242", "5.042", "0.368"],
]
option_js = {
"xAxis": {"type": "value"},
"yAxis": {"type": "value"},
"dataZoom": [{"type": "slider", "start": 10, "end": 60}],
"series": [
{
"type": "scatter",
"itemStyle": {"opacity": 0.8},
"symbolSize": JsCode(
"""function (val) { return val[2] * 40; }"""
).js_code,
"data": data,
}
],
}
st_echarts(options=option_js)
def render_disk_usage():
with open("./data/disk.tree.json", "r") as f:
diskData = json.loads(f.read())
option = {
"title": {
"text": "Disk Usage",
"left": "center"
},
"tooltip": {
"formatter":
JsCode(
"function(info){var value=info.value;var treePathInfo=info.treePathInfo;var treePath=[];for(var i=1;i<treePathInfo.length;i+=1){treePath.push(treePathInfo[i].name)}return['<div class=\"tooltip-title\">'+treePath.join('/')+'</div>','Disk Usage: '+ value +' KB'].join('')};"
).js_code,
},
"series": [{
"name":
"Disk Usage",
"type":
"treemap",
"visibleMin":
300,
"label": {
"show": True,
"formatter": "{b}"
},
"itemStyle": {
"borderColor": "#fff"
},
"levels": [
{
"itemStyle": {
"borderWidth": 0,
"gapWidth": 5
}
},
{
"itemStyle": {
"gapWidth": 1
}
},
{
"colorSaturation": [0.35, 0.5],
"itemStyle": {
"gapWidth": 1,
"borderColorSaturation": 0.6
},
},
],
"data":
diskData,
}],
}
st_echarts(option, height="500px")
def render_js_py():
with st.echo("below"):
st.markdown(
"""Overwrite chart colors with JS.
Under 50 : red. Between 50 - 100 : blue. Over 100 : green"""
)
color_function = """
function (params) {
if (params.value > 0 && params.value < 50) {
return 'red';
} else if (params.value > 50 && params.value < 100) {
return 'blue';
}
return 'green';
}
"""
c = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis(
"商家A",
Faker.values(),
itemstyle_opts=opts.ItemStyleOpts(color=JsCode(color_function)),
)
.add_yaxis(
"商家B",
Faker.values(),
itemstyle_opts=opts.ItemStyleOpts(color=JsCode(color_function)),
)
.add_yaxis(
"商家C",
Faker.values(),
itemstyle_opts=opts.ItemStyleOpts(color=JsCode(color_function)),
)
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-自定义柱状颜色"))
)
st_pyecharts(c)
def render_scatter_single_axis():
hours = [
"12a",
"1a",
"2a",
"3a",
"4a",
"5a",
"6a",
"7a",
"8a",
"9a",
"10a",
"11a",
"12p",
"1p",
"2p",
"3p",
"4p",
"5p",
"6p",
"7p",
"8p",
"9p",
"10p",
"11p",
]
days = [
"Saturday",
"Friday",
"Thursday",
"Wednesday",
"Tuesday",
"Monday",
"Sunday",
]
data = [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[0, 11, 2],
[0, 12, 4],
[0, 13, 1],
[0, 14, 1],
[0, 15, 3],
[0, 16, 4],
[0, 17, 6],
[0, 18, 4],
[0, 19, 4],
[0, 20, 3],
[0, 21, 3],
[0, 22, 2],
[0, 23, 5],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],
[1, 5, 0],
[1, 6, 0],
[1, 7, 0],
[1, 8, 0],
[1, 9, 0],
[1, 10, 5],
[1, 11, 2],
[1, 12, 2],
[1, 13, 6],
[1, 14, 9],
[1, 15, 11],
[1, 16, 6],
[1, 17, 7],
[1, 18, 8],
[1, 19, 12],
[1, 20, 5],
[1, 21, 5],
[1, 22, 7],
[1, 23, 2],
[2, 0, 1],
[2, 1, 1],
[2, 2, 0],
[2, 3, 0],
[2, 4, 0],
[2, 5, 0],
[2, 6, 0],
[2, 7, 0],
[2, 8, 0],
[2, 9, 0],
[2, 10, 3],
[2, 11, 2],
[2, 12, 1],
[2, 13, 9],
[2, 14, 8],
[2, 15, 10],
[2, 16, 6],
[2, 17, 5],
[2, 18, 5],
[2, 19, 5],
[2, 20, 7],
[2, 21, 4],
[2, 22, 2],
[2, 23, 4],
[3, 0, 7],
[3, 1, 3],
[3, 2, 0],
[3, 3, 0],
[3, 4, 0],
[3, 5, 0],
[3, 6, 0],
[3, 7, 0],
[3, 8, 1],
[3, 9, 0],
[3, 10, 5],
[3, 11, 4],
[3, 12, 7],
[3, 13, 14],
[3, 14, 13],
[3, 15, 12],
[3, 16, 9],
[3, 17, 5],
[3, 18, 5],
[3, 19, 10],
[3, 20, 6],
[3, 21, 4],
[3, 22, 4],
[3, 23, 1],
[4, 0, 1],
[4, 1, 3],
[4, 2, 0],
[4, 3, 0],
[4, 4, 0],
[4, 5, 1],
[4, 6, 0],
[4, 7, 0],
[4, 8, 0],
[4, 9, 2],
[4, 10, 4],
[4, 11, 4],
[4, 12, 2],
[4, 13, 4],
[4, 14, 4],
[4, 15, 14],
[4, 16, 12],
[4, 17, 1],
[4, 18, 8],
[4, 19, 5],
[4, 20, 3],
[4, 21, 7],
[4, 22, 3],
[4, 23, 0],
[5, 0, 2],
[5, 1, 1],
[5, 2, 0],
[5, 3, 3],
[5, 4, 0],
[5, 5, 0],
[5, 6, 0],
[5, 7, 0],
[5, 8, 2],
[5, 9, 0],
[5, 10, 4],
[5, 11, 1],
[5, 12, 5],
[5, 13, 10],
[5, 14, 5],
[5, 15, 7],
[5, 16, 11],
[5, 17, 6],
[5, 18, 0],
[5, 19, 5],
[5, 20, 3],
[5, 21, 4],
[5, 22, 2],
[5, 23, 0],
[6, 0, 1],
[6, 1, 0],
[6, 2, 0],
[6, 3, 0],
[6, 4, 0],
[6, 5, 0],
[6, 6, 0],
[6, 7, 0],
[6, 8, 0],
[6, 9, 0],
[6, 10, 1],
[6, 11, 0],
[6, 12, 2],
[6, 13, 1],
[6, 14, 3],
[6, 15, 4],
[6, 16, 0],
[6, 17, 0],
[6, 18, 0],
[6, 19, 0],
[6, 20, 1],
[6, 21, 2],
[6, 22, 2],
[6, 23, 6],
]
option = {
"tooltip": {
"position": "top"
},
"title": [{
"textBaseline": "middle",
"top": f"{(idx + 0.5) * 100 / 7}%",
"text": day
} for idx, day in enumerate(days)],
"singleAxis": [{
"left": 150,
"type": "category",
"boundaryGap": False,
"data": hours,
"top": f"{(idx * 100 / 7 + 5)}%",
"height": f"{(100 / 7 - 10)}%",
"axisLabel": {
"interval": 2
},
} for idx, _ in enumerate(days)],
"series": [{
"singleAxisIndex":
idx,
"coordinateSystem":
"singleAxis",
"type":
"scatter",
"data": [],
"symbolSize":
JsCode("function(dataItem){return dataItem[1]*4}").js_code,
} for idx, _ in enumerate(days)],
}
for dataItem in data:
option["series"][dataItem[0]]["data"].append(
[dataItem[1], dataItem[2]])
st_echarts(options=option, height="600px")
def render_waterfall_chart():
options = {
"title": {
"text": "阶梯瀑布图",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/Aj1J2x5a5",
},
"tooltip": {
"trigger":
"axis",
"axisPointer": {
"type": "shadow"
},
"formatter":
JsCode(
"function(params){var tar;if(params[1].value!=='-'){tar=params[1]}else{tar=params[0]}return tar.name+'<br/>'+tar.seriesName+' : '+tar.value}"
).js_code,
},
"legend": {
"data": ["支出", "收入"]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": True
},
"xAxis": {
"type": "category",
"splitLine": {
"show": False
},
"data": [f"11月 {i} 日" for i in range(1, 12)],
},
"yAxis": {
"type": "value"
},
"series": [
{
"name":
"辅助",
"type":
"bar",
"stack":
"总量",
"itemStyle": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)",
},
"emphasis": {
"itemStyle": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)",
}
},
"data":
[0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
},
{
"name": "收入",
"type": "bar",
"stack": "总量",
"label": {
"show": True,
"position": "top"
},
"data":
[900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"],
},
{
"name": "支出",
"type": "bar",
"stack": "总量",
"label": {
"show": True,
"position": "bottom"
},
"data":
["-", "-", "-", 108, 154, "-", "-", "-", 119, 361, 203],
},
],
}
st_echarts(options=options, height="500px")
def render_line_race():
with open("./data/life-expectancy-table.json") as f:
raw_data = json.load(f)
countries = [
"Finland",
"France",
"Germany",
"Iceland",
"Norway",
"Poland",
"Russia",
"United Kingdom",
]
datasetWithFilters = [{
"id": f"dataset_{country}",
"fromDatasetId": "dataset_raw",
"transform": {
"type": "filter",
"config": {
"and": [
{
"dimension": "Year",
"gte": 1950
},
{
"dimension": "Country",
"=": country
},
]
},
},
} for country in countries]
seriesList = [{
"type": "line",
"datasetId": f"dataset_{country}",
"showSymbol": False,
"name": country,
"endLabel": {
"show":
True,
"formatter":
JsCode(
"function (params) { return params.value[3] + ': ' + params.value[0];}"
).js_code,
},
"labelLayout": {
"moveOverlap": "shiftY"
},
"emphasis": {
"focus": "series"
},
"encode": {
"x": "Year",
"y": "Income",
"label": ["Country", "Income"],
"itemName": "Year",
"tooltip": ["Income"],
},
} for country in countries]
option = {
"animationDuration": 10000,
"dataset": [{
"id": "dataset_raw",
"source": raw_data
}] + datasetWithFilters,
"title": {
"text": "Income in Europe since 1950"
},
"tooltip": {
"order": "valueDesc",
"trigger": "axis"
},
"xAxis": {
"type": "category",
"nameLocation": "middle"
},
"yAxis": {
"name": "Income"
},
"grid": {
"right": 140
},
"series": seriesList,
}
st_echarts(options=option, height="600px")
def render_usa():
formatter = JsCode(
"function (params) {"
+ "var value = (params.value + '').split('.');"
+ "value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');"
+ "return params.seriesName + '<br/>' + params.name + ': ' + value;}"
).js_code
with open("./data/USA.json", "r") as f:
map = Map(
"USA",
json.loads(f.read()),
{
"Alaska": {"left": -131, "top": 25, "width": 15},
"Hawaii": {"left": -110, "top": 28, "width": 5},
"Puerto Rico": {"left": -76, "top": 26, "width": 2},
},
)
options = {
"title": {
"text": "USA Population Estimates (2012)",
"subtext": "Data from www.census.gov",
"sublink": "http://www.census.gov/popest/data/datasets.html",
"left": "right",
},
"tooltip": {
"trigger": "item",
"showDelay": 0,
"transitionDuration": 0.2,
"formatter": formatter,
},
"visualMap": {
"left": "right",
"min": 500000,
"max": 38000000,
"inRange": {
"color": [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026",
]
},
"text": ["High", "Low"],
"calculable": True,
},
"toolbox": {
"show": True,
"left": "left",
"top": "top",
"feature": {
"dataView": {"readOnly": False},
"restore": {},
"saveAsImage": {},
},
},
"series": [
{
"name": "USA PopEstimates",
"type": "map",
"roam": True,
"map": "USA",
"emphasis": {"label": {"show": True}},
"textFixed": {"Alaska": [20, -20]},
"data": [
{"name": "Alabama", "value": 4822023},
{"name": "Alaska", "value": 731449},
{"name": "Arizona", "value": 6553255},
{"name": "Arkansas", "value": 2949131},
{"name": "California", "value": 38041430},
{"name": "Colorado", "value": 5187582},
{"name": "Connecticut", "value": 3590347},
{"name": "Delaware", "value": 917092},
{"name": "District of Columbia", "value": 632323},
{"name": "Florida", "value": 19317568},
{"name": "Georgia", "value": 9919945},
{"name": "Hawaii", "value": 1392313},
{"name": "Idaho", "value": 1595728},
{"name": "Illinois", "value": 12875255},
{"name": "Indiana", "value": 6537334},
{"name": "Iowa", "value": 3074186},
{"name": "Kansas", "value": 2885905},
{"name": "Kentucky", "value": 4380415},
{"name": "Louisiana", "value": 4601893},
{"name": "Maine", "value": 1329192},
{"name": "Maryland", "value": 5884563},
{"name": "Massachusetts", "value": 6646144},
{"name": "Michigan", "value": 9883360},
{"name": "Minnesota", "value": 5379139},
{"name": "Mississippi", "value": 2984926},
{"name": "Missouri", "value": 6021988},
{"name": "Montana", "value": 1005141},
{"name": "Nebraska", "value": 1855525},
{"name": "Nevada", "value": 2758931},
{"name": "New Hampshire", "value": 1320718},
{"name": "New Jersey", "value": 8864590},
{"name": "New Mexico", "value": 2085538},
{"name": "New York", "value": 19570261},
{"name": "North Carolina", "value": 9752073},
{"name": "North Dakota", "value": 699628},
{"name": "Ohio", "value": 11544225},
{"name": "Oklahoma", "value": 3814820},
{"name": "Oregon", "value": 3899353},
{"name": "Pennsylvania", "value": 12763536},
{"name": "Rhode Island", "value": 1050292},
{"name": "South Carolina", "value": 4723723},
{"name": "South Dakota", "value": 833354},
{"name": "Tennessee", "value": 6456243},
{"name": "Texas", "value": 26059203},
{"name": "Utah", "value": 2855287},
{"name": "Vermont", "value": 626011},
{"name": "Virginia", "value": 8185867},
{"name": "Washington", "value": 6897012},
{"name": "West Virginia", "value": 1855413},
{"name": "Wisconsin", "value": 5726398},
{"name": "Wyoming", "value": 576412},
{"name": "Puerto Rico", "value": 3667084},
],
}
],
}
st_echarts(options, map=map)