Axure9原型设计:能增删改数据的动态饼图(1)
在Axure原型设计中，如何实现一个能够动态增删改数据的饼图是许多设计师面临的挑战。本文将为你详细解析如何通过JavaScript代码集成eCharts图表，并借助中继器动态修改数据源，让饼图“动起来”。
最近无聊，在网上闲逛，看到一篇教程《能增删改数据的动态饼图》，故仿照实践。
因信息量较大，分三篇完成，如下：
步骤如下：
1.创建图表容器
* 在Axure中拖入一个矩形元件
* 给矩形元件设置名称为”chartContainer”
* 调整合适大小，比如500*500
提示：给元件命名是个很好的习惯。
2.添加JavaScript代码
* 点击矩形”chartContainer”
* 点击“新建交互”
* 选择事件“载入时”
* 添加动作“打开链接”
* 选择“链接到URL或文件路径”
* 点击fx，在弹出的窗口中输入以下代码：
javascript:
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src =”resources/scripts/echarts.min.js”;
document.head.appendChild(script);
setTimeout(function{
var dom =$(‘[data-label=chartContainer]’).get(0);
var myChart = echarts.init(dom);
var option = {
};
if (option && typeof option === “object”){
myChart.setOption(option, true);
}}, 800);
代码注意点：
script.src =”resources/scripts/echarts.min.js”;
事先下载echarts.min.js文件放到目录resources/scripts中
var dom = $(‘[data-label=chartContainer]’).get(0);
指定矩形“chartContainer”作为echarts图表的容器
var option = {
配置图表选项，步骤3、4来完善
};
3.借助echarts在线示例生成图表
* 进入echarts在线示例库Examples – Apache ECharts
* 根据需要编辑好示例
4.完善JavaScript代码
* 将步骤3中的echarts代码补充到到步骤2的fx里，完整代码如下：
javascript:
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src =”https://cdn.staticfile.net/echarts/5.6.0/echarts.min.js”;
document.head.appendChild(script);
setTimeout(function{
var dom =$(‘[data-label=chartContainer]’).get(0);
var myChart = echarts.init(dom);
var option = {
title: {
text: ‘2025年5月汽车品牌销量前五’,
left: ‘center’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’
},
series: [
{
name: ‘Access From’,
type: ‘pie’,
radius: ‘50%’,
data: [
{ value: 293021, name: ‘比亚迪’ },
{ value: 205093, name: ‘吉利’ },
{ value: 135330, name: ‘长按’ },
{ value: 125303, name: ‘一汽大众’ },
{ value: 101393, name: ‘奇瑞’ },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
};
if (option && typeof option === “object”){
myChart.setOption(option, true);
}}, 800);
5.预览效果
如果预览效果没有，检查JavaScript代码中的js路径、容器名称、代码空格，问题不大。
—end
至此在axure中通过JavaScript注入，集成eCharts图表完毕。
感谢
https://www.woshipm.com/rp/5687731.html
https://www.woshipm.com/rp/5054935.html
本文由 @头发渐少脾气渐涨 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
