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

来源：互联网发布：搜狗拼音输入法云计算编辑：程序博客网时间：2024/06/06 03:15

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.htmlfunction 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;    }}

阅读全文

0 0