Android 调用echart图表,实现牛逼的效果
来源：互联网 发布：手机八格切图软件 编辑：程序博客网 时间：2024/04/30 17:25
最近项目中需要用图表,看到了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() {@Overridepublic 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; }}
好了,可以试试了
阅读全文
0 0
- Android 调用echart图表,实现牛逼的效果
- 简单的echart图表实现
- android之基于Echart的图表
- Android加载echart图表
- echart图表拉杆的配置
- Echart获取mysql表实现图表展示
- jQuery图表插件EChart的使用
- echart图表的各种参数介绍
- android图表的实现
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果(牛逼)
- Silverlight结合html实现的 图表效果
- Echart实现从数据库获取数据展示图表（结合Servlet和SSM实现的两种实例）
- 牛逼的Android UI
- 十分牛逼的TabLayout+Toolbar+ViewPager实现各种导航栏效果
- echart 图表显示技术
- echart动态图表
- echart展示图表
- echart 图表问题
- Java核心技術卷_2_注釋與數據類型
- JSON.parse（）方法将数据转换为javascript对象
- React-Native 安卓出现图片资源路径正确，却无法加载显示
- JAVA 模拟瞬间高并发
- 外观模式（Facade）
- Android 调用echart图表,实现牛逼的效果
- 数据库第一课
- oc 同步、异步图片下载
- mysql数据库定时自动备份
- 打印或者第三方设备
- web版本问题
- ubuntu1604
- Altera Stratix V FPGA硬件加速平台
- c语言三子棋游戏
