Axure使用echarts详细教程

夕降巫咸2024-10-17 10:28

本次使用的axure版本为rp9,下面是效果图。

接下来是详细步骤

【步骤1】在axure上拖一个矩形进来，命名为myChart(这个根据实际情况来,和后面的代码对应就好)

【步骤2】

点击交互->选择加载时->选择打开链接->链接外部地址

点击fx这个符号

【步骤3】在弹窗中输入代码，点击确认，在浏览器中就可以查看了。修改图表的样式只要修改Option中的内容就好了，小小ecahrts拿捏。

javascript 复制代码

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