Echart Java类库实现轻爽炫丽的Android Echarts图表

简要说明： 本人最近在学习Android的网络一节时，看到和JavaScript有关的知识时，就很想趁热打铁实现Echarts炫彩图表的Android本地展示，便在此处予以分享，有不足与错误之处请各位大佬指正。

相关类库下载

具体步骤

1. 生成模拟数据

注： 此处的数据仅仅是为了方便测试类库实现，读者可以根据不同的需求，采用不同的数据获取方式

  • 此处我采用的是自己定义了数据类AccessData，并且给出了相应的数据获取方法getWeekData()，具体的代码如下所示：
//数据对象
public class AccessData {
    //日期
    private String date;
    //访问量
    private Integer nums;
    // 构造函数
    AccessData(String date, Integer nums) {
        ...
    }
    // getter,setter方法
    ...

    /**
     * 模拟获取数据
     * @return 此处可按照自定义的数据类型
     */
    public static List<AccessData> getWeekData() {
        List<AccessData> list = new ArrayList<AccessData>(7);
        list.add(new AccessData("09-16", 4));
        list.add(new AccessData("09-17", 7));
        list.add(new AccessData("09-18", 14));
        list.add(new AccessData("09-19", 304));
        list.add(new AccessData("09-20", 66));
        list.add(new AccessData("09-21", 16));
        list.add(new AccessData("09-22", 205));
        return list;
    }

2. 利用大神的Echarts-Java类库，绘制线图

  • 此处，我定义了myLineChart类，用于生成对应的Echarts Line图对应的的Option选项，并返回为JSON，字符串，该类中的部分方法采用@JavascriptInterface修饰，以方便xx.html中的JavaScript块调用该option，代码如下：
public class myLineChart {

    Context mContext;
    // 用户数据的数据结构，可后面自己定义
    List<AccessData> lineDatas;

    /**
     * 构造函数
     * @param context
     * @param datas:利用构造函数传入用户的数据
     */
    public myLineChart(Context context, List<AccessData> datas) {
        this.mContext = context;
        // 获取数据
        this.lineDatas = datas;
    }

    // 将该方法暴露给JavaScript脚本调用
    @JavascriptInterface
    public String getLineChartOptions() {
        GsonOption option = (GsonOption) creatLineChartOptions();
//            Log.d(option.toString());
        return option.toString();
    }

    // 此函数主要是绘 Line 图
    @JavascriptInterface
    public Option creatLineChartOptions() {

        // 创建Option对象
        GsonOption option = new GsonOption();
        // 设置图标标题，并且居中显示
        option.title().text("最近7天的访问量").x(X.center);
        // 设置图例，居中显示
        option.legend().data("访问量").x(X.center).y(Y.bottom).borderWidth(1);
        // 设置y轴为值轴，并且不显示y轴，最大值设置400，最小值-100
        option.yAxis(new ValueAxis()
                .name("IP")
                .axisLine(new AxisLine()
                        .show(true)
                        .lineStyle(new LineStyle().width(0)))
                .max(400)
                .min(-100));
        // 创建类目轴，并且不显示竖着的分割线
        CategoryAxis categoryAxis = new CategoryAxis()
                .splitLine(new SplitLine().show(false))
                .axisLine(new AxisLine().onZero(false));
        // 不显示表格边框，就是围着图标的方框
        option.grid().borderWidth(0);

        // 创建Line数据
        // 此处开始使用用户的数据
        Line line = new Line("访问量").smooth(true);
        // 根据获取的数据赋值
        for (AccessData lineData : lineDatas) {
            // 增加类目，值为日期
            categoryAxis.data(lineData.getDate());
            // 日期对应的数据
            line.data(lineData.getNums());
        }
        // 设置X轴为类目轴
        option.xAxis(categoryAxis);
        // 设置数据
        option.series(line);
        return option;
    }

  • 注，该段代码需要import Echarts-java类库相关API，使用该类库的方法如下：

