Axure引入ECharts，引入动态图表，代码级自定义折线图、柱状图、折线图等

步骤一：打开ECharts，选择图表模板

 ECharts示例模板链接：https://echarts.apache.org/examples/zh/index.html#chart-type-line

选择需要的模版样式，举例选择饼图：

​

 左边找到代码影响元素的要素，根据需求改变值

​

改变之后，用文本软件（js代码编辑软件、txt都行），将代码复制出来

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '中国' },
        { value: 735, name: '美国' },
        { value: 580, name: '俄罗斯' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

步骤二：编辑图表代码 

在以下代码的option中插入上面临时复制出来的代码

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=Demo]').get(0);
var myChart = echarts.init(dom);
/*从option开始改*/
var option = { };
/*这儿结束*/
if (option && typeof option === "object"){myChart.setOption(option, true); }}, 800);

注意  var dom =$('[data-label=Demo]').get(0);  中的Demo，这是一个名字，一会要在axure中给矩形元素起名字的时候，要用这个名字

合并以上两部分代码，代码如下：

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=Demo]').get(0);
var myChart = echarts.init(dom);
/*从option开始改*/
var option = { title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '中国' },
        { value: 735, name: '美国' },
        { value: 580, name: '俄罗斯' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]};
/*这儿结束*/
if (option && typeof option === "object"){myChart.setOption(option, true);}}, 800);

步骤三：axure操作（以axure9为例）

新增一个矩形，将其名字改为刚才代码中的Demo，以名字作为唯一标识，代表此矩形要执行代码中的逻辑

 在页面载入时增加事件：

新建交互，在页面初始化，页面载入时，增加打开链接事件，链接到链接和外部URL

点击fx函数

将编辑好的代码复制到输入框中

点击确定即可

运行，看一下效果

 这样就可以自定义数据，在axure中完美运行。