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

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

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

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

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

01选择 Echarts 示例库

Echarts 示例库地址：https://echarts.apache.org/examples/zh/index.html

02 可视化动态图表示例

03 上车实操步骤

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