Axure中引入echarts展示

第一步：拖着出一个矩形框，取名为aqrw(名字任取)

第二步：在echarts官网的例子中选中你需要的图表样式 echarts示例库：echarts.apache.org/examples/zh…

在这里，我们选择的是：

第三步：选中矩形框，在最右侧的面板中选择新建交互如图：

第四步，新建交互内容

第五步：点击fx后

在中间部分输入代码：

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

var option = {
color: [ "#4C50B2",'#008FE0','#D9001E',],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['完成', '接收', '下发', ]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [

{
name: '接收',
type: 'bar',
stack: '总量',
areaStyle: {},
data:[4, 3, 1, 4, 3, 3, 2,1, 4, 9, 3, 2]
},
{
name: '下发',
type: 'bar',
stack: '总量',
areaStyle: {},
data: [3, 3, 3, 3, 4, 3, 2, 5, 4, 2, 3, 3]
},
{
name: '完成',
type: 'line',
data: [7, 6, 3, 7, 8, 5, 5, 7, 9, 9, 7, 6],
markLine: {
lineStyle: {
type: 'dashed'
},
/* data: [
[{type: 'min'}, {type: 'max'}]
]*/
}
},
]
};
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 100);

注意：

第六步：点击确定和完成后预览看到效果

成功啦！其他任何图形都是替换代码即可！