Android图表开发之ECharts

最新推荐文章于 2025-06-02 12:23:05 发布

原创

最新推荐文章于 2025-06-02 12:23:05 发布 · 6.9k 阅读

13 ·

CC 4.0 BY-SA版权

本文介绍了在Android中使用ECharts进行图表开发的方法。ECharts是一个强大的JavaScript库，适用于Web端，但在Android中需要借助WebView。由于JavaScript与Android交互的延迟加载问题，作者讨论了两种实现方式：1) HTML负责所有流程，包括获取数据、生成option和绘制；2) 数据处理在Android端，H5页面负责解析数据和绘制。同时，文章强调了根据项目需求选择合适的图表库和实现方式的重要性。

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

开始这篇文章之前，需要提到一个上篇文章中忘记说的一个问题，就是我们在使用HelloCharts绘制折线图的时候，当我们进入其它界面后重新进入该界面有可能会出现折线图中首尾两个点相连的奇怪现象（兴许还有其他绘制怪象），这是因为数据残留的原因，所以我们需要每次在绘制图表的时候先清除一下之前的数据，清除方法就是把我们用来存储PointValue的集合clear一下就OK了！那今天我们就来聊聊ECharts吧。。。

ECharts是百度推出的基于JavaScript实现的开源可视化库，可以说涵盖量非常广，基本上我们需要用到的图表，它都能提供，现在更新到3.0版本，我看了下官网给出的例子，可以帮我们实现很多酷炫的图表要求，大家可自行欣赏一下：ECharts Demo

既然这么好用，我们为什么还要用其他的库呢，直接用这个多省事。。。别急，前面说到了ECharts是基于JavaScript实现的，所以它更多地是被运用在Web端开发上，对于我们Android开发而言，想要用的话就必须有一个可以和JavaScript交互的控件，没错，就是WebView，正因为我们是用WebView加载图表，所以图表在绘制的时候会出现延迟加载的现象，尤其当我们需要加载的数据很多的时候，我们会发现进入界面后一两秒的时间，图表才被绘制出来，好在图表绘制的时候会有一个动画效果，但对于有些用户而言可能体验效果就没有那么好，当然我们可以运用一些技术手段让它没有延迟加载的现象。所以就像我在上篇文章中介绍的时候提到的，当我们项目中只是需要一些简单的图表展示时，我觉得是没有必要引入ECharts的，图表要求比较高的时候，ECharts绝对是一个不错的选择！

那么接下来我们就开始介绍它的用法了，Android中的实现方式就是WebView加载本地H5，而ECharts里各种图表的属性和数据等都是由option决定的，这里我们将介绍两种方式来生成option，从而绘制图表。。。

在介绍实现方式之前，我们需要去ECharts官网下载我们所需要的js文件，官网提供了四个版本：

每个版本所包含的图表组件量是不一样的，而官网也特别提到了我们在开发环境中建议选择源代码版本，因为该版本中包含了常见的警告和错误提示，方便我们排查问题，那么我们在演示的时候也选择源代码版吧，文件名称为echarts.js，每个版本的名称是不一样的，大家还是要根据开发实际需求进行选择吧，如果只是简单的折柱饼图表要求，我觉得没有必要放一个源代码版的进去，毕竟2.76MB呢

下载完成以后就可以把我们echarts.js文件放入到工程目录的assets文件夹下了，那么接下来就来看看是如何实现的。。。

方式1：html负责所有的流程，获取数据、生成option并调用ECharts进行绘制

这种方式的侧重点就在H5页面了，首先我们需要在assets文件夹下新建一个本地H5页面，接下来的操作都是在该H5页面完成，我们需要在该页面中完成对相应图表位置、大小、颜色、数据等很多属性的设置，对于不是很熟悉标签语言的人来说是一件很痛苦的事，并且你会发现没有任何提示，一不留神就有可能出错，并且很难排查错误，然后运行的时候就会发现怎么都没法显示，殊不知你有可能只是在某个地方少写了个英文版的逗号。。。但这种方式有一个好处就是一次开发三端（Web/Android/IOS）使用，所以公司如果有Web大神的话，强烈建议让他来写这些页面，我们只需要用WebView加载就行，那么下面就贴出我写的H5页面的代码，这段代码也是借鉴了网上某位大神的，个人觉得相对灵活，大家可以先看一下：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<div

最低0.47元/天解锁文章

200万优质内容无限畅学