用Axure做Web原型设计时，经常会有图表。特别是大屏或者数据可视化的原型中就更为常见。Axure可以通过javascript注入的方法进行拓展，而Echarts作为流行的Web图表工具，因此下文将简单介绍如何通过javascript引用Echarts实现图表设计。

option = {

    xAxis: {

        type: ‘category’,

        data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

    },

    yAxis: {

        type: ‘value’

    },

    series: [

        {

           data: [150, 230, 224, 218, 135, 147, 260], type: ‘line’

        }

    ]

};

javascript:

$axure.utils.loadJS(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’);

setTimeout(function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致，默认写了Charts*/

    var Chart = echarts.init(dom);

    var option = {

    /*echarts的代码写在这里*/

    };

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    }}, 2000);

javascript:

$.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致，默认写了Charts*/

    var Chart = echarts.init(dom);

    var option = {

/*echarts的代码写在这里*/

    };

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    };

}

);

javascript:

.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致，默认写了Charts*/

    var Chart = echarts.init(dom);

    var option =ChartsInit();

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    };

}

);

function ChartsInit() {

    /*echarts的完整代码写在这里*/

    return option

}