axure商城

axure离线内嵌echart

 之前一直用在线方式在Axure里使用eChart,但现在用手机热点时可以使用,用公司网络时不能使用。

调查原因Axure调用的在线JS “https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js” 解析到的ip地址在海外。网络运营商对企业用户的网络访问限制比较多,所以用自己手机热点可以使用,用企业网络时不能使用。

为了方便做演示,所以采用离线的方式来解决

下载echart的JS文件存到本地,命名为echarts.min.js,并存到axure9安装文件配置中。下载地址如下:

https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

axure离线内嵌echart

 

打开Axure插入一个矩形,在矩形相关事件里链接到外部网址,编辑公式在fx里插入js代码,代码中红字部分

  1. script.src =“resources/scripts/echarts.min.js”;
  2. chart1替换成组件名称
  3. option替换成编辑好的echat图表的option

 

内嵌示例代码如下:

javascript:

var script = document.createElement(‘script’);

script.type = “text/javascript”;

script.src =“resources/scripts/echarts.min.js”;

 

document.head.appendChild(script);

setTimeout(function(){

var dom =$(‘[data-label=chart1]’).get(0);

 

var myChart = echarts.init(dom);

 

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’

    }

  ]

};

 

if (option && typeof option === “object”){

myChart.setOption(option, true);

}

}, 800);

 

遗留问题:现在绝大多数的echats图标都可以离线演示,但是地图因为要用到geo json数据,还有一些问题,有朋友知道的欢迎分享,谢谢

给TA打赏
共{{data.count}}人
人已打赏
Axure教程案例教程

Axure 拼图游戏教程(进阶版)

2025-4-14 11:18:15

Axure教程

FontAwesome字体图标安装、应用图文教程

2019-1-19 18:16:38

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索