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

• 资源下载
• ECharts 拓展
  • 属性
  • 事件
  • 方法
  • 饼图
  • 仪表图
• ECharts3D 拓展
  • 属性
  • 事件
  • 方法
  • 3D简单曲面

« 返回首页

资源下载

• .aix 拓展下载：

cn.fun123.ECharts.aix

• demo程序下载：

echats_demo.aia

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

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

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

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

ECharts 拓展

使用AppInventor2布局进行展示的图表拓展，基于ECharts强大的js图表库开发，持续提供酷炫实用的图表展示。

属性

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：当前值。

角度值参考如下：

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 目录。

饼图

效果如下：

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

代码块如下：

实心饼图：

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

图表导出为图片：

仪表图

效果如下：

代码如下：

ECharts3D 拓展

同样ECharts也提供3D图表展示，该拓展持续提供酷炫实用的3D图表展示。

属性

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字符串，详见帮助文档。

3D简单曲面

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

{
    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);
    }
}

效果如下：

点阵模式，代码如下：

效果如下：