大数据的时代，数据可视化显得愈发重要，原型中加入图表效果能更真实地模拟真实环境以及开发效果，如Axure原型中设计引入ECharts、Highcharts图表。下方以Axure引入ECharts举例。
ECharts图例官网地址：https://echarts.apache.org/examples/zh/index.html
Axure原型引入ECharts方式
- 截图引用；
- Echarts html文件引入（通过内联框架链接）；【生成html才能看到效果，本地无法预览；内联框架大小需要配比】
- 代码方式加载javascript脚本方式（通过javascript伪协议直接执行ECharts代码，动态引入图表）；【强，自由度高】
- Axhub charts等组件引用；【一般能满足】
1. 截图引用
可自由寻找图片案例，或在线生成ECharts图例，截图加载到Axure原型里即可。
优势：简单
劣势：后期不好维护
2. 引入Echarts html文件
通过内联框架方式链接ECharts html文件。
劣势：本地无法预览，需要生成html打包后才能预览效果。
使用方式：
（1）需要将ECharts官网生成的实例html文件下载到本地，并放入到Axure原型生成的文件夹内。
（2）通过内联框架元件引入外部文件（由于放入到Axure打包生成的文件夹里，外部文件名称为下载的html名称即可）
备注：相当于在内联框架区域单独引入外链接，此时该区域的背景将由引入的页面决定，同时内联框架的大小需要和引入页面匹配，不然会出现挤压。
3. 加载javascript代码方式
Axure强大的地方在于支持多种事件。Axure支持通过javascript伪协议直接执行ECharts的js代码，动态引入图表。
优势：灵活度高，后期维护方便，可直接预览
操作方式：
（1）插入矩形元件（或其他元件），将矩形元件名为“test”，使用事件交互方式，如loaded事件，用来触发javascript执行，选择“链接到URL或文件路径“，点击fx函数；
（2）在fx函数弹出的窗口中输入javascript伪协议代码
Axure的fx函数引用代码如下：
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);
代码解释如下，加深理解：
javascript:
//引入ECharts库，js文件引用cdn，所以需联网，如果不联网，将min.js文件保存到本地文件夹引用
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);
//使用定时器来延迟图表载入时间，刚引入ECharts库就执行图形代码可能会出错。
setTimeout(function(){
//获取矩形框对象，“test”是刚才矩形框元件的命名，可自由命名，但需要匹配上
var dom =$('[data-label=test]').get(0);
//chart图表初始化
var myChart = echarts.init(dom);
var option = {
/*此处粘贴ECharts官网的示例代码*/
};
//设置数据
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);
（2）前往ECharts在线生成图表，复制ECharts代码，全选复制
例如
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
（3）将代码复制到刚才test矩形框的fx函数里，替代原来的option代码，包括option字母，点击确认即可预览。
【我们可以在ECharts修改代码为自己想要的效果，也可直接在Axure的fx函数里进行修改】
4. 利用Axure组件配置
通过现有的ECharts组件，修改data、config配置，类似中继器使用
结语
Axure引入Echarts图表并不难用，涉及的代码也比较浅，第三种加载js方式灵活度更高，第四种通过能满足需求的现有组件方式更快，你学会了吗？
