iOS、Android使用ECharts完美实现任意图表移动端图表需求，iOS、Android如何利用Echarts高效

背景说明

在平时的开发过程中，可能避免不了统计图表的需求，笔者就遇到了比较多的图表统计需求，所以对这块也查了不少资料，目前的开源库有两个比较好的库，一个AAChartKit，一个是iOS-Echarts，两者用法非常相似，由于配置项比较多，所以在使用时配置起来比较耗费时间，需要对配置项做一定的了解，可能有的配置项是用字符串来配置的，格式不统一。下面记录一下笔者使用ECharts在iOS端完成各种图表的方法。

1、打开ECharts官网，找到满足自己的图表，比如找一个散点图，通过配置项配置满足自己的Option

2、新建chart.html

注意关键一点引入echarts.min.js,这个可能不固定，有多个版本，这里选择了一个可以满足需求的，加载时间也可以接受，可以自行选择fastly.jsdelivr.net/npm/echarts…

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Pie Special Label - Apache ECharts Demo</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="chart-container"></div>
</script>-->
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
  <script type="text/javascript" src="./index.js"></script>
</body>
</html>

3、新建chart.js

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var app = {};
var option;

var tips;
var xAxis = [];
var yAxis = [];
var data;


function setData(chartData){
    console.log(chartData);
    const json = JSON.parse(chartData);
    yAxis = json["dates"];
    xAxis = json["xAxis"];
    data = json["data"];
    tips = json["tips"];
    console.log(yAxis);
    console.log(xAxis);
    console.log(data);
    console.log(tips);
    
    
    option = {
  xAxis: xAxis,
  yAxis: yAxis,
  series: [
    {
      symbolSize: 20,
      data: data,
      type: 'scatter'
    }
  ]
};
    
    
    option && myChart.setOption(option);
    
}

4、通过WebView加载本地html

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];

NSURL *url = [NSURL fileURLWithPath:filePath];

[self.webView loadRequest:[NSURLRequest requestWithURL:url]];

5、数据交互

webView和原生的交互，这里不做介绍，直接贴代码

- (**void**)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

    [HKCommon hideLoading];

    NSString *jsonStr = [**self**.data safe_toJSONString_UTF8];

    NSString *jsStr = [NSString stringWithFormat:@"setData('%@')",jsonStr];

    [webView evaluateJavaScript:jsStr completionHandler:^(**id** **_Nullable** response, NSError * **_Nullable** error) {
    }];

}

由于笔者是iOSer，以ios为例贴了一下代码，安卓也同样可以使用该方法。

原创不易，转载请标明出处！！！！！！