Android使用绘图插件ECharts 画折线图，饼图，柱状图，正弦图

其他 2020-06-25 10:08:00 阅读次数: 0

目录

ECharts 是由百度开发提供的开源框架，主要提供给Web使用，所以Android中一般使用WebView加载显示，其实本质上也就是用 WebView 加载本地 H5。

基本配置

下载插件：
官网下载：
https://echarts.apache.org/zh/download.html

git下载
https://github.com/apache/incubator-echarts/tree/4.7.0/
我是从git下载的

下载

在这里插入图片描述

下载完成后，在main目录下新建assets文件夹，从下载文件中找到echarts.min.js文件，复制到libs中
incubator-echarts-4.7.0\incubator-echarts-4.7.0\dist\echarts.min.js
下面配图错了，把libs换成assets
在这里插入图片描述

添加echarts依赖：

ctrl+shift+alt+s

在这里插入图片描述
在这里插入图片描述
依赖添加好之后会出现：
在这里插入图片描述
打开app/gradle build文件，查看
在这里插入图片描述

添加gson

在这里插入图片描述

在这里插入图片描述

echarts.html文件，并将echarts.html放入assets目录。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="./echarts.min.js"></script>
        <script type="text/javascript">
                var dom =document.getElementById("container");
                var myChart =echarts.init(dom);
                var app ={};
                function loadEcharts(echartJson){
                    var option = JSON.parse(echartJson);
                    if (option &&typeof option ==="object") {
                        myChart.setOption(option,true);
                    }
                }
        </script>
</body>
</html>

在andorid中使用ECharts,一般来讲我们有两种实现方案

  • Android获取数据并封装好option，然后传递给h5，h5再对数据进行解析，调用ECharts绘制。
    这种方案的难点在于option的属性太多了，封装起来太麻烦。
  • h5处理所有操作，进行获取数据，并调用ECharts进行绘制。
    这种方案需要对js比较熟悉。

使用第一种方案，已经有大神帮我们做好最困难的数据封装工作：
打开app/gradle build文件，添加

implementation 'com.github.abel533:ECharts:3.0.0.2'

在这里插入图片描述

项目地址https://github.com/abel533/ECharts

应用

折线图

相关配置已经配置好了之后，开始尝试

EChartView.java

因为Echarts需要在WebView中显示，所以我们直接自定义一个EchartView继承自WebView用来显示图表。
EchartView 就相当于一个封装的WebView，操作都基本和WebView相同

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.github.abel533.echarts.json.GsonOption;

public class EChartView extends WebView {
    private static final String TAG = EChartView.class.getSimpleName();

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

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

    public EChartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
    	//EChartView其实就是WebView，对WebView的配置也要对EChartView进行相应的配置
        WebSettings webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportZoom(false);
        webSettings.setDisplayZoomControls(false);
        loadUrl("file:///android_asset/echarts.html");
    }

    /**刷新图表
     * java调用js的loadEcharts方法刷新echart
     * 不能在第一时间就用此方法来显示图表，因为第一时间html的标签还未加载完成，不能获取到标签值
     * @param option
     */
    public void refreshEchartsWithOption(GsonOption option) {
        if (option == null) {
            return;
        }
        String optionString = option.toString();
        String call = "javascript:loadEcharts('" + optionString + "')";
        loadUrl(call);
    }
}



activity.main

将EChartsView在布局中显示出来，用来显示图表

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <com.example.test.EChartView
        android:id="@+id/lineChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>
    
</LinearLayout>

EChartOptionUtil.java

EChart里面最重要的就是option了，图表所有的配置都在option中
Android想要使用ECharts,就必须要将option中的数据进行封装，
EChartOptionUtil 就是用来将数据封装为option，这里只封装了一个简单的折线图做例子。

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Line;

public class EChartOptionUtil {
    /**
     * 画折线图
     *
     * @param xAxis x轴的相关配置
     * @param yAxis y轴的相关配置
     * @return
     */
    public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) {
        //通过option指定图表的配置项和数据
        GsonOption option = new GsonOption();
        option.title("折线图");//折线图的标题
        option.legend("销量");//添加图例
        option.tooltip().trigger(Trigger.axis);//提示框（详见tooltip），鼠标悬浮交互时的信息提示

        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);//添加y轴

        CategoryAxis categorxAxis = new CategoryAxis();
        categorxAxis.axisLine().onZero(false);//坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
        categorxAxis.boundaryGap(true);
        categorxAxis.data(xAxis);//添加坐标轴的类目属性
        option.xAxis(categorxAxis);//x轴为类目轴

        Line line = new Line();
        
        //设置折线的相关属性
        line.smooth(true).name("销量").data(yAxis).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        
        //添加数据，将数据添加到option中
        option.series(line);
        return option;
    }

}





