Axure引用ECharts图表 &解决火狐浏览器出错

Axure原型添加Echarts图表,没耐心看文章的可以直接下载示例 Axure中使用ECharts图表示例

1. 打开Axure新建页面

2. 页面添加元件

元件类型随意,矩形、动态面板、热区、图片 甚至段落都可以

3. 命名元件

随意命名,单个页面用到多个图表时名称要区别定义

4. 新增交互

选择 "载入" 时,执行动作选择 "打开链接",链接到选择 "连接到外部URL",在链接输入框的后边,点击 fx 打开窗口,输入JS函数脚本

5. JS内容

javascript 复制代码
javascript:$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
var dom =$('[data-label=[[This.name]]]').get(0);
var Chart = echarts.init(dom);
var option = { };
if (option && typeof option === "object"){Chart.setOption(option, true);}}, 500);

以下代码块中为基础的js内容,其中 option={}; 为图表的各个参数项;

打开ECharts官方示例,https://echarts.apache.org/zh/index.html 选择需要的图表,进行在线编辑,完成后将在线编辑的内容全部复制出,替换基础js代码中的 option 部分;

以下为替换完成后所有的js代码

javascript 复制代码
javascript:$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
var dom =$('[data-label=[[This.name]]]').get(0);
var Chart = echarts.init(dom);
var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};
if (option && typeof option === "object"){Chart.setOption(option, true);}}, 500);

内容过长,可以先在NotePad++等文本编辑器中编辑, 编辑完后再复制到Axure中

编辑完成保存后,发布预览

运行成功效果图

示例中通过 [[This.name]] 绑定了当前元件

以上的方式支持大部分浏览器预览,但是火狐浏览器打不开,只显示一个错误代码、、、、

错误原因大概因为 火狐下第一次加载Echarts的js未成功,然后在Axure中的setTimout的js函数,无法被有效执行

火狐浏览器下设计方式

火狐浏览器下按照以下方式设计

新建页面、添加元件、命名 这些都与上边描述一致

在添加交互时,同样选择在加载时打开外部URL链接,链接的内容修改为

javascript 复制代码
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);
var dom =$('[data-label=[[This.name]]]').get(0);
var myChart = echarts.init(dom);

编辑完成链接后,继续点击"添加动作",使用Axure模拟添加定时函数;

继续点击"添加动作",选择"触发事件" > "尺寸改变";

新增交互 "尺寸改变" 时 "打开链接",链接为以下内容

javascript 复制代码
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);
var dom =$('[data-label=[[This.name]]]').get(0);
var myChart = echarts.init(dom);
var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};
if (option && typeof option === 'object'){
   myChart.setOption(option, true);    
}

具体步骤如下图所示
编辑完成后,发布预览

火狐浏览器展示效果图

相关推荐
学习使我快乐0116 分钟前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio199517 分钟前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
勿语&1 小时前
Element-UI Plus 暗黑主题切换及自定义主题色
开发语言·javascript·ui
黄尚圈圈1 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水2 小时前
简洁之道 - React Hook Form
前端
正小安4 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch6 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光6 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   6 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   6 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d