Axure｜引入图表ECharts的4种方式

大数据的时代，数据可视化显得愈发重要，原型中加入图表效果能更真实地模拟真实环境以及开发效果，如Axure原型中设计引入ECharts、Highcharts图表。下方以Axure引入ECharts举例。

image.png

ECharts图例官网地址：https://echarts.apache.org/examples/zh/index.html

Axure原型引入ECharts方式

1. 截图引用；
2. Echarts html文件引入（通过内联框架链接）；【生成html才能看到效果，本地无法预览；内联框架大小需要配比】
3. 代码方式加载javascript脚本方式（通过javascript伪协议直接执行ECharts代码，动态引入图表）；【强，自由度高】
4. Axhub charts等组件引用；【一般能满足】

1. 截图引用

可自由寻找图片案例，或在线生成ECharts图例，截图加载到Axure原型里即可。
优势：简单
劣势：后期不好维护

2. 引入Echarts html文件

通过内联框架方式链接ECharts html文件。
劣势：本地无法预览，需要生成html打包后才能预览效果。
使用方式：
（1）需要将ECharts官网生成的实例html文件下载到本地，并放入到Axure原型生成的文件夹内。
（2）通过内联框架元件引入外部文件（由于放入到Axure打包生成的文件夹里，外部文件名称为下载的html名称即可）

image.png

备注：相当于在内联框架区域单独引入外链接，此时该区域的背景将由引入的页面决定，同时内联框架的大小需要和引入页面匹配，不然会出现挤压。

3. 加载javascript代码方式

Axure强大的地方在于支持多种事件。Axure支持通过javascript伪协议直接执行ECharts的js代码，动态引入图表。
优势：灵活度高，后期维护方便，可直接预览
操作方式：
（1）插入矩形元件（或其他元件），将矩形元件名为“test”，使用事件交互方式，如loaded事件，用来触发javascript执行，选择“链接到URL或文件路径“，点击fx函数；

image.png

（2）在fx函数弹出的窗口中输入javascript伪协议代码
Axure的fx函数引用代码如下：

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){
    var dom =$('[data-label=test]').get(0);
    var myChart = echarts.init(dom);
    
    var option = {
        
    };
    
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

代码解释如下，加深理解：

javascript:
//引入ECharts库，js文件引用cdn，所以需联网，如果不联网，将min.js文件保存到本地文件夹引用
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
    //使用定时器来延迟图表载入时间，刚引入ECharts库就执行图形代码可能会出错。
    setTimeout(function(){
    //获取矩形框对象，“test”是刚才矩形框元件的命名，可自由命名，但需要匹配上
    var dom =$('[data-label=test]').get(0);
    //chart图表初始化
    var myChart = echarts.init(dom);
    
    var option = {
        /*此处粘贴ECharts官网的示例代码*/
    };
    //设置数据
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

（2）前往ECharts在线生成图表，复制ECharts代码，全选复制

image.png

例如

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'
    }]
};

（3）将代码复制到刚才test矩形框的fx函数里，替代原来的option代码，包括option字母，点击确认即可预览。
【我们可以在ECharts修改代码为自己想要的效果，也可直接在Axure的fx函数里进行修改】

image.png

4. 利用Axure组件配置

通过现有的ECharts组件，修改data、config配置，类似中继器使用

image.png

结语

Axure引入Echarts图表并不难用，涉及的代码也比较浅，第三种加载js方式灵活度更高，第四种通过能满足需求的现有组件方式更快，你学会了吗？