伴你从优秀到卓越,高端产品经理都在用

如何在Axure中引入Echarts图表_嵌入echarts_嵌套echarts_加载echarts

Echarts的图表效果还是很好看的,比excel自带的好看很多,国内很多开发团队都在用,作为一个产品设计,如果能跟最终开发出来的风格保持一致,也就实现了所谓的“可见即所得”,客户满意、老板满意、女朋友满意,好顶赞,哇咔咔,开搞吧。

有两种方法,都可以实现,第一种简单粗暴,第二种适合有点技术的童鞋:

方法一:通过截图将echarts图表插入到axure中

在线做好数据之后,直接截图粘贴到axure中,如下图所示,也是很好看的,唯一不爽的地方就是

方法二:通过内部框架将echarts嵌入axure中

1、往axure绘图区拖入一个内部框架元件

往axure绘图区拖入一个内部框架元件

 

2、双击内部框架,在弹出的对话框下方,填入做好的echarts的链接地址

大家如果不会做echarts图表,可以看我的另外一篇文章《如何制作可以在线查看的echarts制作图表_百度图说

这里我使用一个我做好的echarts图表,大家也可以用这个作为例子:https://tushuo.baidu.com/prod/viewProd?prodId=dta8bsdt9011iwwg0&cli=win

预览一下echarts图表看看效果,如下图:

emmm,效果一般,echarts图表没有显示完整,那么我们把内部框架调大一些再看,已经好多了。

但是还是不够好,首先顶部的banner我们并不想显示它,然后内部框架的横向和纵向滚动条也非常影响美观。

我们在axure面板右边配置让内部框架的滚动条“never show/从不显示”,并且“hide border/隐藏边框”

然后再画一个白色的矩形,挡在内部框架的上面

 

哈哈,已经接近完美啦,除了我们刚才加上的矩形,这是为了让大家看到效果。

我们把矩形框的边框隐藏,再次预览,非常完美~哈哈

 

未经允许不得转载:胡大设计 » 如何在Axure中引入Echarts图表_嵌入echarts_嵌套echarts_加载echarts
  1. #4

    test2

    匿名3年前 (2018-04-17)
  2. #3

    test6

    匿名3年前 (2018-04-17)
  3. #2

    test1

    匿名3年前 (2018-04-17)
  4. #1

    test

    匿名3年前 (2018-04-17)