echarts 图表：autocharts.js 一行代码自

前言

你是否被后端传来的千奇百怪的echarts数据搞得焦头烂额？你是否在为如何封装echarts数据而探索？

autocharts.js 可以帮助你一行代码生成符合echarts基本格式的options数据。而你，我亲爱的朋友，你只需要关心图表的样式即可。

使用

npm i autocharts.js

import autoCharts from "autocharts.js";
  let autoData = autoCharts.findChartData({
    rawData: yourData,
    xKey: "col3",
    yKey: "levelCount",
    type: "pie",
  });

返回的autoData将包括 legend、xAxis、series

然后你只需：

结果：

如果你的数据是这种（推荐）格式：

dataTimes是时间，其他的为长度一致的数组，那么你可以直接传入这整个数据而无需其他参数

  let autoData = autoCharts.findChartData({
    rawData: data,
  });

结果：

参数说明

rawData：原始数据，目前仅支持两种常用的数据结构，详情请看readme.md

type：图表的类型，如 pie

xKey：指定 x 轴的键名

yKey：指定 y 轴的键名

原理

因为各种复杂结构的数据繁杂众多，autocharts.js作为通用工具不可能考虑全面，所以仅拿了两种较为常见的结构进行解析，一种是成员为包含一组数据（包括 x 轴、 y 轴的数据）的数组 ，即 Array<Object> ；另一种是一个对象包含多个长度一致的数组，其中数据一一对应的。

对于第一种数据，需要手动传入x轴、y轴的键名，工具将根据键名生成一个echarts基本结构。

第二种数据（推荐），工具将查找对象中出现次数最多且长度一致的数组，若为数字将其视为 y 轴数据，若为字符串则视为 x 轴数据，如果你的数据不是按照这种格式来的，你依然可以通过指定键名来告诉工具哪个是 x 轴哪个是 y 轴。

警告

此工具 v1.0.3 未进行系统测试，请勿用于生产环境！

npm主页：www.npmjs.com/package/aut…

github主页：github.com/LarryZhu-de…

欢迎大家测试，以及提供更多的复杂数据和解析方法，希望autocharts.js可以早日投入生产！