Bmob+Android+ECharts 實現移動端數據上傳與圖表展示

Bmob:后端云 全方位一體化的后端服務平臺,無需再造應用后端服務 輕松擁有開發中需要的各種后端能力。
??ECharts:開源圖表庫,豐富的可視化效果,多圖表類型,滿足不同數據的處理需求 更多的搭配方案讓你的數據呈現方式更個性和完美。

1,Android Bmob使用

官方文檔:http://docs.bmob.cn/data/Android/a_faststart/doc/index.html

1)在 Project 的 build.gradle 文件中添加 Bmob的maven倉庫地址,

  allprojects {
     repositories {
         jcenter()
         //Bmob的maven倉庫地址--必填
         maven { url "https://raw.github.com/bmob/bmob-android-sdk/master" }
     }
 }

2)在app的build.gradle文件中添加compile依賴文件,

        //如果你想應用能夠兼容Android6.0,請添加此依賴(org.apache.http.legacy.jar)
        compile 'cn.bmob.android:http-legacy:1.0'

3)Bmob初始化,

       //默認初始化
        Bmob.initialize(this, "Your Application ID");
        // 注:自v3.5.2開始,數據sdk內部縫合了統計sdk,開發者無需額外集成,傳渠道參數即可,不傳默認沒開啟數據統計功能
        //Bmob.initialize(this, "Your Application ID","bmob");

4)Bmob使用。
??首先建立數據對象AddressIofo,

package com.demo.xiep.mode;

import cn.bmob.v3.BmobObject;

/**
 * 作者:xiep on 2017/5/22 10:38
 */

public class AddressIofo extends BmobObject {
    /** 國家 */
    private String country;
    private String country_id;
    /** 地區 */
    private String area;
    private String area_id;
    /** 省 */
    private String region;
    private String region_id;
    /** 市 */
    private String city;
    private String city_id;
    /** 縣 */
    private String county;
    private String county_id;

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }

    public String getCountry_id() {
        return country_id;
    }

    public void setCountry_id(String country_id) {
        this.country_id = country_id;
    }

    public String getArea() {
        return area;
    }

    public void setArea(String area) {
        this.area = area;
    }

    public String getArea_id() {
        return area_id;
    }

    public void setArea_id(String area_id) {
        this.area_id = area_id;
    }

    public String getRegion() {
        return region;
    }

    public void setRegion(String region) {
        this.region = region;
    }

    public String getRegion_id() {
        return region_id;
    }

    public void setRegion_id(String region_id) {
        this.region_id = region_id;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getCity_id() {
        return city_id;
    }

    public void setCity_id(String city_id) {
        this.city_id = city_id;
    }

    public String getCounty() {
        return county;
    }

    public void setCounty(String county) {
        this.county = county;
    }

    public String getCounty_id() {
        return county_id;
    }

    public void setCounty_id(String county_id) {
        this.county_id = county_id;
    }
}

通過BmobObject進行數據操作。

package com.demo.xiep;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.demo.xiep.mode.AddressIofo;

import java.util.ArrayList;
import java.util.List;

