文章目录
- 一、固定JS代码
- 二、可变代码示例
要想在Axure中载入echarts动态图表,需要利用原件交互动作。具体步骤如下:
step1:选择原件
step2:添加
载入
交互step3:添加
打开链接
动作step4:选择
链接外部URL
,并写入JS代码step5:保存并预览
一、固定JS代码
下列代码是固定代码,需要将原件名称
修改给step1中的实际原件名称,需要将可变代码
处全部#和文字替换为具体的JS代码。
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);
####################################### #可变代码
#######################################
if (option && typeof option === "object"){myChart.setOption(option, true); }}, 800);
二、可变代码示例
Apache ECharts是一个基于JS的开源可视化图标库,在其官网示例中几乎涵盖所有二维图表、三维图表的交互图形示例JS代码,可以直接拷贝后针对性进行修改即可。如饼图
:
左侧代码如下:
option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};