前言
目前各种数据可视化界面越来越多，在原型设计中也需要加入各种图表效果，而Axure本身没有自带图表元件，因此自能自己重新绘制或者引入第三方元件。常用的有以下几种：
一、直接绘制
利用Axure的矩形元件和线条直接绘制，或者通过AI、PS等第三方软件绘制以后截图粘贴过来。这种方式制作比较麻烦，如果图表数量很少，后期改动少的话，可以采用这种方式。
二、引入图表
利用EChart、Highchart等图表库在线生成图表，然后通过以下方式引入：
1、截图引入，将编辑好的图表直接截图到Axure中，方便快捷，一般也能满足要求，但无法保留原Echarts图标的各种交互提示功能；
然后在Axure中插入一个内联框架，链接到文件所在位置即可。该种方式引入时，不能通过预览进行查看，只能生成html页面后才能查看。
从动图中可以看到，显示时会弹出“百度未授权使用地图API…..”的提示，我们用Notepad 打开，把除第一行引用echarts.min.js的其它script引用删除即可。对于大部分没有引用百度底图的图形都可以这样，只保留echarts.min.js。
利用内联框架引入，可以保留Echarts图表原来的交互，但要注意一下两点：
1）内联框架的大小要合适，否则显示会出现挤压；
2）必须生成本地html页面后才能看到引入的图表；
3）图表区域背景无法设置成透明，从下图就可以看出，左边是通过内联框架引入的，右边是通过后面马上介绍的通过加载javascript脚本的方式动态引入Echarts图表。
3、通过javascript伪协议直接执行ECharts、Highchart的代码，动态引入图表
Axure支持通过javascript伪协议执行javascript代码，因此可以引入Echarts的js库，然后直接在Axure中执行图表的绘制代码，具体如下：
1）首先，在Axure中插入一个矩形框，作为Echars图表绘制的容器，并命名为test，名字可以自定义。为了和上面对比，下面先画了一个矩形框作为背景。
2）然后插入一个载入时事件（如果要单击时才出现，可以插入单击事件），用来触发javascript伪协议的执行。选择“链接到URL或文件路径“，点击fx，在弹出的窗口中可以输入javascript伪协议代码。
3）代码的基础框架如下所示，首先引入Echarts库文件，然后在定时器中执行图标绘制代码，先获取前面插入的矩形框，作为图表绘制的容器，然后进行初始化。只需要将Echarts官网中的示例代码的option部门内容拷贝到代码中的option位置即可。然后将代码整体复制到上面的Axure中的编辑框中。
javascript:
//引入ECharts库
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);
//获取插入的矩形框对象，test是上面取得名字，如果是其它名字，则进行替换
//这里用了定时器来延迟图表载入时间，测试时发现刚引入ECharts库就执行图形代码可能会出错。
setTimeout(function(){
//获取插入的test矩形框，作为图表绘制的容器,如果前面矩形框为其它名字，则test改为对应的名字
var dom =$('[data-label=test]').get(0);
//初始化
var myChart = echarts.init(dom);
var option = {
/*在此处粘贴ECharts官网的示例代码*/
};
//设置数据
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);
代码复制到Axure中时需要去掉其中的所有汉字注释代码，下面为去掉注释的版本。
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=test]').get(0);
var myChart = echarts.init(dom);
var option = {
};
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);我们将上面的代码拷贝到test矩形框中的编辑框中，然后从EChart中找到想要展示的图表，然后将左边中的option代码全部复制，然后替换掉上面代码中的option={};部分，点击预览即可查看（需要联网）。
从预览中可以看到，图表本身的背景色为透明色，因此会显示出Axure中设置的背景色。通过该方式引入的图表可以实时预览查看，并可以显示Axure中设置的背景色，保留Echarts图表本身的交互动画，但是需要联网。
脱机使用方法
如果脱机使用的话按一下方法：
把官网下载的js文件放在Axure的安装目录下面，具体为D:Program Files (x86)AxureAxure RP 9DefaultSettingsPrototype_Filesresources目录下，只要在这个目录下就可以正常引用，推荐放在该目录下的scripts文件夹中。
然后在引用代码中改为script.src =”resources/scripts/echarts.min.js”即可。这样在生成html源文件的时候，该js文件会一同被复制到目标目录中，这样我们直接运行html文件也可以正常显示。
最后
对于Hightchart或者其它的javascript图标库均可采用类似的方法进行引入，借助Echarts官网中提供的表格工具，我们可以很方便的将excel中的数据转为代码可用的数组，从而可以更方便的使用Echart进行数据的展示。
这样是不是就意味着，生成的图表只能是英文的，不能是中文的
不行加载不出来
“3、通过javascript伪协议直接执行ECharts、Highchart的代码，动态引入图表”这个方法我在axure 8里无法实现？是版本原因吗？
楼主代码写错了一部分少了{}这个
哪个地方少了{}，希望能指出来，我也查看一下。我一直没有试通过。谢谢
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=test]’).get(0);
var myChart = echarts.init(dom);
var option = {
};
if (option && typeof option === “object”){
myChart.setOption(option, true);
, 800);
}
加了{}还是不行😂
csdn上有详细的教程以及对应的JS引用代码，可以参考下，我试了下是可以的，csdn链接如下：https://blog.csdn.net/love_forver/article/details/111421668
var dom =$(‘[data-label=test]’).get(0); “test”与矩形名称一致