背景

需要原型中， 有时候须要展现一些如柱状图、折线图、扇形图、漏斗图、组合图等， 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参数即可)。

最终成果: