在AS中尝试用echart画图
第一步：下载必要组件
进入官网下载所需JS文件，不知道怎么下载请选择方法三定制,在线生成一份定制JS下载
https://echarts.apache.org/zh/download.html
在Android中的Gradle添加依赖(需要gson依赖)
implementation 'com.github.abel533:ECharts:3.0.0.2'
implementation files('libs/gson-2.8.0.jar')
第二步：尝试在HTML用echart画图
这是最后完成后的文件的位置
复制官方文档上的示例HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
将下载下来的echarts.min.js放于HTML同级目录，运行HTML,得到一张柱形图
尝试在AS中画图
HTML部分
新建assets
在assets下新建js文件夹，并把echarts.min.js放在里面
在assets下新建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="./js/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>
Java部分
新建EchartView.java，代码如下
package com.example.administrator.myapplication;
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() {
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);
}
}
新建EchartOptionUtil.java,代码如下
(此处形参可以封装成类进行调用)
package com.example.administrator.myapplication;
import com.github.abel533.echarts.axis.Axis;
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.Bar;
import com.github.abel533.echarts.series.Line;
import java.util.ArrayList;
import java.util.List;
public class EchartOptionUtil {
public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis, Object[] yAxis2, Object[] yAxis3, Object[] yAxis4, Object[] yAxis5, Object[] yAxis6, Object[] yAxis7) {
GsonOption option = new GsonOption();
option.title("违章拥堵状况");
option.legend("学院路");
option.legend("联想路");
option.legend("医院路");
option.legend("幸福路");
option.legend("环城快速路");
option.legend("环城高速");
option.legend("停车场");
option.tooltip().trigger(Trigger.axis);
ValueAxis valueAxis = new ValueAxis();
option.yAxis(valueAxis);
CategoryAxis categorxAxis = new CategoryAxis();
categorxAxis.axisLine().onZero(false);
categorxAxis.boundaryGap(true);
categorxAxis.data(xAxis);
option.xAxis(categorxAxis);
// Line line = new Line();
// line.smooth(false).name("销量").data(yAxis).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
// option.series(line);
Bar bar = new Bar();
Bar bar2 = new Bar();
Bar bar3 = new Bar();
Bar bar4 = new Bar();
Bar bar5 = new Bar();
Bar bar6 = new Bar();
Bar bar7 = new Bar();
bar.name("学院路").data(yAxis).itemStyle().normal();
bar2.name("联想路").data(yAxis2).itemStyle().normal();
bar3.name("医院路").data(yAxis3).itemStyle().normal();
bar4.name("幸福路").data(yAxis4).itemStyle().normal();
bar5.name("环城快速路").data(yAxis5).itemStyle().normal();
bar6.name("环城高速").data(yAxis6).itemStyle().normal();
bar7.name("停车场").data(yAxis7).itemStyle().normal();
option.series(bar);
option.series(bar2);
option.series(bar3);
option.series(bar4);
option.series(bar5);
option.series(bar6);
option.series(bar7);
return option;
}
}
填写xml代码
(注意此处com.example.administrator.myapplication根据项目名字选择路径)
<com.example.administrator.myapplication.EchartView
android:id="@+id/lineChart"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
在MainActivity.java调用封装好的函数
package com.example.administrator.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
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[]{
"周一", "周二", "周三", "周四", "周五", "周六", "周日"
};
Object[] y = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y2 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y3 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y4 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y5 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y6 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
Object[] y7 = new Object[]{
(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1),
(int)(Math.random()*4+1),(int)(Math.random()*4+1), (int)(Math.random()*4+1), (int)(Math.random()*4+1)
};
lineChart.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, y,y2,y3,y4,y5,y6,y7));
}
}
参考网址：https://www.jianshu.com/p/c2b589170379
https://blog.csdn.net/weixin_39570075/article/details/81157091
