App Inventor 2 ECharts 拓展：基于 ECharts 强大的个性化数据图表展示

« 返回首页

资源下载

  • .aix 拓展下载：

cn.fun123.ECharts.aix

  • demo程序下载：

echats_demo.aia

注：2个拓展是共一个.aix拓展文件，里面分2个拓展组件，导入.aix效果如下：

ext

也可从拓展市场进行一键导入/升级：

chart

ECharts.js 图表库非常的丰富，只有你想不到没有它做不到的！

不过目前我们开发的种类有限，如果你有其他图表展示的需求，请点击右侧“文档反馈”进行反馈！

logo ECharts 拓展

使用AppInventor2布局进行展示的图表拓展，基于ECharts强大的js图表库开发。v2.0 起内置：柱状图、折线图、饼图、仪表图、条形图、堆叠柱状图、面积图、堆叠面积图、环形图、玫瑰图、漏斗图、散点图、气泡图、雷达图、热力图、K线图、进度环、桑基图等常用图表；并提供通用 Option 接口，可用 ECharts 配置 JSON 绘制任意图表。

属性

ShowAnimation
动画是否开启。
ShowValue
是否显示数字提示。
ThemeIndex
主题设置，数字：1 default, 2 dark, 3 macarons, 4 roma, 5 shine, 6 vintage, 7 infographic
TransparentBackground
背景是否透明，需在Init初始化之前设置。
YAxisMin
Y轴刻度最小显示值：一个数字 - Y轴从该数字开始，或 ‘dataMin’ - 取数据中最小值 或 ‘null’ - 自动计算

事件

Clicked(legend,label,value)
图表被点击时触发。参数 legend: 当前被点击的图例； label: 当前被点击的标签; data: 当前被点击的数据。
ImageSaved(imagePath)
图片保存完成时触发，参数为图片路径（保存失败时不触发）

方法

Bar(title,legends,labels,datas)
画柱状图。title：标题，文本； legends: 图例，列表； labels: 标签，列表; datas: 数据，二维列表。
Gauge(startAngle,endAngle,min,max,value)
画仪表图。startAngle：起始角度； endAngle：结束角度； min：最小值； max：最大值； value：当前值。

角度值参考如下：

direction

Init(layout)
图表拓展初始化。参数是布局对象，指示图表显示的位置。
Line(title,legends,labels,datas,smooth)
画折线图。title：标题，文本； legends: 图例，列表； labels: 标签，列表; datas: 数据，二维列表；smooth：是否平滑。
Pie(title,radius,data)
画饼图。title：标题，文本； radius：半径，列表，如[‘33%’,’60%’]-空心饼图，[‘60%’]-实心饼图； data：{value,name}字典列表，例如 [ { value: 484, name: ‘项目1’ },{ value: 300, name: ‘项目2’ } ]
SaveImage(imageName)
将图表作为图像保存到 ASD 目录。
BarH(title,legends,labels,datas)
画条形图(横向柱状图)。title：标题； legends：图例，列表； labels：标签，列表； datas：数据，二维列表(每行对应一个图例)。
StackedBar(title,legends,labels,datas)
画堆叠柱状图。各图例的数据按标签堆叠。参数同柱状图。
Area(title,legends,labels,datas)
画面积图。参数同折线图。
StackedArea(title,legends,labels,datas)
画堆叠面积图。各图例的数据按标签堆叠。参数同折线图。
Doughnut(title,data)
画环形图。data：{value,name}字典列表，例如 [ { value: 484, name: ‘项目1’ },{ value: 300, name: ‘项目2’ } ]
Rose(title,data)
画玫瑰图(南丁格尔图)。data：{value,name}字典列表。
Funnel(title,data)
画漏斗图。data：{value,name}字典列表。
Scatter(title,legends,datas)
画散点图。legends：图例，列表； datas：三维列表——每个图例一组点，每个点为[x,y]，如 [ [[10,20],[15,25]] ]。
Bubble(title,legends,datas)
画气泡图。datas：三维列表——每个图例一组点，每个点为[x,y,大小]，第三个值控制气泡大小。
Radar(title,indicators,legends,datas)
画雷达图。indicators：维度列表，每项为[名称,最大值]，如 [[‘销量’,100],[‘服务’,100]]； legends：图例； datas：二维列表(每行一个图例，数值顺序对应 indicators)。
Heatmap(title,xLabels,yLabels,datas)
画热力图。xLabels/yLabels：X、Y 轴类目列表； datas：二维列表，每项为[x下标,y下标,数值]。
Candlestick(title,labels,datas)
画K线图(蜡烛图)。labels：日期类目列表； datas：二维列表，每项为[开盘,收盘,最低,最高]。
Progress(title,value)
画进度环(百分比仪表)。value：进度值，0~100。
Sankey(title,nodes,links)
画桑基图(流向图)。nodes：节点名称列表，如 [‘A’,’B’,’C’]； links：二维列表，每项为[来源,目标,数值]，如 [[‘A’,’B’,5]]。
Option(option)
通用接口：直接传入 ECharts 配置(option)的 JSON 文本，可绘制任意图表(树图/旭日/词云/地图/自定义组合等)。可从 echarts.apache.org 官网示例 复制 option。

