在Android 中使用 echarts

AaVictory.

已于 2022-12-08 08:51:49 修改

阅读量6.1k

点赞数 4

文章标签： echarts android

于 2021-09-15 16:51:46 首次发布

本文链接：https://blog.csdn.net/afufufufu/article/details/120308064

版权

本文介绍了如何在Android应用中使用ECharts框架展示图表。ECharts是百度提供的开源图表库，通常通过WebView加载H5页面来使用。文章提到了两种实现方案：Android封装数据传递给H5解析和H5负责所有操作。文中以第一种方案为例，详细讲解了如何下载ECharts库，创建HTML文件，以及在XML布局和Kotlin代码中设置WebView。

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

首先奉上官网

做Android开发经常会需要画一些图表，自己写的话不仅麻烦而且工作量太大，所以一般都会采用第三方图表框架 ,这时候就用到了ECharts

在这里插入图片描述

前言

ECharts 是由百度开发提供的开源框架，主要提供给Web使用，所以Android中一般使用WebView加载显示，其实本质上也就是用 WebView 加载本地 H5。
ECharts的图表样式主要由option控制，option是由js编写，如下面代码就是一个简单折线图的option。

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

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

以第一种为例：
下载自定义图表

将下载好的echarts.min.js文件放入工程中assets目录下。
编写healthy.html文件，并将healthy.html放入assets目录。

(或者直接输入healthy.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height: 244px;"></div>
<script type="text/javascript">
     var myChart1 = echarts.init(document.getElementById('main'));

var option;
option = {
   
        title: {
   
          text: "工单数波形图",
          textStyle: {
   
            color: "#2DC3FB",
            fontWeight: "bold",
            fontSize: "16",
          },
          padding: [20, 0, 0, 0],
        },
        tooltip: {
   
          backgroundColor: "#31516B",
          opacity: 0.3,
          trigger: "axis",
          axisPointer: {
     // 焦点处样式
            type: "cross",
          },
          extraCssText: "text-align: center;",
          //在这里设置
          formatter: "{b0}<br/>{c0}个",
          textStyle: {
   
            color: "rgba(145, 201, 246, 1)",
          },
        },
        legend: {
   
          data: ["总工单", "未完成工单"],
          textStyle: {
   
            color: "#738CA0",
          },
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          right: 16,
          top: 16,
        },
        grid: {
   
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
   
          type: "category",
          axisTick: