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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sxt_zls/article/details/70207959

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

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

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




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

  • 导入刚下载的图表构建工具   echarts.min.js  到安卓项目的 资产目录(assets)下 这里我使用的 完整版
  • 创建 Htm l文件 , 即要展示的网页 ,  文件名自定义 这里我是 myechart.html
  • 我的assets目录结构如下:



  • 接下来就是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();
            }
        }
    });


    
    
    
    
    
    
    
    
    
    
  • 
    
  • 点击按钮加载不同的 图表 
  • @Override
    public 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;
        }
    }


    
    
    
    
    
    
    
    
    
    

          


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页