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

最新推荐文章于 2025-04-13 00:15:00 发布

风吹我亦散

最新推荐文章于 2025-04-13 00:15:00 发布

阅读量4.8k

点赞数 12

分类专栏： # ECharts 文章标签： android

本文链接：https://blog.youkuaiyun.com/weixin_45468845/article/details/106743450

版权

本文介绍了如何在Android中使用ECharts绘制折线图、饼图、柱状图和正弦图。通过下载ECharts插件，添加依赖和Gson，然后在布局文件中配置EChartView，结合EChartOptionUtil封装数据，最终在MainActivity中调用。示例代码展示了每种图形的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本配置

下载插件：
官网下载：
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

在这里插入图片描述

依赖添加好之后会出现：

打开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>

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

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

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

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

在这里插入图片描述

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

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>

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

}

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 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 refreshLineCh

最低0.47元/天解锁文章