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

本文介绍: 利用ECh ar ts将图表集成的a xure中，更好的用于原型展示

步骤一：打开ECh ar ts，选择 图表 模板

ECh ar t s 示例模板链接：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 &amp;&amp; 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 &amp;&amp; typeof option === "object"){myChart.setOption(option, true);}}, 800);