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
我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。