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();    }}

数据操作结果：

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>

  示例图表生成效果：

如需要使用世界地图只需引入世界地图资源:

<!-- <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生成其他图表示例：

Android 源码下载地址：http://download.csdn.net/detail/u010963246/9849907

Bmob+Android+ECharts :http://7xwlc0.com1.z0.glb.clouddn.com/DeviceInfo.html