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

最终成果: