Android 调用echart图表,实现牛逼的效果

最新推荐文章于 2024-07-02 10:45:19 发布

Mryao10

最新推荐文章于 2024-07-02 10:45:19 发布

阅读量4.5k

点赞数 1

本文链接：https://blog.csdn.net/Mryao10/article/details/78065726

版权

时间紧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目中需要用图表,看到了echart图表的效果,和动画都很吊,于是使用webview加载试试,用来交流一下,好了不多说了贴代码了:

首先自己在本地建立一个自己的echarts.html;

<!DOCTYPE html>
<!-- saved from url=(0053)http://echarts.caixin.com/doc/example/www2/index.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>
</head>
<body>
<!--Step:1 Import echarts-plain.js or echarts-plain-map.js-->
<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
<script src="./ECharts_files/echarts-plain-map.js"></script>
<!--<script src="./ECharts_files/henan.js"></script>-->

<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width:410px;height:310px;"></div>
<!--<div id="main"-->
<!--style="height: 100%; width: 100%;"></div>-->

<script type="text/javascript">
      <!--Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.-->
      <!--Step:3 echarts和zrender被echarts-plain.js写入为全局接口-->

       var myChart;
       var option = {
           title : {
               text : "Echart测试"
           },
           tooltip : {
               show : false
           },
           toolbox : {
               show : false
           },
       };

      function createBarChart(objJson){
           option = {
               title: {
                  show:false,
                  left :'center',
                  top : 'middle',
                  text: objJson.TileName
               },
               tooltip : {
                  trigger: 'axis'
               },
               legend: {
                  data:objJson.LegendData
               },
               toolbox: {
                  show : false,
                  feature : {
                     mark : true,
                     dataView : {readOnly: false},
                     magicType:['line', 'bar'],
                     restore : true,
                     saveAsImage : true
                  }
               },
               calculable : true,
               xAxis : [
                  {
                     type : 'category',
                     data : objJson.XAxisData
                  }
               ],
               yAxis : [
                  {
                     type : 'value',
                     splitArea : {show : true}
                  }
               ],
               series :objJson.SeriesData
           };
      }
      <!--开始的位置-->
      function createBChart(objJson){

                option = {
                    title: {
                                text: objJson.TileName,
                     },
                tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                         type: 'shadow'
                                              }
                            },
                legend: {
                            data:objJson.LegendData
                            },
                grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                            },
                xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                        },
                yAxis: {
                        type: 'category',
                        data : objJson.XAxisData
                        },
                series :objJson.SeriesData
                };
        }

         function createTChart(objJson){
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        type: 'category',
       data:objJson.LegendData
    },
    xAxis:[
        {
            type : 'category',
         data : objJson.XAxisData
        }],
    yAxis:[
    {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series :objJson.SeriesData
};
}
      function createPieChart(objJson){
           option = {
               title: {
                  show:false,
                  text: objJson.Title,
                  left: 'center',
                  textStyle: {
                     color: '#fff'
                  }
               },
               tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               legend: {
                  orient : 'vertical',
                  x : 'left',
                  data:objJson.LegendData
               },
               toolbox: {
                  show : false,
                  feature : {
                     mark : {show: true},
                     dataView : {show: true, readOnly: false},
                     restore : {show: true},
                     saveAsImage : {show: true}
                  }
               },
               calculable : true,
               series :objJson.SeriesData
            };
      }

      function randomData() {
         return Math.round(Math.random()*1000);
      }

      function doCreatChart(specificChartFunction){
          myChart = echarts.init(document.getElementById('main'));
          myChart.clear();
         myChart.showLoading({
            text : "图表数据正在努力加载..."
         });
         specificChartFunction;
         myChart.setOption(option); //先把可选项注入myChart中
         myChart.hideLoading();
      }
      //JS 按顺序加载，所以调用的放在最后
      function createChart(chartKind,objJson){
        if (chartKind=='bar') {
            doCreatChart(createBarChart(objJson));
         };

        if (chartKind=='pie') {
            doCreatChart(createPieChart(objJson));
         };

         if (chartKind=='map') {
            doCreatChart(createMapChart(objJson));
         };
         if(chartKind=='b'){
          doCreatChart(createBChart(objJson));
          }
          if(chartKind=='t'){
          doCreatChart(createTChart(objJson));
          }
      }
      

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

好了以上就是HTML文件了,当我们需要加载的时候怎么干呢?

String json="{"TileName":"","LegendData":["农用地面积","农用地比重"],"XAxisData":["农用地面积","平均值"],"SeriesData":[{"type":"bar","name":"农用地面积","data":["97349","140054.9393939394"]},{"type":"line","name":"农用地比重","yAxisIndex":"1","data":["75.83","73.10636363636364"]}]}";

