关于axure:Axure画统计图

背景

需要原型中，有时候须要展现一些如柱状图、折线图、扇形图、漏斗图、组合图等，Axure 画统计图有多种形式，导入 HTML、第三放库都能够实现，这里介绍一种最优形式，只需简略三步，就能够画出带交互成果的统计图。

以 echarts 为例：

最终成果示例：

1. 导入 echarts 组件库

1.1 在页面空白处，新增一个交互

PAGE LOADED -> Open Link -> LINK TO -> Link to external URL

1.2 引入 echarts 框架

点击函数符号，编辑 JS 脚本:

javascript:
    /* 引入 ECharts 库 */
    const script = document.createElement('script');
    script.type = 'text/javascript';
    /* 这里能够通过改链接更改 echarts 版本 */
    script.src = 'https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js';
    document.head.appendChild(script);
    console.log(document.head);

下面脚本将在页面引入 echarts 框架。
特地留神：第一行 javascript: 不能够省略，正文必须都用 /* 正文内容 */ 包裹 (Axure 函数会合并成一行，如果用// 正文，会导致前面的代码全副正文掉)

2. 画统计图

2.1 拖一个矩形框，命名为barGraphBox

2.2 创立一个交互

2.2.1 点击矩形框，创立一个交互：

LOADED -> Open Link -> LINK TO -> Link to external URL

2.2.2 点击函数按钮，增加 JS 脚本

javascript: 
function initChars2() {
        /* 获取插入的 bar1 矩形框，作为图表绘制的容器, 如果后面矩形框为其它名字，则 bar1 改为对应的名字 */
        const dom = document.querySelector('[data-label="barGraphBox"]');
        console.log("dom===", dom);
        /* 初始化 */
        const myChart = echarts.init(dom);
        
        /* 这段代码能够去 echarts 官网的 demo 复制过去 */
        const colors = ['#5470C6', '#c4c86b', '#91CC75', '#EE6666'];
        const option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'}
            },
            grid: {right: '20%'},
            toolbox: {
                feature: {dataView: { show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {data: ['拜访', '加购', '出单', '转化']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {alignWithLabel: true},
                    /* prettier-ignore */
                    data: ['22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '拜访',
                    position: 'left',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {color: colors[0]
                        }
                    },
                    axisLabel: {formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '出单',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {color: colors[2]
                        }
                    },
                    axisLabel: {formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '转化',
                    position: 'right',
                    alignTicks: true,
                    offset: 40,
                    axisLine: {
                        show: true,
                        lineStyle: {color: colors[3]
                        }
                    },
                    axisLabel: {formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name: '拜访',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [60.0, 80.9, 77.0, 93.2, 85.6, 96.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '加购',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [2.6, 5.9, 2.0, 6.4, 8.7, 30.7, 45.6, 32.2, 8.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '出单',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [0.6, 0.9, 1.0, 6.4, 2.7, 1.7, 5.6, 8.2, 2.7, 8.8, 3.0, 1.3]
                },
                {
                    name: '转化',
                    type: 'line',
                    yAxisIndex: 2,
                    data: [2.0, 1.0, 3.3, 4.5, 6.3, 10.2, 2.3, 3.4, 3.0, 6.5, 12.0, 1]
                }
            ]
        };
        /* 设置数据 */
        if (option && typeof option === 'object') {myChart.setOption(option, true);
        }
    };   /* End initChars */

    /* 提早一些工夫渲染，让 PAGE LLOADED 事件加载的 echarts.js 下载实现 */
    setTimeout(initChars2, 3000);

保留即可，后续减少其余统计图能够增加多个 Box，配置不同统计图脚本(个别改 echarts 中的 options 参数即可)。

最终成果: