TAndroidEChart

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

GitHub地址 https://github.com/tikeyc/TAndroidEChart

image

更多實例見： http://echarts.baidu.com/examples.html

添加依賴：

一. 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

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

更多實例見： http://echarts.baidu.com/examples.html

添加依賴：

封裝源碼：

TEChartWebView控件源碼

其中前端相關源碼：

# html

EChart.js:

如何使用：

具體代碼：

xml:

OC混編swift時EMBEDDED_CONTENT_CONTAINS_SWIFT錯誤的處理

iOS 關於Block的使用及循環引用

如何使用KeyChain保存和獲取不變的UDID

即時通訊原理-Instant Messenger

Xcode8 Use Legacy Swift Language Version的錯誤解決

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結