饼图

效果如下：

chart

设置透明背景属性后，效果如下：

chart

代码块如下：

chart

chart

实心饼图：

半径列表只设置一个值的话，就是实心的饼图。

chart

chart

图表导出为图片：

chart

chart

仪表图

效果如下：

chart

代码如下：

chart

使用示例

下面每张积木图的右上角都有「复制代码块」，点一下，再到代码块编辑器里按 Ctrl+V， 积木就直接进工程了——不用照着一块块拖。

组件名按设计器里的默认中文名写（垂直布局1、按钮1…），拓展组件本身是英文名（ECharts1）。 粘贴后如果工程里没有同名组件，组件块会标红，把名字改成你自己的组件即可。

初始化并画第一张图

第一步永远是 Init，参数是图表要显示在哪个布局里（拖一个垂直布局进界面即可）。 没有 Init，后面所有画图方法都不生效。

when Screen1.Initialize() {
  ECharts1.Init(垂直布局_图表)
  ECharts1.Bar("季度销量", ["华东", "华南"], ["Q1", "Q2", "Q3", "Q4"], [[120, 200, 150, 80], [90, 140, 110, 60]])
}

折线图：多条线 + 平滑

legends 是每条线的名字，labels 是横轴刻度，datas 是二维列表——每行对应一条线， 长度要和 labels 一致。最后一个参数控制是否画成平滑曲线。

when 按钮_折线.Click() {
  ECharts1.Line("近一周气温", ["最高温", "最低温"], ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], [[31, 33, 30, 28, 29, 32, 34], [22, 24, 21, 19, 20, 23, 25]], true)
}

饼图：值 + 名称

饼图的数据是字典列表，每项要有 value 和 name 两个键。 radius 传两个值就是空心圈（环形），传一个值就是实心饼。

when 按钮_饼图.Click() {
  ECharts1.Pie("市场份额", ["40%", "65%"], [makeDict(pair("value", 484), pair("name", "项目一")), makeDict(pair("value", 300), pair("name", "项目二")), makeDict(pair("value", 216), pair("name", "项目三"))])
}

动态刷新：定时器驱动的实时曲线

图表可以反复重画，每次调用画图方法就是一次刷新。 下面用计时器每隔一段时间追加一个数据点，并只保留最近 20 个，形成滚动的实时曲线。

global 温度记录 = []
global 时刻表 = []

when Screen1.Initialize() {
  ECharts1.Init(垂直布局_图表)
}

when 计时器1.Timer() {
  listAdd(温度记录, random(20, 35))
  listAdd(时刻表, length(时刻表) + 1)
  if length(温度记录) > 20 {
    listRemove(温度记录, 1)
    listRemove(时刻表, 1)
  }
  ECharts1.Line("实时温度", ["温度"], 时刻表, [温度记录], true)
}

