diff --git a/controllers/echarts.py b/controllers/echarts.py
index e90b717602935ee61477aee4ff60c8503ad13e5e..247971da1831ed8ae83c37c693847620fcf13c0c 100755
--- a/controllers/echarts.py
+++ b/controllers/echarts.py
@@ -3,6 +3,7 @@ import json
 import random
 from pyecharts.charts import Bar
 from pyecharts import options as opts
+from pyecharts.globals import ThemeType
 
 import logging
 
@@ -12,10 +13,15 @@ _logger = logging.getLogger(__name__)
 class PyEcharts(http.Controller):
     @http.route('/pyecharts', auth='public', type='http', cors='*', methods=['POST', 'GET'], csrf=False)
     def pyecharts(self):
-        return json.dumps(json.loads(bar_base()))
+        return json.dumps({
+            'bar1': json.loads(bar1_base()),
+            'bar2': json.loads(bar2_base()),
+            'bar3': json.loads(bar3_base()),
+            'bar4': json.loads(bar4_base()),
+        })
 
 
-def bar_base():
+def bar1_base():
     c = (
         Bar()
             .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
@@ -25,3 +31,37 @@ def bar_base():
             .dump_options_with_quotes()
     )
     return c
+
+
+def bar3_base():
+    c = (
+        Bar(init_opts=opts.InitOpts(theme=ThemeType.WALDEN))
+            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
+            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
+            .add_yaxis("商家B", [15, 6, 45, 20, 35, 66])
+            .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
+            .dump_options_with_quotes()
+    )
+    return c
+
+
+def bar2_base():
+    c = (
+        Bar()
+            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
+            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
+            .dump_options_with_quotes()
+    )
+    return c
+
+
+def bar4_base():
+    c = (
+        Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
+            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
+            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
+            .add_yaxis("商家B", [15, 6, 45, 20, 35, 66])
+            .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
+            .dump_options_with_quotes()
+    )
+    return c
diff --git a/static/img/example.jpg b/static/img/example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e6e7537a61e70f8541944923aa4b4c63c3309823
Binary files /dev/null and b/static/img/example.jpg differ
diff --git a/static/src/xml/load_echarts_bar.xml b/static/src/xml/load_echarts_bar.xml
index 715c66e62030cf4568fe7b07b2101ed2f7360374..ec07c0e8abddbc37e0ba5507b778aabfd0ec2272 100755
--- a/static/src/xml/load_echarts_bar.xml
+++ b/static/src/xml/load_echarts_bar.xml
@@ -2,14 +2,30 @@
 <templates id='template' xml:space='preserve'>
     <t t-name="echarts_bar_template">
         <div id="main" style="width:100%; height:100%;">
-            <div id="bar" style="width:1000px; height:600px;"></div>
+            <div class="row">
+                <div class="col-md-6">
+                    <div id="bar1" style="width:100%; height:450px;"></div>
+                </div>
+                    <div class="col-md-6">
+                    <div id="bar2" style="width:100%; height:450px;"></div>
+                </div>
+                    <div class="col-md-6">
+                    <div id="bar3" style="width:100%; height:450px;"></div>
+                </div>
+                    <div class="col-md-6">
+                    <div id="bar4" style="width:100%; height:450px;"></div>
+                </div>
+            </div>
         </div>
 
         <script>
-            var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
+            var chart1 = echarts.init(document.getElementById('bar1'), 'white', {renderer: 'canvas'});
+            var chart2 = echarts.init(document.getElementById('bar2'), 'white', {renderer: 'canvas'});
+            var chart3 = echarts.init(document.getElementById('bar3'), 'white', {renderer: 'canvas'});
+            var chart4 = echarts.init(document.getElementById('bar4'), 'white', {renderer: 'canvas'});
 
             $(function () {
-                fetchData(chart);
+                fetchData();
             });
 
             function fetchData() {
@@ -20,7 +36,10 @@
                     success: function (result) {
                         console.log('success');
                         console.log(result);
-                        chart.setOption(result);
+                        chart1.setOption(result.bar1);
+                        chart2.setOption(result.bar2);
+                        chart3.setOption(result.bar3);
+                        chart4.setOption(result.bar4);
                     },
                     error: function(request) {
                         console.log("error")