MainActivity.main

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private EChartView lineChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lineChart = findViewById(R.id.lineChart);
        lineChart.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //最好在h5页面加载完毕后再加载数据，防止html的标签还未加载完成，不能正常显示
                refreshLineChart();
            }
        });
    }
    private void refreshLineChart(){
        Object[] x = new Object[]{
                "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
        };
        Object[] y = new Object[]{
                820, 932, 901, 934, 1290, 1330, 1320
        };
        lineChart.refreshEchartsWithOption(EChartOptionUtil.getLineChartOptions(x, y));
    }

}

我画了一个图，希望可以帮助理解
在这里插入图片描述

结果：

在这里插入图片描述

饼图

其实这些都是差不多的，
先修改activity.xml的布局，让饼图能显示出来,View只是为了显示一条分割线

acitvity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.test.EChartView
        android:id="@+id/lineChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000"/>

    <com.example.test.EChartView
        android:id="@+id/pieChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>
</LinearLayout>

EChartOptionUtil.java

既然是画饼图，肯定需要相应的方法，在EChartOptionUtil.java中添加getPieChartOptions 获得对饼图option的封装
如果对ECharts有一定的了解，看懂下面的代码应该很简单。
饼图的数据在调用的时候传入，这里应该是用到了EChartOption的异步加载数据

public class EChartOptionUtil {

    public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) {...}

    /**
     * 饼状图的option配置
     * @param data  待传入的饼图的数据
     * @return
     */
    public static GsonOption getPieChartOptions(List<Map<String, Object>> data) {
        GsonOption option = new GsonOption();
        option.title("饼图");
        option.legend("输出");
        option.tooltip().trigger(Trigger.axis);

        Pie pie = new Pie();
        pie.name("hello");
        pie.type(SeriesType.pie);
        pie.radius("55%");
        pie.itemStyle().emphasis().shadowBlur(10).shadowOffsetX(0).shadowColor("rgba(0, 0, 0, 0.5)");
        pie.setData(data);//data是传入的参数

        option.series(pie);
        return option;
    }
}

EChartView.java

这个文件并不需要修改。

MainActivity.main

操作和折线图类似，不同的是加载饼图的数据时需要注意。

public class MainActivity extends AppCompatActivity {
    private EChartView lineChart;
    private EChartView pieChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ......

        pieChart = findViewById(R.id.pieChart);
        pieChart.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                refreshPieChart();
            }
        });
    }
    private void refreshLineChart(){.....}

    private void refreshPieChart(){
        String name;
        Integer value;
        //初始化数据
        List< Map<String, Object> > data = new ArrayList<Map<String, Object>>();
        HashMap hashMap1 = new HashMap();
        hashMap1.put("value", 50);
        hashMap1.put("name", "jack");
        HashMap hashMap2 = new HashMap();
        hashMap2.put("value", 30);
        hashMap2.put("name", "tom");
        HashMap hashMap3 = new HashMap();
        hashMap3.put("value", 20);
        hashMap3.put("name", "rose");
        HashMap hashMap4 = new HashMap();
        hashMap4.put("value", 20);
        hashMap4.put("name", "rose");
        //pie.data(hashMap,hashMap1,hashMap2);

        data.add(hashMap1);
        data.add(hashMap2);
        data.add(hashMap3);
        data.add(hashMap4);

        pieChart.refreshEChartsWithOption(EChartOptionUtil.getPieChartOptions(data));
    }

}

结果：

在这里插入图片描述

柱状图

柱状图就和折线图很类似了，不像圆饼图传入数据的时候可能不知道传入数据的格式。

acitvity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.test.EChartView
        android:id="@+id/lineChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000"/>

    <com.example.test.EChartView
        android:id="@+id/pieChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000"/>

    <com.example.test.EChartView
        android:id="@+id/barChart"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.EChartView>
</LinearLayout>

EChartOptionUtil.java

最核心的一个类就是这个类了。