响应点击，做联动

点击图表上的数据点会触发 Clicked，三个参数分别是图例名、标签名和数值， 可以用来做「点柱状图看明细」这类联动。

when ECharts1.Clicked(legend, label, value) {
  标签_详情.Text = join("你点了 ", label, "，数值 ", value)
}

把图表存成图片

SaveImage 把当前图表存到应用私有目录，完成后触发 ImageSaved 返回真实路径， 可以直接给图像组件显示，或交给分享组件发出去。

when 按钮_保存.Click() {
  ECharts1.SaveImage("我的图表")
}

when ECharts1.ImageSaved(imagePath) {
  图像1.Picture = imagePath
  标签_详情.Text = join("已保存到：", imagePath)
}

进度环

Progress 是最简单的一个：给个 0~100 的数就画出百分比圆环，适合做完成度、电量这类指示。

when 滑动条1.PositionChanged(thumbPosition) {
  ECharts1.Progress("完成度", thumbPosition)
}

logo ECharts3D 拓展

同样ECharts也提供3D图表展示。v2.0 起内置：3D曲面、3D柱状图、3D散点图、3D折线图；并提供通用 Option 接口，可用 ECharts 配置 JSON 绘制任意3D图表(地球/3D地图/GL关系图/飞线等)。

属性

ShowAnimation
动画是否开启。
ShowValue
是否显示数字提示。
ThemeIndex
主题设置，数字：1 default, 2 dark, 3 macarons, 4 roma, 5 shine, 6 vintage, 7 infographic
TransparentBackground
背景是否透明，需在Init初始化之前设置。
YAxisMin
Y轴刻度最小显示值：一个数字 - Y轴从该数字开始，或 ‘dataMin’ - 取数据中最小值 或 ‘null’ - 自动计算

事件

Clicked(legend,label,value)
图表被点击时触发。参数 legend: 当前被点击的图例； label: 当前被点击的标签; data: 当前被点击的数据。
ImageSaved(imagePath)
图片保存完成时触发，参数为图片路径（保存失败时不触发）

方法

Init(layout)
layout: where the chart to be shown
SaveImage(imageName)
将图表作为图像保存到 ASD 目录。
SimpleSurface(title,data)
根据数据点画3D曲面·简单曲面。第一个参数：标题。第二个参数：[x,y,z]三元素列表的列表，例如 [ [-5, -5, 0.5], [-4, -5, 0.6], … ]
SimpleSurfaceWithEquation(title,equationJsonStr)
根据坐标方程式画3D曲面·简单曲面。第一个参数：标题。第二个参数：坐标方程式JSON字符串，详见帮助文档。
Bar3D(title,xLabels,yLabels,datas)
画3D柱状图。xLabels/yLabels：X、Y 轴类目列表； datas：二维列表，每项为[x下标,y下标,数值]，柱高按数值着色。
Scatter3D(title,datas)
画3D散点图。datas：二维列表，每项为[x,y,z]，按 z 值着色。
Line3D(title,datas)
画3D折线图。datas：二维列表，每项为[x,y,z]，按顺序连成一条空间折线。
Option(option)
通用3D接口：直接传入 ECharts 配置(option)的 JSON 文本，可绘制任意3D图表(地球/3D地图/GL关系图/飞线等)。可从 echarts.apache.org GL 示例 复制 option。

3D简单曲面

方程式模式，该方程式来自官方demo，代码如下：

chart

{
    x: {
        step: 0.05
    },
    y: {
        step: 0.05
    },
    z: function (x, y) {
        if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
        return '-';
        }
        return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
    }
}

效果如下：

chart

点阵模式，代码如下：

chart

效果如下：

chart

文档反馈

在线
客服

扫码添加客服咨询

我要
分享

扫码分享到朋友圈

App Inventor 2 中文网

Android|HarmonyOS|iOS
关注公众号，
精彩不错过！