使用百度前端EChart框架封裝的Android版TAndroidEChart

阿新 • • 發佈：2019-01-18

TAndroidEChart

image

新增依賴：

一. gradle
Step 1：新增maven { url 'https://jitpack.io' } 到project的build.gradle
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2: 新增compile 'com.github.tikeyc:TAndroidEChart:v1.0'到你app的build.gradle
dependencies {
compile 'com.github.tikeyc:TAndroidEChart:v1.0'
}

二：或者直接下載完整專案，import一個module：tandroidechartlibrary

封裝原始碼：

TEChartWebView控制元件原始碼

public class TEChartWebView extends WebView {

    public TEChartWebView(Context context) {
        this(context,null);
    }

    public TEChartWebView(Context context, AttributeSet attrs) {
        this(context, attrs,0 
);
    }

    public TEChartWebView(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(true);
        webSettings.setDisplayZoomControls(true);
        addJavascriptInterface(new TEChartWebView.WebAppEChartInterface(getContext()), "Android");
        loadUrl("file:///android_asset/echartWeb/EChart/EChart.html");
    }


    class WebAppEChartInterface {
        Context context;

        public WebAppEChartInterface(Context context) {
            this.context = context;
        }

        @JavascriptInterface
        public void showToast(String msg) {
            Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
        }

        /**
         * 獲取
         *
         * @return
         */
        @JavascriptInterface
        public String getChartOptions() {
            if (dataSource != null) {
                GsonOption option = dataSource.markLineChartOptions();
                LogUtils.d(option.toString());
                return option.toString();
            }
            return null;
        }

    }

    ////////////////////////////資料來源

    private DataSource dataSource;

    public void setDataSource(DataSource dataSource) {
        this.dataSource = dataSource;
        //
        reload();
    }

    public DataSource getDataSource() {

        return dataSource;
    }

    public interface DataSource {
        GsonOption markLineChartOptions();
    }

}

其中前端相關原始碼：

# html

<!DOCTYPE HTML >
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <title>ECharts · Example</title>

    <!-- 匯入script -->
    <!--<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js"></script>-->
    <script src="../echarts-all.js"></script>
    <script src="../jquery-3.2.0.js"></script>
    <script src="./EChart.js"></script>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body onLoad="toast('頁面載入中...')">
    <!--<hr/>-->
    <!--style="height:300px; border: 1px solid #f00"-->
    <div id="lineChart" ></div>
    <!--<hr/>-->
</body>

</html>

EChart.js:

$(function() {
    init();
});

function toast(msg){
     Android.showToast(msg);
}

function init() {
    initChartView();
}

function initChartView() {
//    toast("initLineChartView");
    /*必須加JOSN.parse 轉換資料型別
     *Android表示JAVA類TEChartWebView中的addJavascriptInterface(new TEChartWebView.WebAppEChartInterface(getContext()), "Android");中的Android
     *getChartOptions為WebAppEChartInterface介面中的方法
     */
    var option = JSON.parse(Android.getChartOptions());
    var lineChartDoc = document.getElementById('lineChart');
    /*
     *設定lineChart的高度為Android中控制元件WebView的高度（達到不能滑動且顯示完全的效果）
     *var height = document.documentElement.clientHeight;
     *var height = window.innerHeight
     *這2個獲取高度建議選擇第二個
     */
    var height = window.innerHeight;
//    toast("height" + height.toString());
    $(lineChartDoc).css('height', height);
    //
    var lineChart = echarts.init(lineChartDoc);
    lineChart.setOption(option);
//    lineChart.setOption(makeStaticOptions());//直接在js中獲取靜態資料
}


//地址：http://echarts.baidu.com/echarts2/doc/example/line8.html
function makeStaticOptions(){

    option = {
        title : {
            text : '時間座標折線圖',
            subtext : 'dataZoom支援'
        },
        tooltip : {
            trigger: 'item',
            formatter : function (params) {
                var date = new Date(params.value[0]);
                data = date.getFullYear() + '-'
                       + (date.getMonth() + 1) + '-'
                       + date.getDate() + ' '
                       + date.getHours() + ':'
                       + date.getMinutes();
                return data + '<br/>'
                       + params.value[1] + ', '
                       + params.value[2];
            }
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        dataZoom: {
            show: true,
            start : 70
        },
        legend : {
            data : ['series1']
        },
        grid: {
            y2: 80
        },
        xAxis : [
            {
                type : 'time',
                splitNumber:10
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: 'series1',
                type: 'line',
                showAllSymbol: true,
                symbolSize: function (value){
                    return Math.round(value[2]/10) + 2;
                },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 200) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            }
        ]
    };

    return option;

}

如何使用：

具體程式碼：

xml:

<com.tikeyc.tandroidechartlibrary.TEChartWebView
        android:id="@+id/barChartWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.tikeyc.tandroidechartlibrary.TEChartWebView>

public class TBarChartActivity extends TBaseActivity {

    @ViewInject(R.id.barChartWebView)
    private TEChartWebView barChartWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        this.isLandScape = true;
        super.onCreate(savedInstanceState);
        //設定橫屏
        if(this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }
        setContentView(R.layout.activity_tbar_chart);

