Android中echart动态数据的使用

最新推荐文章于 2024-05-20 16:50:16 发布

LLLIIYYY

最新推荐文章于 2024-05-20 16:50:16 发布

阅读量663

点赞数 2

文章标签： android

本文链接：https://blog.csdn.net/weixin_39587245/article/details/103655160

版权

html代码: html文件中定义好显示样式这里是全屏显示，并且定义好一个用来升级数据的方法（updateData）, 这样子就可以在Android中调用以更新数据。

定义了一个初始化Option  然后在java的webView加载完成时调用一次就好了  然后就只需要更新里面数据就好了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		html,body,#chart {
			margin: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="chart"></div>
	<script src="./echarts.min.js"></script>
	<script>
		var chart = echarts.init(document.getElementById('chart'));
		function updateData(option){chart.setOption(option)}
		
		//定义一个初始化Option  然后在java的webView加载完成时调用一次就好了  然后就只需要更新里面数据就好了
		var init_option = {
			xAxis:{type:'category'},
			yAxis:{type:'value'},
			series:{type:'line', data:[]}
		}
	</script>
</body>
</html>

1.1.1 XML代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

1.1.2 JAVA代码：

public class Echart extends Fragment {

    private Gson gson;
    private Random random;
    private WebView webView;

    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(@NonNull Message message) {
            updateData();
            handler.sendEmptyMessageDelayed(0, 1000);
            return false;
        }
    });

    private int dataMax;
    private int dataLen;
    private LinkedList<Integer> data;

    private void updateData() {
        if (data.size()>dataLen)data.removeFirst();
        data.add(random.nextInt(dataMax));
        webView.evaluateJavascript("updateData({series:{data:"+gson.toJson(data)+"}})", null);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_echart, container, false);
        gson = new Gson();
        random = new Random();
        initView(view);
        initData();
        return view;
    }

    private void initData() {
        //定义一个储存数据的List
        data = new LinkedList<>();

        //顺便定义一些全局变量
        dataMax = 100;  //数据最大值
        dataLen = 20;   //数据长度
    }

    private static final String TAG = "Echart";
    private boolean init = false;
    @SuppressLint("SetJavaScriptEnabled")
    private void initView(View view) {
        webView = view.findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                //因为webView的onPageFinished会在页面加载完成时被调用两次  所以这里定义了一个boolean全局变量来标记以确保只调用一次 优化一些性能(推荐)
                if (!init){
                    webView.evaluateJavascript("updateData(init_option)", null);
                    handler.sendEmptyMessage(0);
                    init = true;
                }
                super.onPageFinished(view, url);
            }
        });
        webView.loadUrl("file:///android_asset/echart/chart.html");
    }

    @Override
    public void onDestroy() {
        if (webView != null) webView.destroy();
        handler.removeMessages(0);
        super.onDestroy();
    }
}

这时可以发现x轴重没有刻度并且当数据的长度到达指定长度时再次更新数据时不是整条线向左移动，而是整条线都扭曲移动，难看并且看起来就像换了一整条数据一样所以我们可以给chart添加指定的时间刻度

首先再定义一个List储存x轴的数据和一个时间转换器

在这里插入图片描述
并且在更新数据时把x轴数据也一起同步更新这样子效果就美观很多了

LLLIIYYY

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Android中echart动态数据的使用

html代码: html文件中定义好显示样式这里是全屏显示，并且定义好一个用来升级数据的方法（updateData）, 这样子就可以在Android中调用以更新数据。定义了一个初始化Option 然后在java的webView加载完成时调用一次就好了然后就只需要更新里面数据就好了<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