TAndroidEChart
使用百度前端EChart框架封装的Android版TAndroidEChart
GitHub地址 https://github.com/tikeyc/TAndroidEChart
更多实例见: http://echarts.baidu.com/examples.html
添加依赖:
一. gradle
Step 1:添加maven { url 'https://jitpack.io' } 到project的build.gradle
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2: 添加compile 'com.github.tikeyc:TAndroidEChart:v1.0'到你app的build.gradle
dependencies {
compile 'com.github.tikeyc:TAndroidEChart:v1.0'
}
二:或者直接下载完整项目,import一个module:tandroidechartlibrary
封装源码:
TEChartWebView控件源码
public class TEChartWebView extends WebView {
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);
init();
}
private void init() {
//
WebSettings webSettings = getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setSupportZoom(true);
webSettings.setDisplayZoomControls(true);
addJavascriptInterface(new TEChartWebView.WebAppEChartInterface(getContext()), "Android");
loadUrl("file:///android_asset/echartWeb/EChart/EChart.html");
}
class WebAppEChartInterface {
Context context;
public WebAppEChartInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
}
/**
* 获取
*
* @return
*/
@JavascriptInterface
public String getChartOptions() {
if (dataSource != null) {
GsonOption option = dataSource.markLineChartOptions();
LogUtils.d(option.toString());
return option.toString();
}
return null;
}
}
数据源
private DataSource dataSource;
public void setDataSource(DataSource dataSource) {
this.dataSource = dataSource;
//
reload();
}
public DataSource getDataSource() {
return dataSource;
}
public interface DataSource {
GsonOption markLineChartOptions();
}
}
其中前端相关源码:
# html
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>ECharts · Example</title>
<!-- 导入script -->
<!--<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js"></script>-->
<script src="../echarts-all.js"></script>
<script src="../jquery-3.2.0.js"></script>
<script src="./EChart.js"></script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body onLoad="toast('页面加载中...')">
<!--<hr/>-->
<!--style="height:300px; border: 1px solid #f00"-->
<div id="lineChart" ></div>
<!--<hr/>-->
</body>
</html>
EChart.js:
$(function() {
init();
});
function toast(msg){
Android.showToast(msg);
}
function init() {
initChartView();
}
function initChartView() {
// toast("initLineChartView");
/*必须加JOSN.parse 转换数据类型
*Android表示JAVA类TEChartWebView中的addJavascriptInterface(new TEChartWebView.WebAppEChartInterface(getContext()), "Android");中的Android
*getChartOptions为WebAppEChartInterface接口中的方法
*/
var option = JSON.parse(Android.getChartOptions());
var lineChartDoc = document.getElementById('lineChart');
/*
*设置lineChart的高度为Android中控件WebView的高度(达到不能滑动且显示完全的效果)
*var height = document.documentElement.clientHeight;
*var height = window.innerHeight
*这2个获取高度建议选择第二个
*/
var height = window.innerHeight;
// toast("height" + height.toString());
$(lineChartDoc).css('height', height);
//
var lineChart = echarts.init(lineChartDoc);
lineChart.setOption(option);
// lineChart.setOption(makeStaticOptions());//直接在js中获取静态数据
}
//地址:http://echarts.baidu.com/echarts2/doc/example/line8.html
function makeStaticOptions(){
option = {
title : {
text : '时间坐标折线图',
subtext : 'dataZoom支持'
},
tooltip : {
trigger: 'item',
formatter : function (params) {
var date = new Date(params.value[0]);
data = date.getFullYear() + '-'
+ (date.getMonth() + 1) + '-'
+ date.getDate() + ' '
+ date.getHours() + ':'
+ date.getMinutes();
return data + '<br/>'
+ params.value[1] + ', '
+ params.value[2];
}
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom: {
show: true,
start : 70
},
legend : {
data : ['series1']
},
grid: {
y2: 80
},
xAxis : [
{
type : 'time',
splitNumber:10
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: 'series1',
type: 'line',
showAllSymbol: true,
symbolSize: function (value){
return Math.round(value[2]/10) + 2;
},
data: (function () {
var d = [];
var len = 0;
var now = new Date();
var value;
while (len++ < 200) {
d.push([
new Date(2014, 9, 1, 0, len * 10000),
(Math.random()*30).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
]);
}
return d;
})()
}
]
};
return option;
}
如何使用:
具体代码:
xml:
<com.tikeyc.tandroidechartlibrary.TEChartWebView
android:id="@+id/barChartWebView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.tikeyc.tandroidechartlibrary.TEChartWebView>
public class TBarChartActivity extends TBaseActivity {
@ViewInject(R.id.barChartWebView)
private TEChartWebView barChartWebView;
@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");
//设置数据源
barChartWebView.setDataSource(new TEChartWebView.DataSource() {
@Override
public GsonOption markLineChartOptions() {
return getLineAndBarChartOption();
}
});
}
/**根据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<String, Feature> feature = new HashMap<String, Feature>();
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<Axis> xAxis = new ArrayList<Axis>();
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<Axis> yAxis = new ArrayList<Axis>();
{
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> series = new ArrayList<Series>();
{
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;
}
}