        initData();
        initView();
    }



    private void initData() {

    }


    private void initView() {
        x.view().inject(this);

        //
        navigationBar_title_tv.setText("BarChart");
        //設定資料來源
        barChartWebView.setDataSource(new TEChartWebView.DataSource() {
            @Override
            public GsonOption markLineChartOptions() {
                return getLineAndBarChartOption();
            }
        });
    }


    /**根據https://mvnrepository.com/artifact/com.github.abel533/ECharts
     * 結合http://echarts.baidu.com/examples.html官方例項
     * 配置json資料
     * @return
     */
    public GsonOption getLineAndBarChartOption() {
        //http://echarts.baidu.com/echarts2/doc/example/mix1.html
        GsonOption option = new GsonOption();
        //title
        String text = "text";
        String subText = "subText";
        option.title(text,subText);
        //tooltip
        Tooltip tooltip = new Tooltip();
        tooltip.trigger(Trigger.axis);
        option.tooltip(tooltip);
        //toolbox
        Toolbox toolbox = new Toolbox();
        toolbox.show(true);
        Map<String, Feature> feature = new HashMap<String, Feature>();
        feature.put("mark",new Feature().show(true));
        feature.put("dataView",new DataView().show(true).readOnly(false));
        feature.put("magicType",new MagicType(Magic.line, Magic.bar).show(true));
        feature.put("restore",new Restore().show(true));
        feature.put("saveAsImage",new SaveAsImage().show(false));
        toolbox.setFeature(feature);
        option.toolbox(toolbox);
        //calculable
        option.setCalculable(true);
        //legend
        String legend1 = "蒸發量";
        String legend2 = "降水量";
        String legend3 = "平均溫度";
        Legend legend = new Legend();
        legend.data(legend1,legend2,legend3);
        option.legend(legend);
        //grid
//            Grid grid = new Grid();
//            grid.y2(80);
//            option.grid(grid);
        //xAxis
        List<Axis> xAxis = new ArrayList<Axis>();
        CategoryAxis categoryAxis = new CategoryAxis();
        {
            List xAxisValues = new ArrayList();
            for (int i = 1; i <= 12; i++) {
                xAxisValues.add(i + "月");
            }
            categoryAxis.setData(xAxisValues);
        }
        xAxis.add(categoryAxis);
        option.xAxis(xAxis);
        //yAxis
        List<Axis> yAxis = new ArrayList<Axis>();
        {
            ValueAxis valueAxis = new ValueAxis();
            valueAxis.name("水量");
            valueAxis.axisLabel(new AxisLabel().formatter("{value} ml"));
            yAxis.add(valueAxis);
        }
        {
            ValueAxis valueAxis = new ValueAxis();
            valueAxis.name("溫度");
            valueAxis.axisLabel(new AxisLabel().formatter("{value} °C"));
            yAxis.add(valueAxis);
        }
        option.yAxis(yAxis);
        //series
        List<Series> series = new ArrayList<Series>();
        {
            Bar bar = new Bar();
            bar.name(legend1).type(SeriesType.bar).yAxisIndex(0);
            List data = new ArrayList();
            double arrays[] = {2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3};
            for (double value : arrays){
                data.add(value);
            }
            bar.setData(data);
            series.add(bar);
        }
        {
            Bar bar = new Bar();
            bar.name(legend2).type(SeriesType.bar).yAxisIndex(0);
            List data = new ArrayList();
            double arrays[] = {2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3};
            for (double value : arrays){
                data.add(value);
            }
            bar.setData(data);
            series.add(bar);
        }
        {
            Line line = new Line();
            line.name(legend3).type(SeriesType.line).yAxisIndex(1);
            List data = new ArrayList();
            double arrays[] = {2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2};
            for (double value : arrays){
                data.add(value);
            }
            line.setData(data);
            series.add(line);
        }
        option.series(series);
        //
        return option;
    }
}

使用百度前端EChart框架封裝的Android版TAndroidEChart

