在本章中，你将学会使用Axure和JavaScript引用Echarts图表。
在常见的管理后台首页的设计中，常常可以见过一堆的可视化图表，它们可能是业务数据的汇总分析，也可能是数据监控的实时结果。
而这些可视化图表在原型设计阶段想要绘制并展示是一件耗时耗力的事情。
在寻找Axure和JavaScript结合的项目过程中，发现了可以使用Axure和JavaScript引用腾讯的Echarts图表，从而实现在原型中展示可视化图表的效果。
这里我们也学习并分享下过程。
项目搭建
首先，创建一个新项目，命名为Echarts。
数据准备
示例网址：echarts.apache.org
我们访问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: '待付款'},
{ value: 735, name: '待发货' },
{ value: 580, name: '待收货' },
{ value: 484, name: '待评价' },
{ value: 300, name: '待回复' }
]
}
]
};
页面样式
首先，在“样式”工具栏中设置填充颜色为#F0F2F5。
拖入一个“矩形1”组件，命名为“背景卡片”
设置位置为（40，40），设置尺寸为400*300，设置线宽为0，设置圆角半径为0。
拖入一个“矩形2”组件，命名为chart。
设置位置为（50，50），设置尺寸为380*280。chart矩形作为图表展示区域，为了美观，因此位于背景卡片居中的位置。
我们将示例的数据代码复制到chart矩形中。
这里为了约束组件大小，可以设置文字颜色为透明色，也可以缩小字体，这里为了演示方便，将文字字号改为4。
至此，我们就完成了页面的准备。
交互动作
下一步，我们来实现功能部分。
我们可以使用Axure的API直接调用javascript代码，javascript代码如下：
javascript:
$.getScript('https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js',function(){
var dom =$('[data-label=[[This]]]').get(0);
var chart = echarts.init(dom);
var option =Charts_init();
if (option && typeof option === "object"){
chart.setOption(option, true);
};
}
);
function Charts_init()
{
/*
这里放Echarts的JS代码
*/
return option
}
我们选中chart矩形，在“交互”工具栏中新建交互。
选择“载入时”，选择“打开链接”，选择“链接到URL或文件路径”，点击fx。
在编辑值弹窗中，将JS代码复制到编辑区内。我们点击“添加局部变量”，添加一个获取chart矩形文本的局部变量，并在“这里放Echarts的JS代码”下引用。
效果预览
保存后，我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个样式能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
Echarts图表：ricardowesley.gitee.io/echarts
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