package com.example.test;

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.SeriesType;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.series.Pie;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class EChartOptionUtil {

    /**
     * 封装折线图的option
     * @param xAxis x轴的相关配置
     * @param yAxis y轴的相关配置
     * @return 返回封装好的折线图的option
     */
    public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) {......}

  
    /**
     * 封装饼图的option
     * @param data  待传入的饼图的数据
     * @return 返回封装好的饼图的option
     */
    public static GsonOption getPieChartOptions(List<Map<String, Object>> data) {......}
    
      /**
     * 封装柱状图的option
     * @param xAxis x 轴的相关数据
     * @param yAxis y 轴的相关数据
     * @return 返回封装好的柱状图的option
     */
    public static GsonOption getBarChartOptions(Object[] xAxis, Object[] yAxis){
        GsonOption option = new GsonOption();
        option.title("柱状图");
        option.legend("年龄");
        option.tooltip().trigger(Trigger.axis);

        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);//添加y轴，将y轴设置为值轴

        CategoryAxis categorxAxis = new CategoryAxis();
        categorxAxis.data(xAxis);//设置x轴的类目属性
        option.xAxis(categorxAxis);//添加x轴

        Bar bar = new Bar();
        //设置饼图的相关属性
        bar.name("销量").data(yAxis).itemStyle().normal().setBarBorderColor("rgba(0,0,0,0.4)");
        option.series(bar);

        return option;
    }
}

EChartView.java

这个文件并不需要修改。

MainActivity.main

操作几乎和折线图完全相同

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    private EChartView lineChart;
    private EChartView pieChart;
    private EChartView barChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ......

        barChart = findViewById(R.id.barChart);
        barChart.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                refreshBarChart();
            }
        });
    }
    private void refreshLineChart(){}
	
	private void refreshPieChart(){}

    private void refreshBarChart(){
        //定义一个数组x，用来显示星期几
        Object[] x = new Object[]{
                "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
        };
        //用来显示每天对应的数据
        Object[] y = new Object[]{
                820, 932, 901, 934, 1290, 1330, 1320
        };
        //刷新图标
        barChart.refreshEChartsWithOption(EChartOptionUtil.getBarChartOptions(x, y));
    }
}

结果：

在这里插入图片描述

多种图形混合在一起

如果只是像下面这样，是不可以的
在这里插入图片描述

EChartOptionUtil.java

原理还是一样，就是在option中封装多个系列：
这里数据直接在option中初始化好了。

public static GsonOption getMixChartOptions(){
        GsonOption option = new GsonOption();
        option.title("混合图");
        option.tooltip().trigger(Trigger.axis);

        /*x,y轴的值*/
        //定义一个数组x，用来显示星期几
        Object[] x = new Object[]{
                "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
        };
        //用来显示每天对应的数据
        Object[] y = new Object[]{
                820, 932, 901, 934, 1290, 1330, 1320
        };

        List< Map<String, Object> > data = new ArrayList<Map<String, Object>>();
        HashMap hashMap1 = new HashMap();
        hashMap1.put("value", 50);
        hashMap1.put("name", "jack");
        HashMap hashMap2 = new HashMap();
        hashMap2.put("value", 30);
        hashMap2.put("name", "tom");
        HashMap hashMap3 = new HashMap();
        hashMap3.put("value", 20);
        hashMap3.put("name", "rose");
        HashMap hashMap4 = new HashMap();
        hashMap4.put("value", 20);
        hashMap4.put("name", "rose");
        //pie.data(hashMap,hashMap1,hashMap2);

        data.add(hashMap1);
        data.add(hashMap2);
        data.add(hashMap3);
        data.add(hashMap4);


        //x,y轴相关配置
        ValueAxis valueAxis = new ValueAxis();//值轴
        option.yAxis(valueAxis);//添加y轴

        CategoryAxis categorxAxis = new CategoryAxis();//类目轴
        categorxAxis.axisLine().onZero(false);//坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
        categorxAxis.boundaryGap(true);
        categorxAxis.data(x);//添加坐标轴的类目属性
        option.xAxis(categorxAxis);


        Bar bar = new Bar();
        //设置饼图的相关属性
        bar.name("销量").data(y).itemStyle().normal().setBarBorderColor("rgba(0,0,0,0.4)");
        option.series(bar);

        Line line = new Line();
        //设置折线的相关属性
        line.smooth(true).name("销量").data(y).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        //添加数据，将数据添加到option中
        option.series(line);

        Pie pie = new Pie();
        pie.name("hello");
        pie.type(SeriesType.pie);
        pie.radius("55%");
        pie.itemStyle().emphasis().shadowBlur(10).shadowOffsetX(0).shadowColor("rgba(0, 0, 0, 0.5)");

        pie.setData(data);

        option.series(pie);

        return option;
    }

acitvity_main.xml

这里只显示了一个EChartsView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.test.EChartView
        android:id="@+id/MixChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center">
    </com.example.test.EChartView>

</LinearLayout>

MainActivity.main

原理还是和之前一样：

public class MainActivity extends AppCompatActivity {
    private EChartView lineChart;
    private EChartView pieChart;
    private EChartView barChart;
    private EChartView MixChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MixChart = findViewById(R.id.MixChart);
        MixChart.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                MixChart.refreshEChartsWithOption(EChartOptionUtil.getMixChartOptions());
            }
        });
	}
}