import cn.bmob.v3.Bmob;
import cn.bmob.v3.BmobBatch;
import cn.bmob.v3.BmobObject;
import cn.bmob.v3.BmobQuery;
import cn.bmob.v3.datatype.BatchResult;
import cn.bmob.v3.exception.BmobException;
import cn.bmob.v3.listener.FindListener;
import cn.bmob.v3.listener.QueryListListener;
import cn.bmob.v3.listener.UpdateListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //第一:默認初始化
        Bmob.initialize(this, "App ID");

        Button AddData = (Button) findViewById(R.id.add_data);
        Button QueryData = (Button) findViewById(R.id.query_data);
        Button ModifyData = (Button) findViewById(R.id.modify_data);
        Button DeleteData = (Button) findViewById(R.id.delete_data);

        AddData.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addData();
            }
        });

        QueryData.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                queryData();
            }
        });

        ModifyData.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                modifyData();
            }
        });

        DeleteData.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                deleteData();
            }
        });
    }

    private void addData() {
        List<BmobObject> addressIofos = new ArrayList<BmobObject>();
        for (int i = 0; i < 10; i++) {
            AddressIofo addressIofo = new AddressIofo();
            addressIofo.setCountry("中國");
            addressIofo.setRegion("廣東");
            addressIofo.setCity("深圳");
            addressIofos.add(addressIofo);
        }
        for (int i = 0; i < 5; i++) {
            AddressIofo addressIofo = new AddressIofo();
            addressIofo.setCountry("中國");
            addressIofo.setRegion("廣東");
            addressIofo.setCity("廣州");
            addressIofos.add(addressIofo);
        }
        for (int i = 0; i < 5; i++) {
            AddressIofo addressIofo = new AddressIofo();
            addressIofo.setCountry("中國");
            addressIofo.setRegion("湖南");
            addressIofo.setCity("長沙");
            addressIofos.add(addressIofo);
        }
        new BmobBatch().insertBatch(addressIofos).doBatch(new QueryListListener<BatchResult>() {

            @Override
            public void done(List<BatchResult> o, BmobException e) {
                if (e == null) {
                    for (int i = 0; i < o.size(); i++) {
                        BatchResult result = o.get(i);
                        BmobException ex = result.getError();
                        if (ex == null) {
                            Log.i("bmob", "第" + i + "個數據批量添加成功:" + result.getCreatedAt() + "," + result.getObjectId() + "," + result.getUpdatedAt());
                        } else {
                            Log.i("bmob", "第" + i + "個數據批量添加失敗:" + ex.getMessage() + "," + ex.getErrorCode());
                        }
                    }
                } else {
                    Log.i("bmob", "失敗:" + e.getMessage() + "," + e.getErrorCode());
                }
            }
        });
    }

    private void queryData() {
        BmobQuery<AddressIofo> query = new BmobQuery<AddressIofo>();
        //查詢playerName叫“比目”的數據
        query.addWhereEqualTo("country", "中國");
        query.order("-createdAt");// 按照時間降序
        //返回50條數據,如果不加上這條語句,默認返回10條數據
        query.setLimit(100);
        //執行查詢方法
        query.findObjects(new FindListener<AddressIofo>() {
            @Override
            public void done(List<AddressIofo> object, BmobException e) {
                if (e == null) {
                    toast("查詢成功:共" + object.size() + "條數據。");
                    for (AddressIofo addressIofo : object) {
                        //獲得playerName的信息
                        addressIofo.getCountry();
                        //獲得數據的objectId信息
                        addressIofo.getRegion();
                        //獲得createdAt數據創建時間(注意是:createdAt,不是createAt)
                        addressIofo.getCreatedAt();

                        Log.i("bmob", "成功:" + addressIofo.getCountry() + "," + addressIofo.getRegion() + "," + addressIofo.getCity() + "," + addressIofo.getCreatedAt());
                    }
                } else {
                    Log.i("bmob", "失敗:" + e.getMessage() + "," + e.getErrorCode());
                }
            }
        });
    }

    private void modifyData() {
        //更新Person表里面id為6b6c11c537的數據,address內容更新為“北京朝陽”
        final AddressIofo p2 = new AddressIofo();
        p2.setCity("常德");
        p2.update("1ec0b8868d", new UpdateListener() {

            @Override
            public void done(BmobException e) {
                if (e == null) {
                    toast("更新成功:" + p2.getUpdatedAt());
                } else {
                    toast("更新失敗:" + e.getMessage());
                }
            }

        });
    }

    private void deleteData() {
        final AddressIofo p2 = new AddressIofo();
        p2.setObjectId("4baf4e4f1b");
        p2.delete(new UpdateListener() {

            @Override
            public void done(BmobException e) {
                if (e == null) {
                    toast("刪除成功:" + p2.getUpdatedAt());
                } else {
                    toast("刪除失敗:" + e.getMessage());
                }
            }

        });
    }

    private void toast(String s) {
        Toast.makeText(this, s, Toast.LENGTH_SHORT).show();
    }
}

