Axure中嵌入专业级可视化图表Echarts

引言

Axure中的图表还在一条线一条线的画吗？还是将图片图表方式贴进去？还是用内联框架引入本地html图表？

下面介绍一种一步到位，快速高效而且百分百还原的制图表方法，熟练了只要复制+粘贴就够了。

原理：Axure是支持通过javascript伪协议执行javascript代码，因此引入Echarts的js库，然后直接在Axure中执行图表的绘制代码；

用这些动态效果图展示作品，一比一的高保真图表效果，无需多言，开发都在仰望你！赶紧学起来！

一、选择 Echarts 示例库

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

Echarts 示例库地址：

https://echarts.apache.org/examples/zh/index.html

二、可视化动态图表示例

动态·时钟示例

动态·趋势变化示例

三、Axure嵌入图表步骤

3.1 Axure页面中拖入矩形，然后在交互中命名“Echarts1”，点击新建交互

3.2 在Echarts 示例库中选择一个你想要的图表，比如选择下图图表（左侧为代码，右侧为效果）

此步骤可在左侧按你需求修改数值，图表抬头名称，颜色等(前端开发直接COPY就可使用)

3.3 复制下列javascript代码，第6行是控件命名一致，第9行是上图中的左侧代码替换进去

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=ECharts1]').get(0);
     var myChart = echarts.init(dom);

     var option = {}; //用右侧代码覆盖过来替换颜色部分

     myChart.on('updateAxisPointer',
     function(event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
               const dimension = xAxisInfo.value + 1;
               myChart.setOption({
                    series: {
                         id: 'pie',
                         label: {
                              formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                         },
                         encode: {
                              value: dimension,
                              tooltip: dimension
                         }
                    }
               });
          }
     });
     if (option && typeof option === "object") {
          myChart.setOption(option, true);
     }
},
800);

3.4 上面三个步骤再做个总结说明，把俩段代码合并后，复制完整的代码(文末)

3.5 将完整的代码粘贴(交互->载入事件->链接到URL或文件路径“，点击fx)，点击确定保存

3.6 在Axure 中按F5预览，可视化图表效果就出来了

PS.完整代码示例（拷贝直接粘贴，即可预览使用）

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=ECharts1]').get(0);
    var myChart = echarts.init(dom);
    
var option = {
  title: {
    text: '南丁格尔玫瑰图',
    subtext: '产品社区营(chinaPMCC)',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: [
      'rose1',
      'rose2',
      'rose3',
      'rose4',
      'rose5',
      'rose6',
      'rose7',
      'rose8'
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Radius Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ]
    },
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['75%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 30, name: 'rose 1' },
        { value: 28, name: 'rose 2' },
        { value: 26, name: 'rose 3' },
        { value: 24, name: 'rose 4' },
        { value: 22, name: 'rose 5' },
        { value: 20, name: 'rose 6' },
        { value: 18, name: 'rose 7' },
        { value: 16, name: 'rose 8' }
      ]
    }
  ]
};
 myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);