    • 方法一：本地下载类库

      1. 下载ECharts:3.0.0.6类库和Gson:2.8.x到本地...\xxxxDemo\app\libs
      2. 在Android Studio下面的Project页面，找到该...\xxxxDemo\app\libs下的**.jar**文件，右键点击Add As Library
      3. 在工程Gradle Scripts下的build.gradle，双击打开查看是否在dependencies{...}里面生成，如果不成功请手动编辑，最后如下所示：
      dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation files('libs/ECharts-3.0.0.6.jar')
    implementation files('libs/gson-2.8.0.jar')
    ...
}

      具体位置可查看下图：
      Echart Java类库实现轻爽炫丽的Android Echarts图表

  • 方法二：直接在在工程Gradle Scripts下的build.gradle，双击打开在dependencies{...}里面编辑

    dependencies {
      ...
      implementation 'com.github.abel533:ECharts:3.0.0.6'
      implementation 'com.google.code.gson:gson:2.8.0'
      ...
}

  • 在导入库成功后，便可以在myLineChart类中采用：

    import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.AxisLine;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.SplitLine;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.code.Y;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.style.LineStyle;

3. 在MainActivity.java，配置WebView，加载对应的.html

注： 在MainActivity对应的activity_main.xml，仅单纯的存在一个WebView组件，此处不再展示。
MainActivity.java代码如下所示：

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView)findViewById(R.id.webView);

        // 获取指定数据格式的数据,此处可以和外部交互
        List<AccessData> datas = getWeekData();

        // 进行WebView设置
        WebSettings webSettings = webView.getSettings();

        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportZoom(true);
        webSettings.setDisplayZoomControls(true);
        // 给JavaScript传递生成的myLineChart的Option
        webView.addJavascriptInterface(new myLineChart(this,datas), "myLine");
        webView.loadUrl("file:///android_asset/myechart.html");
        webView.setWebViewClient(new WebViewClient());
    }
}

4. 编辑myechart.html页面，进行Echarts配置，绘图

  • 引入echarts.common.min.js
  • 为 ECharts 准备一个具备大小（宽高）的 DOM
  • 获取Java代码生成的option
  • JOSN.parse 转换josn字符串类型数据为JavaScript对象
  • 进行绘图
    如下面的详细代码：
<head>
    <meta charset="utf-8" />
    <style>
        <!-- Css 样式-->
        ...
    </style>
</head>
<!-- ECharts单文件引入 -->
<script src="js/echarts.common.min.js"></script>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="float: center; width: '100%';height: 380px; margin-left: '2%';margin-bottom: 35px"></div>
    <script type="text/javascript">
        // 图表的加载区域
        var dom = document.getElementById('main');
        var myChart = echarts.init(dom);
        // 必须加JOSN.parse 转换数据类型
        var option = JSON.parse(myLine.getLineChartOptions());

        // 查询
        function loadChart() {
            myChart.clear();
            myChart.showLoading({
                text: '正在努力的读取数据中...'
            });
            myChart.setOption(option);
            myChart.hideLoading();

        };

        // 载入图表
        loadChart();
    </script>

</body>

5. 项目结构和安装演示

项目结构

Echart Java类库实现轻爽炫丽的Android Echarts图表

演示效果

Echart Java类库实现轻爽炫丽的Android Echarts图表

6. 本人项目地址

EchartDemo2
EchartDemo1：采用的是直接JavaScript代码生成，主要是H5 负责所有流程，获取数据、生成 option并调用 ECharts 进行绘制
本人的AndroidApp项目，有学习兴趣的可以一起交流，主要参考的是疯狂Android第三版的代码

相关文章：

  • 2022-12-23
  • 2021-09-13
  • 2021-11-30
  • 2021-08-19
  • 2022-12-23
  • 2021-09-18
  • 2021-03-27
  • 2021-07-24
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-07-12
  • 2021-04-04
  • 2021-08-14
  • 2021-08-16
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode