当你开始讨厌Excel的简单性时，Echarts或者Highchartsecharts 饼图的颜色设置颜色，两个基于浏览器渲染技术的纯JS框架，是你最好的选择。 本文详细介绍了Echarts和Highcharts的对比评价。
高图表
Highcharts 是一个用纯 JavaScript 编写的开源图表库，为网站和 Web 应用程序提供直观且交互式的图表。 目前支持折线、曲线、面积、面积曲线、柱形图、条形图、饼图、散点图、测角图、面积数组、面积曲线数组、柱形数组、极坐标等十种图表类型。
点击下载最新的Highcharts试用版
高图表的优点：
轻巧，移动端使用起来比较流畅，毕竟小。
基于svg，可以非常灵活的动态增删节点数据，无需重绘。
图表解读美观简洁。
性能稳定
兼容性不错，官方说兼容IE6，其实只要兼容IE8我们就基本满意了。
完整的示例演示、功能介绍和详细的api文档。 并不是说没有echarts，而是Hcharts确实比较详细，例子也比较多，很容易观看，这对于我们初学者来说是非常有必要的。 （但有些是英文的……没什么可看的）
Highcharts 的缺点：
缺少中文文档。
商业费用，国外。
电子图表
ECharts是一个使用JavaScript实现的开源可视化库，提供用于统计的常规折线图、直方图、散点图、饼图、K线图、箱线图、用于地理数据可视化的地图和热图、折线图、关系图、树形图，关系数据可视化的旭日图，多维数据可视化的平行坐标，以及BI的漏斗图和仪表板，并支持图之间的混搭。
ECharts的优点：
体积小、免费、使用快捷
中国人开发，文档齐全，开发、阅读文档都很方便。
图表很多，可以应用各种函数。
ECharts的优点：
移动端用的是策略卡，毕竟是PC端的东西。 移植到移动端肯定会出现一些问题，可能和我自己的水平有关系。
文档中有很多地方写得不够好、不够详细。
对IE8及IE8（甚至IE9）及以下的兼容性很差，经常报很多错误。
缺乏对立体渲染等的支持。
在文档示例不理想的情况下，不仅可以修改颜色线的长度和粗细，其他定制开发都比较困难。
Echarts VS Highcharts
1.易学性：只要你会JS，相信你可以很快上手。 两人得分相同。 不过百度出品的Echarts已经有针对国内城市的相应配置，调用起来非常方便。 因此，Echarts在绘制地图方面略胜一筹。
2、大数据表现力：有网友表示，当数据量达到万级级别时，Highcharts的多表联动和自动缩放优势更强，而Echarts会出现明显的滞后，需要设置datazoom。 因此 Hightcharts 以微弱优势获胜。
3.文档友好性：Echarts来自百度，Highcharts来自美国。 Echarts是文档是英文的，Highcharts是英文的。
4.图表之美：看Echarts和Highcharts的两个例子。 而且Echarts是基于Canvas的，在3D绘图方面有绝对的优势，可以画出极其漂亮的图形。
5.图表配置自由：Highcharts基于SVG，方便定制。 对于同类型的图表，Highcharts可以玩出100种花样。 极高的自由度特别适合定制商用大屏。
echarts底层是canvasecharts 饼图的颜色设置颜色，highcharts底层是svg
画布特点：
①取决于分辨率
② 不支持事件处理程序
③文字渲染能力弱
④可以将结果图像保存为.jpg、.png格式
⑤ 最适合图像密集型游戏，其中许多对象会频繁重绘
svg 的特点：
① 不依赖于帧率
②支持事件处理程序
③ 最适合渲染区域较小的应用程序（例如 Google 地图）
④ 高复杂度会降低渲染速度（任何过度使用 DOM 的应用都不会快）
⑤ 不适合游戏应用
请输入标题文字
1. 框架适配的补充；
在接下来的分享中echarts 饼图的颜色设置颜色，我们将介绍使用函数获取浏览器窗口的宽度和高度值，然后将形式参数赋予相关界面元素，以达到框架的自适应效果。 一些设置是在源文件中实现的，我没有展开描述。 一些观察比较仔细的同事注意到了并提出了相关的疑问，所以我会尝试详细解释这一部分。
您可以在页面属性的“当窗口大小更改时”风暴中看到两个条件用例。 1是当窗口长度小于1366时设置，2是当窗口长度大于1366时设置，这两种条件情况下设置的相关元素的长度不同。
当窗口长度小于1366时，截图显示为1：
设置右侧菜单（右侧动态面板）的高度为：[[Window.height-50]]，50为底部菜单的高度。 例如浏览器窗口的高度为800px，那么两侧菜单的高度为800px-50px=750px；
设置内容框架（内联框架）的高度为：[[Window.height-50]]，50是底部菜单的高度。 例如浏览器窗口的高度为800px，那么内嵌框架的高度为800px-50px=750px；
设置内容框架（内联框架）的长度为：[[Window.width-200]]，200是左侧菜单的长度。 比如浏览器的长度是1366px，那么内嵌框架的长度就是1366px-200px=1166px。
截图显示2，当窗口长度大于1366时：
设置右侧菜单（右侧动态面板）的高度为：[[Window.height-50]]，50为底部菜单的高度。 例如浏览器窗口的高度为800px，那么两侧菜单的高度为800px-50px=750px；
设置内容框架（内联框架）的高度为：[[Window.height-50]]，50是底部菜单的高度。 例如浏览器窗口的高度为800px，那么内嵌框架的高度为800px-50px=750px；
通过对比，你会发现，当窗口长度大于1366px时，内容框的长度没有设置。 这个设置的主要目的是防止内嵌框架中出现垂直滚动条。 在高于1366px的屏幕比特率演示时，如果内容页长度超过获取的内嵌框架长度，则框架页面中的内嵌框架将显示垂直滚动条。 通过这样的设置，可以保证内嵌框架中不会出现垂直滚动条，只出现页面的垂直滚动条。 事实上，如果不需要以高于1366px的屏幕比特率进行演示，则不需要进行这样的设置。
截图中标记3，设置功能区域的绝对位置。
该设置的作用是获取浏览器窗口的长度，除以功能区动态面板的长度，使功能区动态面板始终位于最界面的两侧。
2、梳理功能分类，构建站点地图；
在开始相关功能页面的设计之前，我们需要对后台功能进行总体的梳理和分类。 我通常使用思维导图工具来完成这项工作。 后台系统的功能主要是管理后端业务，所以在梳理的过程中一定要重点关注后端的业务逻辑，这是体现产品人员对需求或需求理解程度的一个重要方面。商业。 科学合理的功能分类可以促使开发人员快速了解需求，同时也会直接影响系统上线后的用户体验。 （顺便说一下，可能有很多公司的后台系统是没有用户体验的。）
功能排序需要遵循从粗到细的过程，首先梳理出一级类别的功能结构，然后根据类别考虑其需要哪些子功能，以及子功能中的相关参数设置。 以某电商平台后台系统为例，其一级类别基本包括：订单管理、商品管理、会员管理、库存管理、内容管理、运营管理、财务管理、统计查询、系统设置等，其中订单管理子功能通常由订单查询和订单相关属性设置组成。 在思考和梳理的过程中，我们可以利用脑图来列出功能分类。 在对功能进行分类时，尽量将相关的子功能或模块放在同一类别中，同时要注意分类的层次深度不宜太深。 分类层次的深浅与导航菜单的设计有关。 一般来说，级别最好控制在两级或五级以内，最好不要超过四级。
如果功能分类已经基本理清了，那么就可以使用Axure的页面管理功能来构建站点地图了。 一般来说，开发一个中小型系统项目时，基本上都会有多个迭代过程，而不是一次完成设计和开发。 站点地图可以让我们大致评估整个系统设计的工作量，同时根据优先级安排相关迭代。 这种工作方式也适用于其他中小型产品的原型制作工作流程。
3、关于功能内容页面的设计；
在开始内容页面的设计之前，我们首先需要定义页面的设计规范。 如果以窗口长度1366px为例，我们已经在框架页面中设置了长度为200px的侧边菜单，所以演示中内嵌框架的长度为1366px-200px=1166px，根据这个长度我们将内容页的设计规范长度设置为1100px是比较合适的。 如果你的屏幕比特率较高，内容页的设计长度可以设置稍大一些，但最好不要超过1300px。
为了定义页面的设计规范，需要参考线。 您可以通过从标尺区域拖动到内容区域来创建水平或垂直参考线。 选择相应的参考线并右键单击以锁定它或进行更多设置。 下面的截图是我使用引导线的效果，两边都保留了20px的空白区域。
需要指出的是，内容页的内容区域没有办法实现自适应间距。 我们需要在页面属性上将排列方式设置为居中排列。 当以较高的屏幕码率呈现时，内容页面上的内容区域会显示在中央，页面两侧会有空白。
当前页面的标题会显示在内容页的底部，可以通过[[PageName]]函数手动获取当前页面的标题，无需设置每个内容页的标题分别地。 设置方法是在标题设备中设置加载时间，设置加载时将当前设备的文本设置为[[PageName]]。
以上几点是关于功能内容页面的一些基本设置，我们可以根据以上设置来创建页面模板。 后台系统通常有两类页面：一是数据查询，主要由筛选区域和数据列表组成；二是数据查询，主要由筛选区域和数据列表组成。 二是参数设置，主要由表单数组和数据录入组成。 我们可以根据这两类页面类型创建模板，然后以复制的形式复用，这样可以大大提高设计效率。
数据查询接口
参数设置类接口
4、关于统计图表的设计；
统计图表是后台系统中常见的展示方式。 由于Axure不提供图表相关的设备，所以用它来绘制图表是一件很头疼的事情。 为了解决这个问题，我们可以使用图表工具生成相应的图表效果，然后将生成的图片复制到原型中。 我推荐使用百度的图表工具Echarts，这是一套开源的数据可视化工具，提供了多种丰富的图表类型，包括常用的饼图、直方图、雷达图等。
Echarts图表工具实例地址
Echarts提供的示例支持图片的在线编辑和保存。 可以根据自己的需要编辑相应的例子，然后保存图片，基本可以满足原型制作中常用图表类型的需要。 以后我会整理一套常用图表类型的Axure设备库，分享给大家。 有兴趣的同学可以关注一下。
5、使用master来管理公共元素；
了解Axure基本功能的同学应该知道master功能。 可以用来管理一些常见的界面元素，可以快速拖拽到不同界面，支持统一更改。 充分利用主控功能，提高你的设计效率不是很多。 下面的截图是我在设计后台系统中搭建的母版，里面包含了常用的底部或顶部元素、常用的分页插件和编辑器、常用的按钮元素等。
创建母版有两种方法。 首先是在编辑界面中选择相应的元素，右键单击，选择“转换为母版”。 二是点击母版管理面板右上角第一个“添加母版”。 版本”按钮创建。建议创建时给母版命名。如果母版太多，可以创建一个文件夹进行管理。
6、使用repeaters管理列表元素；
Axure中的转发器设备用于实现动态数据的效果，利用其特性可以方便地管理列表元素。 如果我们需要多行数据列表，一般的做法是先创建一行元素，然后复制并排列它们。 如果数据列表有20行，我们需要复制19行然后对齐。 这个操作是一个非常耗时但繁琐的过程，对于有对齐强迫症的学生来说简直就是一场噩梦。 而通过使用repeater，我们只需要创建一行元素，然后将其复制到repeater，然后在中断器中批量下19行，这样就创建了多行数据排列。
创建中继器的方法非常简单，只需将其从软件的设备面板拖到编辑界面即可。 新创建的中继器默认有3行，你可以删除上面的元素，然后在上面编辑你需要的元素。 当选择了中继器设备后，在右侧的属性中，我们可以通过灭弧室行管理上方的图标快速添加和删除行数。
在复读机的样式管理中，我们还可以设置它的样式、间距、布局。 例如，您可以控制每行或每列显示的数量echarts 饼图的颜色设置颜色，这可用于创建更丰富类型的列表。
列出使用中继器产生的疗效
7、整理常用的交互元素和组件；
后台系统中常用的交互元素通常包括菜单、图标、按钮、表单等，还根据后台业务功能的需要使用各种选择和过滤组件。 一般来说，我会在原型中创建相关的模板页面来对交互元素和组件进行分类。 这种方法基于以下考虑：
以上是我整理的一些后台系统中常用的交互设备和组件的截图，供大家参考。 另外，给大家分享一下我自己编译的一套WEB设备库，其中很多也适合后台系统的原型设计。
AxureUX 交互式原型 Web 设备库精简版：
8、如何使用和推荐图标；
原型设计中需要使用的图标可以通过多种方法获得。 比如各种海量图标库搜索网站、免费图标素材下载、同行整理的其他图标设备库等。 你可以在百度搜索一下。 可以找到相关资源。 我个人使用阿里巴巴团队推出的图标共享平台iconfont，有两个原因。 首先，它的图标数量非常全面。 目前，包含的图标数量超过160万个。 您只需使用搜索功能即可快速检索到您需要的图标。 其次，该平台上的图标可以自定义颜色，并且可以下载SVGPNG等多种格式。
SVG 是一种矢量图标格式。 您可以直接将下载的SVG图标推入Axure的编辑界面，支持随机缩放且不失真。 Axure8.0 3312及以上版本中，新增了一个可以将SVG图标转换为形状的实用功能。 您只需选择相应的SVG图标，右键单击“将SVG图像转换为形状”即可。 SVG图标转换为形状后，不仅支持随机缩放，还可以根据需要改变颜色和形状。 如果您还没有使用过该功能，建议尽快尝试一下。 事实上，您的Axure版本首先需要升级到8.0.0.3312或以上。
我推荐的另一款是 FontAwesome 字体图标解决方案。 它的原理是利用字体来实现图标效果。 在Axure中，FontAwesome图标可以通过字体特性进行修改，包括：大小、颜色、阴影或其他字体支持的功效。 这些字体图标可以用在很多常用的场景中。 比如用它们实现按钮的交互样式设置，用它们替换默认的单选、勾选、切换图标等。 当您在表格或列表中使用字体图标时，您可以像编辑文本一样轻松地编辑和更改它们。 下表中的图片、开关、编辑等图标均使用FontAwesome字体图标。
FontAwesome字体图标方案使用说明
9、不用担心细节的交互功效；
后台系统原型设计时，不要把时间浪费在细节交互效果的实现上，例如：数据提交时的成功与错误反馈、执行相关操作的确认提示、数据处理时的加载效果、下拉菜单的交互效果等一些追求高保真处理的同学，会过于关注那些细节，花费大量的时间在这些细节的处理上，不仅影响输出效率，而且意义不大。 对于这种统一、通用的交互效果，建议用专门的页面进行整理，然后在相关页面的关联设备中做笔记。
至此，关于使用Axure设计后端系统原型的总结分享就基本结束了。 如果您对分享中的内容有疑问或者有什么建议，可以反馈给我。 本次分享还有一些细节或者遗漏可以进一步深入，后续我会继续通过其他方式跟大家分享。 最后给大家提供一套我制作的后台系统框架源文件，希望能给大家带来一些参考和帮助。
后台管理系统框架原型模板下载
发表评论