【Axure结合Echarts绘制图表】

全宇宙最最帅气的哆啦A梦小怪兽2025-05-28 12:39

1.绘制一个矩形，用于之后存放图表，将其命名为test ：

2.新建交互 -> 载入时 -> 打开链接：

3.链接到URL或文件路径：

4.点击fx：

5.输入：

js 复制代码

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);

注意输入内容不能包含中文；矩形名称为test，如果是其他名字要将data-label=test改成其他名字。

代码解释：

js 复制代码

javascript:
//引入ECharts库
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);
    //获取插入的矩形框对象，test是上面取得名字，如果是其它名字，则进行替换
    //这里用了定时器来延迟图表载入时间，测试时发现刚引入ECharts库就执行图形代码可能会出错。
    setTimeout(function(){
    //获取插入的test矩形框，作为图表绘制的容器,如果前面矩形框为其它名字，则test改为对应的名字
    var dom =$('[data-label=test]').get(0);
    //初始化
    var myChart = echarts.init(dom);
    
    var option = {
        /*在此处粘贴ECharts官网的示例代码*/
    };
    //设置数据
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

6.在echarts官网找到需要的图表代码，将下面option的这段代码替换上述代码的 var option = {};

7.保存原型并预览即可：