axure rp嵌入echarts图表

本文章借鉴了两位作者的文档，首先表示感谢老师们的文章。

大家最好研究下两位老师的原文章，如果没有各位老师的文章我也弄不懂怎么操作，在文章中汲取了不少知识。

文章1：https://zhuanlan.zhihu.com/p/105028531?from_voters_page=true   

文章2：https://blog.csdn.net/shirenkan/article/details/109458838

 

由于我研究这个功能时，读了各位老师的文章，实践过程中还是出了不少问题，特地自己总结下，如果各位在实践过程中还有其他问题，欢迎评论区一起讨论

方法有好几种，但是我觉得通过javascript伪协议直接执行ECharts、Highchart的代码，动态引入图表，可以保留原图表的各种动态显示和点击事件等等功能，所以下面只介绍了这个方式

1、首先，设计一下自己的图表

Echarts官网：https://echarts.apache.org/examples/zh/index.html，在这里可以在线编辑图表，设计自己需要的，当然，特别详细和复杂的可能也没有，但是一般的需求都能满足

根据需要选择合适的图表，点击相应的图表样例

 

2、然后，在Axure需要插入图表的页面中插入一个矩形框，作为Echars图表绘制的容器，并命名为test，名字可以自定义。

3、然后插入一个载入时事件（如果要单击时才出现，可以插入单击事件），用来触发javascript伪协议的执行。选择“链接到URL或文件路径“，点击fx，在弹出的窗口中可以输入javascript伪协议代码。

添加事件的位置

4、下面用载入时事件做例子，步骤如下图，然后依次点击【确定】就能将图表载入了，下一步说FX函数的问题

5、fx函数的内容

这里引用下文章1作者的内容，

1）代码的基础框架如下所示，首先引入Echarts库文件，然后在定时器中执行图标绘制代码，先获取前面插入的矩形框，作为图表绘制的容器，然后进行初始化。只需要将Echarts官网中的示例代码的option部门内容拷贝到代码中的option位置即可，不过option前的var 留着哈。然后将代码整体复制到上面的Axure中的fx函数编辑框中。

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);

2）将上面的代码复制到函数中，然后从EChart中找到想要展示的图表，就是步骤1中自己设计图表的左边中的option代码全部复制，然后替换掉上面代码中的option={};部分，点击预览即可查看（需要联网）。

在这里不联网我也能预览，不知道咋回事，不过无需联网的方法在作者1的文章中有介绍，大家可以参考，如果大家有断网不显示的情况请参考，我就不赘述了。

这里我就贴一下echarts.min.js下载路径

链接: https://pan.baidu.com/s/1Yp16j9PlOWYhoLaUCu5LnA

提取码: v7gp 

到这一步，预览axure原型的时候就可以看到图表了，如下图。

不知大家发现没有，这里有问题，

1) Y轴的线条不显示了，没了。

2) X轴其实数据也比图上多，但是却没显示全，

解决方案

红色文字注释部分，请在复制到axure函数中的时候删掉它

xAxis: {
        type: 'category',
          axisLabel:{
               interval:0,//0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
               rotate:60//文字倾斜角度
          },
        boundaryGap: false,
        data: ['庐阳区', '蜀山区', '瑶海区', '新高区', '经开区', '包河区', '营业部','肥东县','肥西县','长丰县','庐江县','巢湖区']
    },
    yAxis: {
        type: 'value',
          axisLine: {show:true}//y轴是否显示
    },

interval

坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）

可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

rotate

标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度

问题又来了，这个名称x轴的文字如果太长会受到遮挡，还是显示不全，这个时候可以用grid属性解决

grid: {left: '10%',bottom:'35%'}

bottom是文字距离图片底部的距离

 

到此我的问题解决了，大家如果有其他问题可以一起沟通呀