Axure中的图表还在一条线一条线的画吗？还是将图片图表方式贴进去？还是用内联框架引入本地html图表？
下面介绍一种一步到位，快速高效而且百分百还原的制图表方法，熟练了只要复制+粘贴就够了。
原理：Axure是支持通过javascript伪协议执行javascript代码，因此引入Echarts的js库，然后直接在Axure中执行图表的绘制代码；
想象一下，用这些动态效果图展示作品，一比一的高保真图表效果，无需多言，开发都在仰望你！赶紧学起来！
01选择 Echarts 示例库Echarts 示例库地址：https://echarts.apache.org/examples/zh/index.html
此步骤可在左侧按你需求修改数值，图表抬头名称，颜色等(前端开发直接COPY就可使用)
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 上面三个步骤再做个总结说明，把俩段代码合并后，复制完整的代码(文末)
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);
