通过加载javascript脚本的方式动态引入Echarts图表
通过javascript伪协议直接执行ECharts、Highchart的代码,动态引入图表。
Axure支持通过javascript伪协议执行javascript代码,因此可以引入Echarts的js库,然后直接在Axure中执行图表的绘制代码,具体如下:
- 首先,在Axure中插入一个矩形框,作为Echars图表绘制的容器,并命名为test,名字可以自定义。为了和上面对比,下面先画了一个矩形框作为背景。
- 然后插入一个载入时事件(如果要单击时才出现,可以插入单击事件),用来触发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={};部分,点击预览即可查看(需要联网)。
javascript:
var script = document.createElement('script');
script