bar-stack.png
screen1.gif
更多实例见： http://echarts.baidu.com/examples.html
前言
使用百度前度Echart框架：
http://echarts.baidu.com/
https://gitee.com/free/ECharts
参考iOS封装实现：
https://github.com/Pluto-Y/iOS-Echarts
等资料对Android版本的实现进行简单的封装
时间不是很充裕，只能在零碎时间上来一点一点补充，因此肯定会出现许多不足之处
希望在未来的某一天自己能封装的很完善
项目GitHub地址 https://github.com/tikeyc/TAndroidEChart
添加依赖：
- 方式一
Step 1：添加maven { url '[https://jitpack.io](https://jitpack.io/)' } 到project的build.gradle
allprojects {
repositories {
...
maven { url '[https://jitpack.io](https://jitpack.io/)' }
}
}
versionNum为最新版本的值 如：v1.2.1
Step 2: 添加compile 'com.github.tikeyc:TAndroidEChart:versionNum'到你app的build.gradle
dependencies {
compile 'com.github.tikeyc:TAndroidEChart:versionNum'
}
- 方式二
直接下载完整项目，import一个module：tandroidechartlibrary
如何使用：
具体代码：
xml:
可能后续操作需要刷新图表，可以这样调用
（注意：不能在第一时间就用此方法来显示图表，因为第一时间html的标签还未加载完成，不能获取到标签值）
barChartWebView. refreshEchartsWithOption(getLineAndBarChartOption());
public class TBarChartActivity extends TBaseActivity {
@ViewInject(R.id.barChartWebView)
private TEChartWebView barChartWebView;
@Event(R.id.navigationBar_title_tv)
private void titleClick(View view) {
if (!view.isSelected()) {
barChartWebView.refreshEchartsWithOption(getLineChartOptions());
} else {
barChartWebView.refreshEchartsWithOption(getLineAndBarChartOption());
}
view.setSelected(!view.isSelected());
}
@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");
//开启调试模式默认false
barChartWebView.setDebug(true);
//设置数据源
barChartWebView.setDataSource(new TEChartWebView.DataSource() {
@Override
public GsonOption markChartOptions() {
return getLineAndBarChartOption();
}
});
//添加事件监听
TEChartConstant.PYEchartAction[] echartActions = {TEChartConstant.PYEchartAction.PYEchartActionLegendSelected, TEChartConstant.PYEchartAction.PYEchartActionClick};
barChartWebView.addEchartActionHandler(echartActions, new TEChartWebView.OnAddEchartActionHandlerResponseResultListener() {
@Override
public void actionHandlerResponseResult(String result) {
//查看事件信息 处理事件
/*TEChartConstant.PYEchartAction.PYEchartActionLegendSelected
*
*{"selected":{"蒸发量":true,"降水量":true,"平均温度":true},"target":"蒸发量","type":"legendSelected","event":{"zrenderX":220.33299255371094,"zrenderY":8.666999816894531,"zrenderFixed":1},"__echartsId":1512031135165}
*/
/*TEChartConstant.PYEchartAction.PYEchartActionClick
*
*{"seriesIndex":1,"seriesName":"降水量","dataIndex":4,"data":28.7,"name":"5月","value":28.7,"type":"click","event":{"zrenderX":261,"zrenderY":209,"zrenderFixed":1}}
*/
}
});
}
/**根据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 feature = new HashMap();
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 xAxis = new ArrayList();
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 yAxis = new ArrayList();
{
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 = new ArrayList();
{
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;
}
public GsonOption getLineChartOptions() {
//地址:http://echarts.baidu.com/echarts2/doc/example/line5.html
GsonOption option = new GsonOption();
option.legend("高度(km)与气温(°C)变化关系");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter("Temperature :
{b}km : {c}°C");
ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter("{value} °C");
option.xAxis(valueAxis);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter("{value} km");
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);
Line line = new Line();
line.smooth(true).name("高度(km)与气温(°C)变化关系").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
option.series(line);
return option;
}
}
封装源码：
TEChartWebView控件源码
public class TEChartWebView extends WebView {
/** 默认false
* 在EChart.html和EChart.js中因开发调试多处调用了function toast(msg) 可以设置为true开启调试模式
*/
private boolean isDebug = false;
/**
* 存放在第一时间需要Android调用js的function
* 因为在第一次见EChart.html及EChart.js还没有加载完成，而Java代码却是在第一时间调用了
* 所以需要等到html的标签及js加载成功后再调用，在WebViewClient中的onPageFinished方法中
*/
private List shouldCallJsFunctionArray = new ArrayList();
public void setDebug(boolean isDebug) {
this.isDebug = isDebug;
}
public boolean isDebug() {
return isDebug;
}
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);
initWebViewClient();
init();
}
private void init() {
//
WebSettings webSettings = getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setSupportZoom(false);
webSettings.setDisplayZoomControls(false);
addJavascriptInterface(new TEChartWebView.WebAppEChartInterface(getContext()), "Android");
loadUrl("file:///android_asset/echartWeb/EChart/EChart.html");
}
private void initWebViewClient () {
setWebViewClient(new WebViewClient(){
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
for (String callJs : shouldCallJsFunctionArray) {
loadUrl(callJs);
}
}
@Override
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
}
});
}
/**刷新图表
* java调用js的refreshEChartWithGsonOption方法刷新echart
* 不能在第一时间就用此方法来显示图表，因为第一时间html的标签还未加载完成，不能获取到标签值
* 需先设置数据源DataSource，后续视具体情况来手动刷新
* @param option
*/
public void refreshEchartsWithOption(GsonOption option) {
if (dataSource == null) {
assert false : "ataSource == null";
}
String optionString = option.toString();
String call = "javascript:refreshEchartsWithOption('" + optionString + "')";
loadUrl(call);
}
/**添加图表事件响应监听
* @param echartActions 事件名称数组
* @param onAddEchartActionHandlerResponseResultListener 事件点击后的echart返回的事件信息(echart返回的事件信息:http://echarts.baidu.com/api.html#events) 响应监听给开发者
*/
public void addEchartActionHandler(TEChartConstant.PYEchartAction[] echartActions, OnAddEchartActionHandlerResponseResultListener onAddEchartActionHandlerResponseResultListener) {
this.onAddEchartActionHandlerResponseResultListener = onAddEchartActionHandlerResponseResultListener;
//
for (TEChartConstant.PYEchartAction echartAction : echartActions) {
String callString = echartAction.actionValue;
String call = "javascript:addEchartActionHandler('" + callString + "')";
//loadUrl(call);
shouldCallJsFunctionArray.add(call);
}
}
/**移除图表事件响应监听
* @param echartAction 事件名称
*/
public void removeEchartActionHandler(TEChartConstant.PYEchartAction echartAction) {
String callString = echartAction.actionValue;
String call = "javascript:removeEchartActionHandler('" + callString + "')";
loadUrl(call);
}
/**
*显示Echart自带的默认样式的Loading
*/
public void myChartShowLoading() {
String call = "javascript:myChartShowLoading()";
//loadUrl(call);
shouldCallJsFunctionArray.add(call);
}
/**
*隐藏Echart自带的默认样式的Loading
*/
public void myChartHideLoading() {
String call = "javascript:myChartHideLoading()";
loadUrl(call);
}
///////////////////////WebAppEChartInterface////////////////////////////////
/**
* js 与 Android原生交互接口
*/
class WebAppEChartInterface {
Context context;
public WebAppEChartInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void showDebugMessage(String message) {
if (isDebug) LogUtils.e(message);
}
/**
* 获取图表配置JSON数据
*
* @return
*/
@JavascriptInterface
public String getChartOptions() {
if (dataSource != null) {
GsonOption option = dataSource.markChartOptions();
LogUtils.d(option.toString());
return option.toString();
}
return null;
}
/**添加图表事件响应监听
* @param params echart返回的事件信息 http://echarts.baidu.com/api.html#events
*/
@JavascriptInterface
public void addEchartActionHandlerResponseResult(String params) {
LogUtils.e(params);
if (onAddEchartActionHandlerResponseResultListener != null) {
onAddEchartActionHandlerResponseResultListener.actionHandlerResponseResult(params);
}
}
/**移除图表事件响应监听
* @param params echart返回的事件信息 http://echarts.baidu.com/api.html#events
*/
@JavascriptInterface
public void removeEchartActionHandlerResponseResult(String params) {
LogUtils.e(params);
}
}
///////////////////////WebAppEChartInterface////////////////////////////////
////////////////////////////数据源 获取图表的JSON配置//////////////////////////////
private DataSource dataSource;
public void setDataSource(DataSource dataSource) {
this.dataSource = dataSource;
//
reload();
}
public DataSource getDataSource() {
return dataSource;
}
public interface DataSource {
GsonOption markChartOptions();
}
////////////////////////////数据源 获取图表的JSON配置//////////////////////////////
////////////////////////////添加事件监听echart返回的 事件相关属性（是一个json），将该json返回给开发者使用
///////////////////////////echart返回的事件信息:http://echarts.baidu.com/api.html#events
private OnAddEchartActionHandlerResponseResultListener onAddEchartActionHandlerResponseResultListener;
public void setOnAddEchartActionHandlerResponseResultListener(OnAddEchartActionHandlerResponseResultListener onAddEchartActionHandlerResponseResultListener) {
this.onAddEchartActionHandlerResponseResultListener = onAddEchartActionHandlerResponseResultListener;
}
public OnAddEchartActionHandlerResponseResultListener getOnAddEchartActionHandlerResponseResultListener() {
return onAddEchartActionHandlerResponseResultListener;
}
public interface OnAddEchartActionHandlerResponseResultListener {
void actionHandlerResponseResult(String result);
}
}
时间不是很充裕，只能在零碎时间上来一点一点补充，因此肯定会出现许多不足之处
希望在未来的某一天自己能封装的很完善
项目GitHub地址 https://github.com/tikeyc/TAndroidEChart