#推荐
【基础教程】JS代码调用ECharts、AntV图表

2024-07-02 0 923

1 截图法

截图法指从一些提供数据图表生成的网站,将示例图表调整成自己想要的图表,截图在axure中拼接成数据看板。
优点:简单、易学、快速、便捷
缺点:图表展示效果不好,无法动态化
以下是笔者收集到的一些常见图表生成网站:
  • Excel(微软)
顾明思义,通过excel生成图表,再将Excel贴图进axure中。
  • Echarts(百度)
  • antV(阿里)
  • 帆软(自主厂商)
  • ChartCube(阿里)
  • 图说(百度)
扩展阅读
echarts antv 区别比较?

2 html文件法

html仅限于图表网站提供html下载的场景下使用。
主要步骤是:①打开图表网站->②调整配置参数->③生成html并下载->④上传至云服务器->⑤在axure中新建框架原件->⑥框架目标填写html在云服务器上的地址。
优点:简单、易学、图表展示效果好(动态效果)
缺点:发布麻烦、更新麻烦、需要云服务器
①打开图表网站
Echarts:
antV:
https://g2.antv.vision/zh/examples/gallery
②调整配置参数
Echarts:【基础教程】JS代码调用ECharts、AntV图表
antV:
【基础教程】JS代码调用ECharts、AntV图表
③生成html并下载
Echarts:
【基础教程】JS代码调用ECharts、AntV图表
antV:
【基础教程】JS代码调用ECharts、AntV图表
根据提示修改好代码,保存成html文件。
【基础教程】JS代码调用ECharts、AntV图表
④上传至云服务器
此过程根据自己的实际情况操作。
⑤在axure中新建框架原件
【基础教程】JS代码调用ECharts、AntV图表