当前位置: 首页 > news >正文

axure 引用 echarts图表

操作步骤:

一、新建一个矩形元件,元件名称为 chart1

二、组装js代码:

2.1 组合项

2.1.1 【元件名称】:chart1
2.1.2 【核心配置对象】:
title: { text: '优化版图表' },
tooltip: {},
series: [{
type: 'pie',
data: [
{ name: 'A', value: 30 },
{ name: 'B', value: 50 },
{ name: 'C', value: 20 }
]
}]

2.2 代码框架
2.2.1 代码框架优化版(和下方简易版二选一即可):

javascript:
if (typeof echarts === 'undefined') {var script = document.createElement('script');script.type = "text/javascript";script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";document.head.appendChild(script);
}
setTimeout(function() {if (typeof echarts === 'undefined') { alert("ECharts 加载失败,请检查网络!"); return; }var dom = $('[data-label="/*此处替换为【元件名称】*/"]').get(0);if (!dom) { alert("未找到图表容器!请检查 data-label 是否正确"); return; }var myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);var option = {/*此处替换为【核心配置对象】内容*/};
if (option && typeof option === "object") {myChart.setOption(option, true);}
}, 800);

2.2.2 代码框架简易版(和上方优化版二选一即可):

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function() {var dom = $('[data-label="/*此处替换为【元件名称】*/"]').get(0);var myChart = echarts.init(dom);var option = {/*此处替换为【核心配置对象】内容*/};
if (option && typeof option === "object") {myChart.setOption(option, true);}
}, 800);

2.3 通过组合项和代码框架形成如下代码:

javascript:
if (typeof echarts === 'undefined') {var script = document.createElement('script');script.type = "text/javascript";script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";document.head.appendChild(script);
}
setTimeout(function() {if (typeof echarts === 'undefined') { alert("ECharts 加载失败,请检查网络!"); return; }var dom = $('[data-label="chart1"]').get(0);if (!dom) { alert("未找到图表容器!请检查 data-label 是否正确"); return; }var myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);var option = {title: { text: '优化版图表' },tooltip: {},series: [{type: 'pie',data: [{ name: 'A', value: 30 },{ name: 'B', value: 50 },{ name: 'C', value: 20 }]}]};
if (option && typeof option === "object") {myChart.setOption(option, true);}
}, 800);

三、axure操作:

将代码写入到chart1矩形元件的载入事件-打开链接-链接到外部URL,插入fx公式中。

四、预览。

http://www.jsqmd.com/news/317593/

相关文章:

  • 三相交流异步电动机调速SVPWM矢量控创仿真(设计源文件+万字报告+讲解)(支持资料、图片参考_相关定制)_文章底部可以扫码
  • 氦氖激光器品牌质量稳定性评测:哪个品牌故障率更低?
  • [工具推荐] 跨境卖家如何低成本搞定“小语种”图片?基于 AI 的批量图像翻译技术解析
  • 2026电子防潮箱厂家哪家好?行业技术实力企业推荐
  • [运营技巧] 1688 工厂图如何对标亚马逊爆款?浅析利用 AI 图像重构技术,低成本打造“大牌感”主图
  • 聊聊可靠的干磨片实力厂商,兴源口碑怎么样
  • 江西风光互补节能设备源头工厂费用分析,怎么收费
  • 细聊聚氨酯胶辊定制厂家,泰兴金茂辊业价格贵吗?
  • 利用Snyk发现与修复漏洞:守护软件安全,保障业务稳定
  • 2026木箱生产厂家推荐:斯普乐供应链等4家企业凭实力入榜,精准匹配不同需求
  • 2026年 精密机械零件加工厂家推荐榜:慢走丝加工/精密慢走丝加工技术实力与高精度解决方案深度解析
  • 2026年尼龙棒厂家推荐:pa66尼龙棒、pa尼龙棒、pp尼龙棒、尼龙件加工、尼龙加工件源头厂家、浇筑尼龙棒、浇铸尼龙棒选择指南
  • 如何使用http3
  • 广州高精度固晶机厂家推荐哪家好?权威评测六家先进设备供应商!
  • 基于RBF径向神经网络的多输入单输出拟合预测建模
  • 2026年 尼龙拖链厂家推荐排行榜:加强型/钢骨/桥式/LIANDUO/BOTHSIX/工程/增强尼龙钢骨拖链,精选耐用抗磨工业传动防护方案
  • 2026年苏州售后完善、有实力的美国EB5投资移民大型机构推荐
  • 2026年上海注册公司服务排名,靠谱机构推荐
  • 解读常州北奇机械行业口碑排名,产品性价比高吗
  • 打印机驱动程序无法使用?2026年4个终极解决方案(附AI智能一键修复黑科技)
  • 讲讲深圳靠谱的GEO优化系统服务厂家,哪家性价比高
  • 宁波靠谱的银子银料回收店排名,回收服务好的是哪家
  • 总结推荐高光谱品牌服务商,南京口碑好的是哪家
  • 使用经验模态分解(EMD)处理振动信号,并结合样本熵进行特征提取
  • 2026年最有效的防脱生发精华液推荐指南
  • 基于 sCMOS 相机的单分子荧光成像及双螺旋布朗运动追踪研究
  • 2026年 精密铸造源头厂家推荐榜单:不锈钢/合金钢/碳钢铸造件,硅溶胶/中温蜡精密铸造工艺,汽车与化工机械配件深度解析
  • 2026防脱精华液哪个性价比高?实测口碑好物推荐
  • 2026全自动油水分离器品牌推荐:行业优质选择指南
  • 2026防脱育发精华液哪个牌子好?真实测评与口碑推荐