百度ECharts---android在线展示统计图表(折线图\柱状图\饼状图)

来源：互联网发布：动漫绘图软件编辑：程序博客网时间：2024/06/05 16:58

做金融类型的应用经常会用到数据的统计报表诸如折线图 , K线图, 饼状图,柱状图 既能形象的表述数据的分布 , 同时又增加了数据的可读性

实现思路: 百度Echarts支持安卓移动端的运用 , WebView加载html, 嵌套JavaScript代码 , 即可动态实现在线图表的展示功能..

下面展示下今天要实现的效果

进入Echarts官网下载页可以选择自己需要的图表类型自定义下载js文件 , 精简版,常用版, 完整版根据需求自定义下载

导入刚下载的图表构建工具 echarts.min.js 到安卓项目的资产目录(assets)下这里我使用的完整版

创建 Htm l文件 , 即要展示的网页 , 文件名自定义这里我是 myechart.html

接下来就是html文件的代码了首先我们为ECharts准备一个具备大小(宽高) 的 DOM 并取别名
```
<div id="main" style="float: left; width: 600px;height:500px; margin-top: 20px"></div>
```

导入图表构建工具

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

因为我这里要展示多种类型的图表所以定义了几个方法下面以折线图为例

var lineJson;//用于临时存储折线图json对象, 便于追加数据//创建折线图 function createLineChart(obj){     lineJson=obj;     options = {         title : {                 //text: '脉搏值(次/min)',                 text: obj.title,                 subtext: 'make by sxt',                 x:'left'               },         tooltip: {                trigger: 'axis',                formatter: "脉搏频率 : <br/>{b} - {c} 次/min"           },         xAxis: {                id: 'dataX',                type: 'category',                splitLine:{                   show:true                },               axisLabel: {                   //formatter: '{value} °C'                   formatter: '{value}'               },               data: obj.times //动态展示运动时间           },         yAxis: {               type: 'value',               axisLine: {onZero: true},               splitLine:{                   show:true               },               axisLabel: {                   //formatter: '{value} km'                   formatter: '{value}'               },               min:0,               max:150//在此设置范围           },         dataZoom: [              {                 id:'dataZoom',                 show:false,                 type: 'inside',//inside 为拖动效果                 //type: 'slider',//slider为手动更新效果                 realtime: true,                 filterMode: 'filter',                 start: 20,                 end: 85,                 xAxisIndex: 0             }           ],         series: [{           id: 'dataY',           name: '脉搏频率(次)/(s)',           type: 'line',           smooth: true,           data: obj.steps, //动态展示运动步数数据           lineStyle: {              normal: {                   width: 3,                   shadowColor: 'rgba(0,0,0,0.4)',                   shadowBlur: 10,                   shadowOffsetY: 10               }           },           markPoint : {//标注点                        data : [//这种方式内部自动计算最值                           {                             type :'max'  ,                             name:'最大值' ,                             symbol:'image://' + treeUrl,                             symbolSize: [30, 30]                            },                           {                             type : 'min',                             name: '最小值',                             symbol:'image://' + childUrl,                             symbolSize: [30, 30]                           }                         ]                        },            markLine : {                       data : [ {type : 'average', name: '平均值'} ]                       }                 }]           };        } //更新折线图的缩放起始位置 function updateZoomState(start,end){    myChart.setOption({       dataZoom: [{            id: 'dataZoom',            start: start,            end: end       }]   }); } //获取数组最小值 function getMinValue(obj){       var min = obj.steps[0];       for (var i = 1; i < obj.steps.length; i++){       if (obj.steps[i] < min){           min = obj.steps[i];         }       }       return min;  } //获取数组最大值 function getMaxValue(obj){       var max = obj.steps[0];       for (var i = 1; i < obj.steps.length; i++){       if (obj.steps[i] > max) {           max = obj.steps[i];         }       }       return max; }//更新折线图数据 继续在后面追加数据 function updateDataXY(dataX,dataY){      myChart.setOption({            xAxis: {                id: 'dataX',                data:lineJson.times.concat(dataX)           },           series:[{                id: 'dataY',                data:lineJson.steps.concat(dataY)           }],           dataZoom: [{                id: 'dataZoom',                start: 60,                end: 100           }]       }); }

展示图表

//显示图表   function createChart(type,json){        if(type=='line'){          createLineChart(json);        }        if(type=='bar'){          createBarChart(json);        }        if(type=='pie'){          createPieChart(json);        }        if(type=='more'){          createMoreChart()        }        // 基于准备好的dom，初始化echarts实例       myChart = echarts.init(document.getElementById('main'));        //使用指定的配置项和数据显示图表。       myChart.setOption(options);    }

html 文件已写好到了安卓中调用的时候了

//进行webwiev的一堆设置chartshowWb.getSettings().setAllowFileAccess(true);chartshowWb.getSettings().setJavaScriptEnabled(true);chartshowWb.loadUrl("file:///android_asset/echart/myechart.html");chartshowWb.setWebViewClient(new WebViewClient() {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        view.loadUrl(url);        return super.shouldOverrideUrlLoading(view, url);    }    @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);        dialog.show();    }    @Override    public void onPageFinished(WebView view, String url) {        //最好在这里调用js代码 以免网页未加载完成        chartshowWb.loadUrl("javascript:createChart('line'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");");        findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE);        if (dialog.isShowing()) {            dialog.dismiss();        }    }});

```
点击按钮加载不同的 图表 
```

@Overridepublic void onClick(View view) {    switch (view.getId()) {        case R.id.linechart_bt:            chartshowWb.loadUrl("javascript:createChart('line'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");");            findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE);            break;        case R.id.barchart_bt:            chartshowWb.loadUrl("javascript:createChart('bar'," + EchartsDataBean.getInstance().getEchartsBarJson() + ");");            findViewById(R.id.rl_bottom).setVisibility(View.GONE);            break;        case R.id.piechart_bt:            chartshowWb.loadUrl("javascript:createChart('pie'," + EchartsDataBean.getInstance().getEchartsPieJson() + ");");            findViewById(R.id.rl_bottom).setVisibility(View.GONE);            break;        case R.id.morechart_bt://createMapChart            chartshowWb.loadUrl("javascript:createChart('more'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");");            findViewById(R.id.rl_bottom).setVisibility(View.GONE);            break;        case R.id.iv_left:            dealwithLeft();            break;        case R.id.iv_right:            dealwithRight();            break;        default:            chartshowWb.loadUrl("javascript:updateDataXY(" + newDataX + "," + newDataY + ");");            findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE);            break;    }}

至此 通过百度Echarts在线展示统计图表 已完成   关于动态展示数据  我们可以将要展示的数据封装成对象 ,

通过Gson将集合转换成Json数据 作为参数传入即可  ,  有问题请留言...

项目完整地址 github完整地址 -- https://github.com/good-good-study/HeartRate.git

0 0