devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android使用绘图插件ECharts 画折线图，饼图，柱状图，正弦图_android开发图表插件

作者：IT小白 | 2024-03-17 06:38:01

赞

踩

android开发图表插件

目录

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

  • 1

在这里插入图片描述
在这里插入图片描述
依赖添加好之后会出现：
在这里插入图片描述
打开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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在andorid中使用ECharts,一般来讲我们有两种实现方案

  • Android获取数据并封装好option，然后传递给h5，h5再对数据进行解析，调用ECharts绘制。
    这种方案的难点在于option的属性太多了，封装起来太麻烦。
  • h5处理所有操作，进行获取数据，并调用ECharts进行绘制。
    这种方案需要对js比较熟悉。

使用第一种方案，已经有大神帮我们做好最困难的数据封装工作：
打开app/gradle build文件，添加

implementation 'com.github.abel533:ECharts:3.0.0.2'

  • 1

在这里插入图片描述

项目地址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);
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54



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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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;
    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43





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 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/254620
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号