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)