ECharts是一款開源、功能強(qiáng)大的數(shù)據(jù)可視化產(chǎn)品，緊跟著大數(shù)據(jù)時代的步伐，是我接觸過的最優(yōu)秀的可視化工具，也是進(jìn)步最快的軟件，希望它早日成為世界級的開源項(xiàng)目，之前使用過MPAndroidChart，achartengine 等android下的圖形圖標(biāo)，相對而言Echart樣式更多，通過JS的形式來實(shí)現(xiàn)還是第一次見 ，話不多說直接上代碼 

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元華安做網(wǎng)站,已為上家服務(wù),為華安各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

  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，然后設(shè)置一些屬性

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

//進(jìn)行webwiev的一堆設(shè)置

//開啟本地文件讀?。J(rèn)為true，不設(shè)置也可以）

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目錄下

通過三個按鈕來切換不同的視圖 ：

折線圖調(diào)用：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',]);"); 上面有兩個參數(shù)，分別為X，y軸對應(yīng)的數(shù)據(jù)

其他兩個 ：

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

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

這樣就可以了

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