Android使用Echart绘制数据的动态变化曲线

1、实现原理

Android使用Echart绘制曲线，首先是对动态数据的访问以及解析，然后使用Echart将数据以曲线的形式可视化，在这一过程中，我主要是用到了两个谷歌的解析包，分别为ksoap2和gson。ksoap2用于访问发布的WebServer服务,gson用于对返回的数据进行解析。

2、ksoap2访问WebServer

不太了解ksoap2的，可以去看看ksoap2的中文开发文档，很容易了解。需要的朋友可以去这里下载解析包。下面直接看访问服务的代码。两个解析包地址：https://download.csdn.net/download/sinat_39271486/12034301

        String TJH=tjh;
        System.out.println(TJH);

        String k=shijian;
        System.out.println(k);

        String sensorID=CGQquzhi;
        String AK=sensorID.substring(0,2);

        sharedPreferences=getSharedPreferences("config", Context.MODE_PRIVATE);
        yonghuming=sharedPreferences.getString("user","");
        mima=sharedPreferences.getString("password","");
        if (AK.equals("02")&& getleixing.equals("油烟")) {
            SoapObject request = new SoapObject(NAMESPACE, METHON_NAME);
            request.addProperty("loginusername", yonghuming);
            request.addProperty("loginpassword", mima);
            request.addProperty("contractid", "180001");
            request.addProperty("sensorid", sensorID);
            request.addProperty("daycount", TJH);
            request.addProperty("startdate", k);
            SoapSerializationEnvelope envelope = new SoapSerializationEnvelope(SoapEnvelope.VER11);
            envelope.dotNet = true;
            envelope.bodyOut = request;
            envelope.setOutputSoapObject(request);
            HttpTransportSE httpTransportSE = new HttpTransportSE(URL);
            httpTransportSE.debug = true;
            try {
                httpTransportSE.call(SOAP_ACTION, envelope);

            } catch (Exception e) {
                e.printStackTrace();
            }
            SoapObject object = (SoapObject) envelope.bodyIn;
            System.out.println("服务返回数据---->" + object);
            String r = object.getProperty(0).toString();
            System.out.println("图表服务返回数据---->" + r);

3、gson解析服务返回的json数据

1、构造解析数据的函数

了解返回的数据的字段，解析所需的部分，代码如下：

public class User {
    private String PROJECTNAME;
    private  String CHANGEVALUE;
    private String xAxis;
    private  String yAxis;
    private  String yellowMax;
    private String redMax;
    public String getPROJECTNAME(){
        return PROJECTNAME;
    }
    public void setPROJECTNAME(String PROJECTNAME){
        this.PROJECTNAME=PROJECTNAME;
    }
    public String getCHANGEVALUE(){
        return CHANGEVALUE;
    }
    public void setCHANGEVALUE(String CHANGEVALUE){
        this.CHANGEVALUE=CHANGEVALUE;
    }

    public String getxAxis() {
        return xAxis;
    }

    public void setxAxis(String xAxis) {
        this.xAxis = xAxis;
    }

    public String getyAxis() {
        return yAxis;
    }

    public void setyAxis(String yAxis) {
        this.yAxis = yAxis;
    }
    public String getyellowMax(){
        return yellowMax;
    }
    public void setyellowMax(String yellowMax){
        this.yellowMax=yellowMax;
    }

    public String getredMax(){
        return  redMax;
    }
    public void setredMax(String redMax){
        this.redMax=redMax;
    }
}

2、使用Gson解析数据

 Type listType = new TypeToken<LinkedList<User>>() {
            }.getType();
 Gson gson = new Gson();
            LinkedList<User> users = gson.fromJson(r, listType);
            for (Iterator iterator = users.iterator(); iterator.hasNext(); ) {
                User user = (User) iterator.next();

                System.out.println("Y坐标值----》》" + user.getyAxis());
                System.out.println("X坐标值----》》" + user.getxAxis());
                System.out.println("坐标值----》》" + user.getyAxis());
                // List<String> b = Arrays.asList(user.getyAxis());
                //final char[] a = user.getyAxis().toCharArray();
                // final String c= user.getyAxis();
                final String c = user.getyAxis().substring(1, user.getyAxis().length() - 1).replace("\\", "");
                final String A = user.getxAxis().substring(1, user.getxAxis().length() - 1).replace("\\", "");
                final String yellow=user.getyellowMax().substring(1,user.getyellowMax().length()-1).replace("\\","");
                final String red=user.getredMax().substring(1,user.getredMax().length()-1).replace("\\","");
                final List<String> b = Arrays.asList(c);
                final List<String> e = Arrays.asList(A);
                final List<String>Yellow=Arrays.asList(yellow);
                final List<String>Red=Arrays.asList(red);

4、将解析的数据传入Echart中绘制曲线

1、配置Echart所需的文件

需要的朋友可以去官网看教程，主要引入echarts.min.js文件,需要的朋友可以去下载
地址：https://download.csdn.net/download/sinat_39271486/12034395

2、编写JS代码，将获取的数据传入Echart.js文件中，代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body onload="javascript:contact.showcontacts()" >
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:400px;height:400px;"></div>
<script  type="text/javascript">

       function show(params,params1,params3,params4)
        {
        var name1=params;
        var name2=params1;
        var name4=params3;
        var name5=params4;



       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
    option = {
    title:{

    },
    legend:{data:['油烟变化折线','预警线','报警线']},
    xAxis: {

        type: 'category',

        data: name2
    },
    yAxis: {

        type: 'value'
    },
    series: [{

        name:'油烟变化折线',
        data: name1,
        type: 'line',
        label:{
        normal:{
        show:true
        }
        },
        itemStyle:{
           normal:{
           color:'#00FF00',
           lineStyle:{
           color:'#00FF00'
           }
        }
        }

    },
    {
    name:'预警线',
    data: name4,
        type: 'line',
        label:{
        normal:{
        show:true
        }
        },
        itemStyle:{
           normal:{
           color:'#FFFF00  ',
           lineStyle:{
           color:'#FFFF00 '
           }
        }
        }
    },
    {
     name:'报警线',
    data: name5,
        type: 'line',
        label:{
        normal:{
        show:true
        }
        },
         itemStyle:{
           normal:{
           color:'#FF0000 ',
           lineStyle:{
           color:'#FF0000'
           }
        }
        }
    }
   ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
       }

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

3、调用Echart绘制的样式

将之前编写的Echart.js文件传入程序中。代码如下：

 final String c = user.getyAxis().substring(1, user.getyAxis().length() - 1).replace("\\", "");
                final String A = user.getxAxis().substring(1, user.getxAxis().length() - 1).replace("\\", "");
                final String yellow=user.getyellowMax().substring(1,user.getyellowMax().length()-1).replace("\\","");
                final String red=user.getredMax().substring(1,user.getredMax().length()-1).replace("\\","");
                final List<String> b = Arrays.asList(c);
                final List<String> e = Arrays.asList(A);
                final List<String>Yellow=Arrays.asList(yellow);
                final List<String>Red=Arrays.asList(red);
                chartshow_web.loadUrl("file:///android_asset/echart.html");
                chartshow_web.setWebChromeClient(new WebChromeClient() {
                    public void onProgressChanged(WebView view, int progress) {
                        if (progress == 100) {
                            view.loadUrl("javascript:show(" + b + "," + e + ","+Yellow+","+Red+")");

5、展示绘制的结果

1、查询一天内各个时段的变化值

2、绘制一个月内的变化曲线