Android图表之-Echarts-创新互联

ECharts是一款开源、功能强大的数据可视化产品，紧跟着大数据时代的步伐，是我接触过的最优秀的可视化工具，也是进步最快的软件，希望它早日成为世界级的开源项目，之前使用过MPAndroidChart，achartengine 等android下的图形图标，相对而言Echart样式更多，通过JS的形式来实现还是第一次见 ，话不多说直接上代码

专注于为中小企业提供网站设计制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业古交免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

 1.布局文件比较简单定时3个Button ，和一个Webview ：

  

  xmlns:tools="http://schemas.android.com/tools"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:paddingBottom="@dimen/activity_vertical_margin"

  android:paddingLeft="@dimen/activity_horizontal_margin"

  android:paddingRight="@dimen/activity_horizontal_margin"

  android:paddingTop="@dimen/activity_vertical_margin"

  tools:context="com.hzbst.echartst.MainActivity" >

   android:id="@+id/bt_ly"

   android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:gravity="center_horizontal"

   >

   android:id="@+id/linechart_bt"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="折线图" />

   android:id="@+id/barchart_bt"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="柱状图" />

   android:id="@+id/piechart_bt"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="饼状图" />

   android:id="@+id/chartshow_wb"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:layout_alignRight="@+id/bt_ly"

   android:layout_below="@+id/bt_ly"

   android:layout_marginTop="43dp" />

2. 在代码中去架子Echarts图形

 MainActivity类

找到Webview，然后设置一些属性

chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);

//进行webwiev的一堆设置

//开启本地文件读取（默认为true，不设置也可以）

chartshow_wb.getSettings().setAllowFileAccess(true);

//开启脚本支持

chartshow_wb.getSettings().setJavaScriptEnabled(true);

chartshow_wb.getSettings().setSupportZoom(true);

chartshow_wb.getSettings().setBuiltInZoomControls(true);

chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html");

通过loadUrl加载，myecharts文件

mycharts文件保存在assets目录下

通过三个按钮来切换不同的视图 ：

折线图调用：chartshow_wb.loadUrl("javascript:createChart('line',[29.2,29.2,29.2,29.2,29.2,29.1,29.1,]," +

"['2017-05-22','2017-05-22','2017-05-22','2017-05-22','2017-05-22','2017-05-22','2017-05-22',]);"); 上面有两个参数，分别为X，y轴对应的数据

其他两个 ：

chartshow_wb.loadUrl("javascript:createChart('bar',[100,100,100]);");

chartshow_wb.loadUrl("javascript:createChart('pie",[100,100,100]);");

这样就可以了

源代码下载地址：http://down.51cto.com/data/2309209

附件：http://down.51cto.com/data/2366697

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：Android图表之-Echarts-创新互联
文章链接：http://6mz.cn/article/eooec.html