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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,412评论 25赞 707
  • GitHub上史上最全的Android开源项目分类汇总
    太长了，还是转载吧...今天在看博客的时候，无意中发现了@Trinea在GitHub上的一个项目Android开源...
    庞哈哈哈12138阅读 20,136评论 3赞 283
  • 热
    小区里的知了吵得让我怀疑自己持续耳鸣，家里的多肉萎靡不振，公司的空调，家里的空调没有间断，每天上下班路程不到半小时...
    某秀阅读 202评论 0赞 0
  • 践行之路，需要对自己坦诚一点
    昨天，整整忙了一整天，为了小弟的事，晚上10点左右才到公司，中途在雨中还自己动手给小车换了一次备用胎，到了公司安顿...
    恰恰天蓝阅读 283评论 8赞 3
  • 故事还长1
    他那年16，成绩并不优秀，努力考也只是一所普通的高中。普通的性格、普通的成绩、普通的家庭、普通的相貌只能决定了他是...
    李智萍阅读 272评论 0赞 0