济宁网站建设是什么,动态域名可以建网站,中国机加工网,wordpress首页仅显示指定分类文章Axure原型添加Echarts图表#xff0c;没耐心看文章的可以直接下载示例 Axure中使用ECharts图表示例
1. 打开Axure新建页面
2. 页面添加元件
元件类型随意#xff0c;矩形、动态面板、热区、图片 甚至段落都可以3. 命名元件
随意命名#xff0c;单个页面用到多个图表时名…Axure原型添加Echarts图表没耐心看文章的可以直接下载示例 Axure中使用ECharts图表示例
1. 打开Axure新建页面
2. 页面添加元件
元件类型随意矩形、动态面板、热区、图片 甚至段落都可以3. 命名元件
随意命名单个页面用到多个图表时名称要区别定义4. 新增交互
选择 “载入” 时执行动作选择 “打开链接”链接到选择 “连接到外部URL”在链接输入框的后边点击 fx 打开窗口输入JS函数脚本5. JS内容
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:$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:
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:
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);
}具体步骤如下图所示 编辑完成后发布预览 火狐浏览器展示效果图
