做AndroID开发经常会需要画一些图表，自己写的话不仅麻烦而且工作量太大，所以一般都会采用第三方图表框架，现在给大家介绍一款功能非常丰富的图表框架 ECharts 。
准备ECharts 是由百度开发提供的开源框架，主要提供给Web使用，所以AndroID中一般使用WebVIEw加载显示，其实本质上也就是用 WebVIEw 加载本地 H5。
ECharts的图表样式主要由option控制，option是由Js编写，如下面代码就是一个简单折线图的option。
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, serIEs: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]};在andorID中使用ECharts,一般来讲我们有两种实现方案
AndroID获取数据并封装好option，然后传递给h5，h5再对数据进行解析，调用ECharts绘制。这种方案的难点在于option的属性太多了，封装起来太麻烦。h5处理所有 *** 作，进行获取数据，并调用ECharts进行绘制。
这种方案需要对Js比较熟悉。
这里我们采用第一种方案，因为前人栽树后人乘凉，已经有大神帮我们做好最困难的数据封装工作：EChart java 对象库
实现配置ECharts下载Echarts。你可以根据你的需求在ECharts官网下载需要的ECharts组件。我这里选择的是完整版。
将下载好的echarts.min.Js文件放入工程中assets目录下。如果没有assets目录，可以先在mian目录下，通过右击 new -> Folder -> Assets Folder 创建。
编写echarts.HTML文件，并将echarts.HTML放入assets目录。
<!DOCTYPE HTML><HTML > <head> <Meta name="vIEwport" content="wIDth=device-wIDth, initial-scale=1" /> <Meta charset="utf-8"> </head> <body > <div ID="container" ></div> <script type="text/JavaScript" src="./echarts.min.Js"></script> <script type="text/JavaScript"> var dom =document.getElementByID("container"); var myChart =echarts.init(dom); var app ={}; function loadEcharts(echartJson){ var option = JsON.parse(echartJson); if (option &&typeof option ==="object") { myChart.setoption(option,true); } } </script> </body></HTML>注意：因为该对象库依赖Gson，所以project同样需要添加Gson依赖
dependencIEs { compile 'com.github.abel533:ECharts:3.0.0.2' implementation 'com.Google.code.gson:gson:2.8.1'}因为Echarts需要在WebVIEw中显示，所以我们直接自定义一个EchartVIEw继承自WebVIEw用来显示图表。
public class EchartVIEw extends WebVIEw { private static final String TAG = EchartVIEw.class.getSimplename(); public EchartVIEw(Context context) { this(context, null); } public EchartVIEw(Context context, AttributeSet attrs) { this(context, attrs, 0); } public EchartVIEw(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private voID init() { WebSettings webSettings = getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanopenwindowsautomatically(true); webSettings.setSupportZoom(false); webSettings.setdisplayZoomControls(false); loadUrl("file:///androID_asset/echarts.HTML"); } /**刷新图表 * java调用Js的loadEcharts方法刷新echart * 不能在第一时间就用此方法来显示图表，因为第一时间HTML的标签还未加载完成，不能获取到标签值 * @param option */ public voID refreshEchartsWithOption(Gsonoption option) { if (option == null) { return; } String optionString = option.toString(); String call = "JavaScript:loadEcharts('" + optionString + "')"; loadUrl(call); }}再定义一个工具类用来将数据封装为option，这里只封装了一个简单的折线图做例子。
更多图表的封装请参照EChart java 对象库和ECharts官方例子。
public class EchartoptionUtil { public static Gsonoption getlineChartoptions(Object[] xAxis, Object[] yAxis) { Gsonoption option = new Gsonoption(); option.Title("折线图"); option.legend("销量"); option.tooltip().trigger(Trigger.axis); ValueAxis valueAxis = new ValueAxis(); option.yAxis(valueAxis); categoryAxis categorxAxis = new categoryAxis(); categorxAxis.axisline().onZero(false); categorxAxis.boundaryGap(true); categorxAxis.data(xAxis); option.xAxis(categorxAxis); line line = new line(); line.smooth(false).name("销量").data(yAxis).itemStyle().normal().linestyle().shadowcolor("rgba(0,0,0,0.4)"); option.serIEs(line); return option; }}在Acitvity中显示
activity_main.xml
<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" tools:context="com.example.ming.echartsforandroID.MainActivity"> <com.example.ming.echartsforandroID.EchartVIEw androID:ID="@+ID/lineChart" androID:layout_wIDth="400dp" androID:layout_height="400dp" androID:layout_gravity="center"> </com.example.ming.echartsforandroID.EchartVIEw></linearLayout>MainActivity .java
public class MainActivity extends AppCompatActivity { private EchartVIEw lineChart; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); lineChart = findVIEwByID(R.ID.lineChart); lineChart.setWebVIEwClIEnt(new WebVIEwClIEnt(){ @OverrIDe public voID onPageFinished(WebVIEw vIEw, String url) { super.onPageFinished(vIEw, url); //最好在h5页面加载完毕后再加载数据，防止HTML的标签还未加载完成，不能正常显示 refreshlineChart(); } }); } private voID refreshlineChart(){ Object[] x = new Object[]{ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }; Object[] y = new Object[]{ 820, 932, 901, 934, 1290, 1330, 1320 }; lineChart.refreshEchartsWithOption(EchartoptionUtil.getlineChartoptions(x, y)); }}EChart java 对象库目前只封装了常用的十几种图表，所以如果需要用到更多的图表，建议直接下载EChart java 对象库代码，对其进行扩充。
转自：https://www.jianshu.com/p/5783daf54f5b 总结以上是内存溢出为你收集整理的在android上使用ECharts全部内容，希望文章能够帮你解决在android上使用ECharts所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）