结果：

在这里插入图片描述

正弦图

其实学习ECharts就是为了画正弦图，如果单纯的画一下静态的正弦图自然没有什么意思，就是一个y=Math.sin(x)的折线图，但是我想在Android输入A，w，，呈现一种动态效果。学习了这么久，终于画出来了。真的太不容易了。
画不多说，贴上代码：

acitvity_main.xml

界面很简单，还是一个自定义的EchartView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/sin_a"
        android:hint="请输入振幅A"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/sin_w"
        android:hint="请输入频率w"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/sin_φ"
        android:hint="请输入初相φ"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/refresh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击刷新"/>

    <com.example.test.echarts.EChartView
        android:id="@+id/SinChart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
    </com.example.test.echarts.EChartView>


</LinearLayout>

EChartView

这里需要稍微改变一下。

package com.example.test.echarts;

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.github.abel533.echarts.json.GsonOption;

public class EChartView extends WebView {
    private static final String TAG = EChartView.class.getSimpleName();

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

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

    /**
     * 构造器，
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public EChartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //WebSettings设置浏览器的一些属性
        WebSettings webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);//让webView即EChartView支持JavaScript
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportZoom(false);
        webSettings.setDisplayZoomControls(false);
        loadUrl("file:///android_asset/echarts.html");//加载布局，将网址传入，EChartView中显示的就是echarts.html
    }

    /**刷新图表
     * java调用js的loadEcharts方法刷新echart
     * 不能在第一时间就用此方法来显示图表，因为第一时间html的标签还未加载完成，不能获取到标签值
     * @param option
     */
    public void refreshEChartsWithOption(GsonOption option) {//option
        if (option == null) {
            return;
        }
        //将option转换为JSON格式
        String optionString = option.toString();
        String call = "javascript:loadEcharts('" + optionString + "')";
        loadUrl(call);//加载页面

    }

    /**
     * 正弦图的相关配置
     * @param option
     * @param sinA
     * @param sinw
     * @param sinφ
     */
    public void refreshEChartsWithOption(GsonOption option, int sinA, int sinw, int sinφ) {//option
        if (option == null) {
            return;
        }
        //将option转换为JSON格式
        String optionString = option.toString();
        String call = "javascript:loadEcharts('" + optionString + "')";
        loadUrl(call);//加载页面

        String add = "javascript:interval('" + sinA + "','" + sinw  + "','" + sinφ +"')";
        loadUrl(add);
    }
}

EChartOptionUtil.java

正弦图本质还是折线图，所以这里就是

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Line;

public class EChartOptionUtil {
    /**
     * 画折线图
     *
     * @param xAxis x轴的相关配置
     * @param yAxis y轴的相关配置
     * @return
     */
    public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) {
        //通过option指定图表的配置项和数据
        GsonOption option = new GsonOption();
        option.title("折线图");//折线图的标题
        option.legend("销量");//添加图例
        option.tooltip().trigger(Trigger.axis);//提示框（详见tooltip），鼠标悬浮交互时的信息提示

        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);//添加y轴

        CategoryAxis categorxAxis = new CategoryAxis();
        categorxAxis.axisLine().onZero(false);//坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
        categorxAxis.boundaryGap(true);
        categorxAxis.data(xAxis);//添加坐标轴的类目属性
        option.xAxis(categorxAxis);//x轴为类目轴

        Line line = new Line();
        
        //设置折线的相关属性
        line.smooth(true).name("销量").data(yAxis).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        
        //添加数据，将数据添加到option中
        option.series(line);
        return option;
    }

}

