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框架。

特别注意：

1. 第一行javascript:不可以省略;
2. 注释必须都用/* 注释内容 */包裹， 不可以用//单行注释
3. 每行结尾必须有;符号

(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参数即可)。

最终效果: