本次使用的axure版本为rp9,下面是效果图。
接下来是详细步骤
【步骤1】在axure上拖一个矩形进来,命名为myChart(这个根据实际情况来,和后面的代码对应就好)
【步骤2】
点击交互->选择加载时->选择打开链接->链接外部地址
点击fx这个符号
【步骤3】在弹窗中输入代码,点击确认,在浏览器中就可以查看了。修改图表的样式只要修改Option中的内容就好了,小小ecahrts拿捏。
javascript: $axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function () {
var div = $("[data-label=myChart]").get(0);
var Chart5 = echarts.init(div);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
if (option && typeof option === "object") {
Chart5.setOption(option, true);
}
}, 100);