TAndroidEChart image 新增依賴：一. gradle Step 1：新增maven { url 'https://jitpack.io' } 到project的build.gradle allprojects { repositorie

IFE百度前端技術學院4/24/2018

結果 sheet terms 自然 spa 外部 for link 等價 day1: day2: 好的簡歷：你可以參考自己的簡歷內容，也可以參考網上一些熱門簡歷內容，比如羨轍的簡歷（她簡歷的樣式每年校招簡歷總能看見很多人在復用，所以，希望大家以後做簡歷的時候換個樣式吧

百度前端學院-基礎學院-第七天到第八天

相同自己的 http 視口 you css align 其他知識點第五天到第六天的內容沒有記筆記，不好不好。第七天到第八天的學習目標是：學習布局的各種方式。主要包含position相關和Flexbox相關。知識點： 1、默認情況下，塊級元素的內容寬度是其父元素的寬

百度前端學院-基礎學院-第吳課/第六課

bubuko doc 長度 borde href developer mar 例如特殊今天是一個跨天的任務，學習目標是：掌握CSS盒模型及Float；盒模型要點：如果盒子的高度被設置為百分比長度，那麽盒子高度不會遵循這個設置了的百分比長度，而是總會采用盒子內容的高

百度前端學習日記07——布局（三）Flexbox

enter end develop docs -i ali -s 阻止 div 前言更多參考MDN flex布局正文 1.Flexbox模型主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為

百度前端學習日記10——javaScript基本語法

lean his lse highlight ... bject cti arr boolean 1.變量 a.變量類型 Number 數字 String 字符串 Boolean 布爾型true和false Array 數組 Object 對象 b.變量聲明 var n;

百度前端學習日記20——定時器

out val interval fun tint 日記 tin clear 對象 setTimeout("function",time) 設置一個超時對象 setInterval("function",time) 設置一個超時對象 SetInterval為自動重復，set

百度前端技術學院--CSS佈局例項

CSS背景圖片佈局 <!doctype html><html><body>...Your content goes here...</body></html>　　給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。　　其實，

基於vue2.0實現仿百度前端分頁效果（二）

前言上篇文章中，已經使用vue實現前端分頁效果，這篇文章我們單獨將分頁抽離出來實現一個分頁元件先看實現效果圖程式碼實現按照慣例，我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

百度前端學院參考答案：第二十五天到第二十七天倒數開始滴答滴滴答滴（1）

編碼我們現在來做一個最簡單的時鐘，通過小練習來學習 Date，複習定時，然後再練習一下函式的封裝具體需求如下：在頁面中顯示當前日期及時間，按秒更新格式為 YYYY 年 MM 月 DD 日星期 D HH:mm:ss 注意位數的補齊，比如：-- 假設時間為2008年10月10日星期一的1

百度網站收錄教程（個人版）

讓百度搜索到有兩種方法，一種是等百度主動來爬取你的網站，還有一種是你自己主動提交給百度告訴它來爬取。第一種週期太過漫長，所以本文就講第二種 1.準備網站首先，想要做SEO的同學，需要考慮清楚所選擇的前端框架。現在主流的angularJs，Vue.js，react.js這

百度前端技術學院：第二十五天到第二十七天倒數開始滴答滴滴答滴

var year=document.getElementById("year-select"); var month=document.getElementById("month-select"); var day=document.g

百度前端學院學習Day2

前言昨天，瞭解了Web開發的基本原理，使用html製作了簡易的簡歷，以及編寫css為文字和字型新增屬性。 4.背景、邊框、列表、連結和選擇器目標掌握CSS稍複雜的選擇器，還有背景、邊框等樣式屬性。閱讀編碼 #head

百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

var regionGroup = document.getElementById("region-radio-wrapper"); var productGroup = document.getElementById("product-radio-wrapper");

百度前端學院學習Day3

前言之前初步瞭解了盒模式的概念，現在來學習如何佈局。 7、8：學習佈局目標學習佈局的各種方式閱讀編碼分別嘗試使用Float、Position或者Flexbox來實現如下需求：實現一個兩欄佈局，左側佔30%寬度，右側佔7

百度前端學院學習DAY1

9、10：做一個網站目標將一個設計稿轉化為網頁，通過這個過程學習各種css知識。閱讀按照設計師提供的設計稿，實現HTML頁面，需要將設計稿切分成為最終在頁面中呈現的一個個圖片，我們一般稱之為“切圖”，在不同公司，切圖的工作可能是不同職位做，可能是

前端自學旅程（關於百度前端學院的）

Wandering Saint 一個畢業於不入流的二本大學的學生的前端旅程：名字：Wandering Saint 專業：天馬行空愛好：音樂美術讀書最喜歡的歌手：許巍擅長的樂器：吉他未來的職業規劃：做一個天馬行空的前端程式猿人生信仰：還沒出現

百度前端技術學院（二）給自己做一個線上簡歷吧

一、製作線上簡歷二、小問題 HTML是什麼，HTML5是什麼？ HTML(Htper Text Markup Language)超文字標記語言，不是程式語言，而是一種標記語言，標記語言是一套標記標籤，HTML使用標記標籤來描述網頁。 HTML5是最新的HTML標

前端讀者 | 百度前端編碼規範（JS）

本文來自：百度FEX 1 前言 JavaScript在百度一直有著廣泛的應用，特別是在瀏覽器端的行為管理。本文件的目標是使JavaScript程式碼風格保持一致，容易被理解和被維護。雖然本文件是針對JavaScript設計的，但是在使用各種JavaScript的預編譯語言時(如TypeScript等)時

2017秋招百度前端一面面經

8月電話面試，一面基本是基礎，忘記那個部門了 react用的怎樣？ react和vue的區別 mvc和mvvm的區別為什麼選擇mvvm sass的優勢 webpack的用途 es6瞭解哪些設計模式瞭解哪些 let和var的區別模組化了解

使用百度前端EChart框架封裝的Android版TAndroidEChart

TAndroidEChart

新增依賴：

封裝原始碼：

TEChartWebView控制元件原始碼

其中前端相關原始碼：

# html

EChart.js:

如何使用：

具體程式碼：

xml:

相關推薦