MainActivity.main

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import com.example.test.echarts.EChartOptionUtil;
import com.example.test.echarts.EChartView;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {
    private EChartView lineChart;
    private EditText inputSinA;
    private EditText inputSinW;
    private EditText inputSinφ;
    private Button refreshSin;

    private int sinA = 1;
    private int sinw = 1;
    private int sinφ = 0;

    @SuppressLint("JavascriptInterface")

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获取到EChartView的实例
        lineChart = findViewById(R.id.SinChart);
        inputSinA =(EditText) findViewById(R.id.sin_a);
        inputSinW =(EditText) findViewById(R.id.sin_w);
        inputSinφ =(EditText) findViewById(R.id.sin_φ);
        refreshSin = (Button) findViewById(R.id.refresh) ;


        //传入一个WebView的实例，当从一个网页跳转到另一个网页时，我们希望目标网页仍然在当前网页中
        lineChart.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //开启线程
                //最好在h5页面加载完毕后再加载数据，防止html的标签还未加载完成，不能正常显示
                refreshSin.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        refreshLineChart();
                    }
                });

            }
        });

    }

    //刷新正弦图
    private void refreshLineChart() {
        Object[] x = new Object[]{}; //x轴数据
        Object[] y = new Object[]{};//y轴数据

        String inputsina = inputSinA.getText().toString().trim();
        String inputsinw = inputSinW.getText().toString().trim();
        String inputsinφ = inputSinφ.getText().toString().trim();

        if (!inputsina.equals("")) {
            sinA = (int) Double.parseDouble(inputsina);
        }
        if (!inputsinw.equals("")) {
            sinw = (int) Double.parseDouble(inputsinw);
        }
        if (!inputsinφ.equals("")) {
            sinφ = (int) Double.parseDouble(inputsinφ);
        }

        //刷新图标
        lineChart.refreshEChartsWithOption(EChartOptionUtil.getLineChartOptions(x, y), sinA, sinw, sinφ);
    }
}

echarts.html

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script type="text/javascript">
        var date = [];//x轴的数据
        var data = [100];//y轴的数据，100表示y轴的初始值是100
        var xadd = 1;//x轴的每次增量是100
        var A = 2;

        var dom =document.getElementById("container");
        var myChart =echarts.init(dom);

        var app ={};
        function loadEcharts(echartJson){
            var option = JSON.parse(echartJson);
            if (option &&typeof option ==="object") {
                myChart.setOption(option,true);
            }
        }

        function addData(shift,a,w,φ) {
            date.push(xadd);//date是x轴的数据集
            data.push(a * Math.sin(w * xadd + φ * Math.PI));//data 是y轴的数据集

            if (shift) {
                date.shift();//移除date中的第一个元素
                data.shift();//移除data中的第一个元素
            }
            xadd  += 1;//xadd加一，下一次调用addData的时候，会将xadd 的值加入date中
        }

        for (var i = 1; i < 2; i+=0.05) {
            addData();//初始化data和date
        }

        option = {
            xAxis: {
                type: 'category',   //设置x轴为类目轴
                boundaryGap: false,
                data: date //
            },
            yAxis: {
                boundaryGap: [0, '50%'],
                type: 'value'//设置y轴为值轴
            },
            series: [
                {
                    name:'成交',
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    stack: 'a',

                    data: data
                }
            ]
        };
        function  interval(b=1,w=1,φ=0){
            setInterval(function(){
                addData(true,b,w,φ); //调用addData，参数为true说明每调用一次addData会将date，data的首元素移除
                myChart.setOption({//设置option
                    xAxis: {
                        data: date//x轴的值对应date数组中的值
                    },
                    series: [{
                        name:'成交',
                        data: data//y轴的值对应data数组中的值
                    }]
                });
            }, 100);
        }

        interval(b,w,φ);

    </script>
</body>
</html>

结果：
在这里插入图片描述

如果有需要源码的可以在下面留言，我看到的话可以发给你

更多

官方例子：
https://echarts.apache.org/examples/zh/index.html

EChart java 对象库
https://github.com/abel533/ECharts

我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。

本文部分参考自：https://www.jianshu.com/p/c2b589170379

猜你喜欢

转载自blog.csdn.net/weixin_45468845/article/details/106743450
今日推荐
“开源信徒”周鸿祎开源360智脑大模型
华为ensp中vrrp虚拟路由器冗余协议 原理及配置命令
基于Python爬虫广东广州水酒店宾馆数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状
知识融合：知识图谱构建的关键技术
文心一言收费还是免费：全面解析其价格策略与服务价值
百万用户通话新风潮：仅需50秒，无界AI让彩铃变身短视频
【STM32项目】基于STM32多传感器融合的新型智能导盲杖设计（完整工程资料源码）
文生视频大模型Sora的复现经验
腾讯云函数计算技术：云原生架构下的Serverless与微服务新篇章
干货分享｜JumpServer 三种常见的文件传输方式效果对比
【榜单公布】2023年度征文活动已结束
周排行
Java中关于时间的操作及格式化
《HTML5与CSS3基础教程》第五章学习笔记 图像
nginx下安装PHP发生问题的逐步解决
HDU-1048，The Hardest Problem Ever（字符串处理）
新一代多媒体技术与应用的部分课后题
Shader 绘制特殊图形
Oracle数据库三种备份方案
CodeForces - 983B XOR-pyramid(两次区间DP/记忆化DFS)
Python3基础语法——变量与运算符
（转载）KMP算法详解 （原创）详解KMP算法
每日归档
更多
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)
2024-04-07(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022