數據操作結果:

Address數據庫后臺.png

2,JavaScript Bmob使用

1)安裝BmobSDK
把下面這行代碼加入你的頁面中,其中,"bmob-min.js"為SDK文件:

<script src="bmob-min.js"></script>

2)接著是加入下面這行代碼進行初始化

Bmob.initialize("你的Application ID", "你的REST API Key");

3,Echarts 圖表使用

官方文檔:http://echarts.baidu.com/index.html

1)引入 ECharts

<script src="echarts.min.js"></script>

2)創建echarts實例

 <script type="text/javascript">
        // 基于準備好的dom,初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            ···
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>

完整示例:

<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html;charset=utf-8">  
<title>Demo</title>
<style>

</style>

</head>

    <div id="main" style="width: 1280px;height:720px;"></div>

<body>

<script src="http://echarts.baidu.com/gallery/vendors/jquery/jquery.js"></script>  
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script src="http://7xwlc0.com1.z0.glb.clouddn.com/bmob-min.js"></script>

<script type="text/javascript">
Bmob.initialize("你的Application ID", "你的REST API Key");

var DeviceData = Bmob.Object.extend("DeviceData");
var query = new Bmob.Query(DeviceData);
// 查詢所有數據
query.find({
  success: function(results){
       
// 基于準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
  myChart.hideLoading();

    myChart.setOption(option = {
    title: {
        text: '設備信息',
        subtext: '純屬虛構',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['device']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本,默認為數值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'device',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
             data: convertData(results)
        }
    ]
});
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

    // alert("共查詢到 " + results.length + " 條記錄");

  },
  error: function(error) {
    alert("查詢失敗: " + error.code + " " + error.message);
  }
});
     
function convertData(results) {
  // console.log("共查詢到 results " + results);
    var res = [];
   for (var i = 0; i < results.length; i++) {     
           var object = results[i];
           res.push({
               name: object.get('name'),
               value: object.get('value')
           });

            // alert(object.id + ' - ' + object.get('name'));

           console.log("results[i].name " + object.get('name') + ' - ' + object.get('value'));
   }
   // console.log("共查詢到 res " + res);
   return res;
};

</script>
</body>
</html>

示例圖表生成效果:


設備信息地圖1.png
設備信息地圖2.png

如需要使用世界地圖只需引入世界地圖資源:

<!-- <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> -->
<script src="http://gallery.echartsjs.com/dep/echarts/map/js/world.js"></script>

使用ECharts生成其他圖表示例:

餅圖.png
雷達圖.png

Android 源碼下載地址:http://7xwlc0.com1.z0.glb.clouddn.com/AddressInfoDemo.zip
Bmob+Android+ECharts :http://7xwlc0.com1.z0.glb.clouddn.com/DeviceInfo.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,065評論 25 708
  • 太長了,還是轉載吧...今天在看博客的時候,無意中發現了@Trinea在GitHub上的一個項目Android開源...
    龐哈哈哈12138閱讀 20,258評論 3 283
  • 小區里的知了吵得讓我懷疑自己持續耳鳴,家里的多肉萎靡不振,公司的空調,家里的空調沒有間斷,每天上下班路程不到半小時...
    某秀閱讀 217評論 0 0
  • 昨天,整整忙了一整天,為了小弟的事,晚上10點左右才到公司,中途在雨中還自己動手給小車換了一次備用胎,到了公司安頓...
    恰恰天藍閱讀 293評論 8 3
  • 他那年16,成績并不優秀,努力考也只是一所普通的高中。普通的性格、普通的成績、普通的家庭、普通的相貌只能決定了他是...
    李智萍閱讀 299評論 0 0