//进行webwiev的一堆设置
//开启本地文件读取（默认为true，不设置也可以）
mWebview.getSettings().setAllowFileAccess(true);
//设置编码
mWebview.getSettings().setDefaultTextEncodingName("utf-8");
// 设置可以支持缩放
mWebview.getSettings().setSupportZoom(true);
// 设置出现缩放工具
mWebview.getSettings().setBuiltInZoomControls(false);
mWebview.setBackgroundColor(Color.argb(0, 0, 0, 0));
//chart_WebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
// 清除浏览器缓存
mWebview.clearCache(true);
//开启脚本支持
mWebview.getSettings().setJavaScriptEnabled(true);
//  放在 assets目录
//获取Assets目录下的文件
mWebview.loadUrl("file:///android_asset/echart/echarts.html");
//在当前页面打开链接了
mWebview.setWebViewClient(new WebViewClient() {
    @Override
public void onPageFinished(WebView view, String url) {
//注意这里区分加载的类型  't','b','pie','bar';跟上面HTML对应就行
    mWebview.loadUrl("javascript:createChart('t'," + json + ");");
    super.onPageFinished(view, url);
}
});//js加上这个就好啦！mWebview.setWebChromeClient(new WebChromeClient() {    @Override    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {        return super.onJsAlert(view, url, message, result);    }});
上面给你送了个写好的json ,当然先拷HTML文件,你可以拷过去试试.
那么我们要怎么写自己的json数据,给你一个类吧,其他仿照这个来写就好了;
package com.example.geoway.gw.chartutil;


import java.util.ArrayList;


/**
 * Created by yaoke on 2017/9/20.
 */


public class DataForLineAndBar {
    private static final String Title="TileName";
    private static final String LegendData = "LegendData";
    private static final String XAxisData = "XAxisData";
    private static final String SeriesData = "SeriesData";
    private static final String SeryName = "name";
    private static final String SeryData = "data";
    private static final String SeryType = "type";
    public static final String SeryType_Bar = "bar";
    public static final String SeryType_Line = "line";


    private String m_Title = "";
    public String getTile(){return m_Title;}
    public void setTitle(String title){m_Title = title;}


    private ArrayList<String> m_LegendData = new ArrayList<String>();
    private ArrayList<String> m_Type=new ArrayList<>();//用来存type类型


    private ArrayList<String> m_xAxisData= new ArrayList<String>();
    private ArrayList<ArrayList<String>> m_seriesData= new ArrayList<ArrayList<String>>();


    public ArrayList<String> getM_Type() {
        return m_Type;
    }


    public void setM_Type(ArrayList<String> m_Type) {
        this.m_Type = m_Type;
    }


    public static String getSeryType() {
        return SeryType;
    }


    public void addLegendValue(String legendValue)
    {
        m_LegendData.add(legendValue);
    }
    public ArrayList<String> getLegendData()
    {
        return m_LegendData;
    }
    public  void setLegendData(ArrayList<String> legendData)
    {
        m_LegendData = legendData;
    }


    public void addXAxisValue(String xAxisValue)
    {
        m_xAxisData.add(xAxisValue);
    }


    public ArrayList<String> getXAxisData()
    {
        return m_xAxisData;
    }
    public  void setXAxisData(ArrayList<String> xAxisData)
    {
        m_xAxisData = xAxisData;
    }


    public void addSeriesValue(ArrayList<String> seriesValue)
    {
        m_seriesData.add(seriesValue);
    }


    public ArrayList<ArrayList<String>> getSeriesData()
    {
        return m_seriesData;
    }


    public  void setSeriesData(ArrayList<ArrayList<String>> seriesData)
    {
        m_seriesData = seriesData;
    }


    public String GetJSONString()
    {
        String retJSON = new String();
        retJSON += "{";


        retJSON += "\""+Title+"\":"+"\""+m_Title+"\",";
        retJSON += "\""+LegendData+"\":[";
        for (int i = 0 ; i < m_LegendData.size();i++)
        {
            retJSON += "\"" + m_LegendData.get(i) +"\"";
            if(i < m_LegendData.size()-1)
                retJSON +=",";
        }
        retJSON +="],";


        retJSON += "\""+XAxisData+"\":[";
        for (int j = 0; j < m_xAxisData.size();j++)
        {
            retJSON += "\"" + m_xAxisData.get(j) +"\"";
            if(j < m_xAxisData.size()-1)
                retJSON +=",";
        }
        retJSON +="],";


        retJSON +="\""+SeriesData+"\":";
        retJSON +="[";
        for (int k = 0;k < m_LegendData.size();k++)
        {
            ArrayList<String> seryData = m_seriesData.get(k);
            retJSON +="{";


            retJSON += "\""+SeryType +"\":\""+m_Type.get(k)+"\",";
            retJSON += "\""+SeryName +"\":\""+m_LegendData.get(k)+"\",";
            if(m_Type.get(k).equals(SeryType_Line)){
                retJSON +=  "\""+"yAxisIndex" +"\":\""+"1"+"\",";
            }


            retJSON += "\""+SeryData+"\":[";
            for (int l = 0; l < seryData.size();l++)
            {
                retJSON += "\"" + seryData.get(l) +"\"";
                if(l < seryData.size()-1)
                    retJSON +=",";
            }
            retJSON +="]";


            retJSON +="}";
            if(k < m_LegendData.size()-1)
                retJSON+=",";
        }
        retJSON +="]";


        retJSON += "}";


        return retJSON;
    }
}

好了,可以试试了

Mryao10

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android 调用echart图表,实现牛逼的效果

最近项目中需要用图表,看到了echart图表的效果,和动画都很吊,于是使用webview加载试试,用来交流一下,好了不多说了贴代码了:首先自己在本地建立一个自己的echarts.html;html>html lang="en">head> meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
复制链接

扫一扫