AYONG_BDR周练第三期，数据可视化图表组件设计正式跟大家见面了，希望大家，继续加油哈，这期暴露了很多问题，最严重的就是配色的问题，AYONG后面会单开一期，讲一讲颜色的问题。下面请欣赏数据可视化图表组件设计。
需求包含：横向柱状图，纵向柱状图，堆叠柱状图，折线图，折线面积图，柱折图，饼图（两种），散点图（两种），雷达图（两种），仪表盘（两种）
AYONG
此次的数据可视化图表设计，沿用了自己的一贯简洁的风格，旨在对数据的表达清晰明了，蓝白色系，既符合大数据审美，同时也区别于传统数据图表的颜色样式等等。
整体风格：在原本的蓝白单色系各种之上，拓展了其他数据维度的颜色，尽量采用小色块以及直线去表现图表，通过点线来塑造图表细节，既不影响视觉，也不影响开发还原，平添几分精致感。
细节点评：通过给线添加小装饰（左右白色的点）来丰富图表，y轴坐标融于图标内部，使得每一个模块更整齐，在面对大的数据变量时，不会有不对齐的突兀感；折线图通过点线和矩形的结合，更能表现单一折线图下的表现形式；散点图的变形，可以通过图形外观去展示，圆形，四边形，也可以是五边形，星形等等；饼状图并没有采用传统的与图形结合的表达形式去制作，因为传统的柱状图展现出来时，会显得有点信息重复（跟图例之间），此种方法的好处就是将图例和数据结合，更能完全展示图形之美；雷达图以及仪表盘可以通过变色来展示不同变量，也可以叠加显示，多维度去展示不同变量。
总结：此风格图表个性鲜明，区别于传统图表，开发还原无难度，基于开源组件的变形，细节足，复用率高，有创意点，数据展示清晰。
初一
整体风格：单色调，紫色为主色，其实很多设计师看到国外的HUD风格会觉得很酷炫，单色系，黑白灰为衬托，不过要注意的是，黑白灰单色系用不好就会对画面有很严重的影响，比如初一同学的，整体细节把控的很好，不过有些地方需要划重点强调！！！
具体细节：图表表现上没有太大的问题，也很有创造性的将HUD元素应用到图表上，（点，线，小装饰等等）既不影响美观，也能更加丰富细节。整体塑造没有太大的问题。
唯一需要注意的一点就是，区别各个变量不可用色相来区分，或者说是不可用明度去区分，这样会使整个画面变得很糊，效果不突出。整体太灰，不容易区分不同的变量。
比如：饼图。饼图2的四个变量除了主色紫色以外，其他三个颜色的色相过于接近，即使是有图例的情况下，也很难去区分各个变量之间的关系，正确的处理方法是，将主色紫色不变，采用不带颜色倾向灰色以及白色去区分各个变量，这样画面效果突出，也不容易出现以上所说的情况。
折线图部分：圆点可以用白色而不用紫色，紫色显得很突兀，并且柱状图部分的白色可以再灰一点比较好，这样有点压主色了。
雷达图以及仪表盘同样存在同种色相的问题，除了重点要表示的变量用主色去填充，其他需要添加灰色去平衡画面，并且主文字用白色比较好。
总结：画面感很好，图表创意十足，开发难度不高，但是一定要注意同等色相之间的关系，我有一篇文章是关于色彩规范的，对单色系一样使用，可以去看一下。修改之后是个好作品。
修改前
修改后
你就是我的猫
整体风格：蓝绿色系，颜色非常好，有高级感，整体颜色有些暗，部分细节可以优化，
细节点评：横向柱状图每一项间距太大，可以增加柱状图每一项的高度（原因：数据展示上，数据有些小，可以通过增加每一项的高度，来使数据字体更大一些）；
柱状图的数据展示方式尽量统一，比如堆叠柱状图就可以跟图一的方式一样，展示在柱状图内部，这样不单是颜色统一，展示方式也统一。
折线图可以通过增加细节来区别两种不同的变量，现图形由于两种颜色接近并且描边较细，很容易产生混淆，区分不明显，可以通过实线和虚线以及通过加强描边大小（柱折图同理）。
折线面积图可以将面积增加描边效果，区分两种变量。或者改变其中一种的样式（增加原点，跟柱折图类似）。
散点图可以将圆形的点增加不透明度，同时去掉渐变效果，且选中数据可以再突出一点。
饼图可以考虑用多种颜色去制作，单个色不足表达多种数据维度，可以将渐变的两种颜色提炼出来，以及绿色的渐变亮色提炼，既不影响整体风格，也能更清楚表达数据。
总结：整体画面偏暗，如若在LED屏幕上，显示则非常不明显，建议将XY轴文字，以及图表上的其他文字，提亮颜色，这样效果会更好！加油！！
修改前
修改后
Indian summer
整体风格：蓝紫色风格，风格很好，不过整体的颜色选取有有一些问题，选取颜色块需要再考究一下，整体颜色有些偏多，规范不明确，不好组件化开发。
图表细节：图表完成度很高，并且颜色丰富突出，不过有些细节上需要注意比如横向柱状图的名称此种情况下应该右对齐。
堆叠柱状图：不应该用同色相的颜色去堆叠，这样颜色显示不清楚。数据展示也不是很友好。
折线图：第三种颜色可以用上面柱状图出现的颜色，还可以将颜色相近的一条折线用虚线来展示。
饼状图：传统风格的饼状环形图和玫瑰图，建议可以在此基础上增加以下自己所特有的东西，比如上面图表的数据展示方式（通过一个弹框）去表现。
雷达图：两种颜色最好可以用同一个透明度，或者可以重点展示一个，通过点击图例的方式，点击之后绿色变为实心（不带透明度）。
仪表盘：可以丰富一下样式，现仪表盘可以将仪表盘的信息展示出来。
总结：风格基于echarts基本样式，没有过多的改变，也没有过多的创新，希望可以多有点自己的想法，而不是逃不出基本组件的框架，不要说什么做不出来，最初这些组件也是从0到1的。颜色方面还需要再挑选一下 定义色彩的多少，颜色太多也不是好事儿。
better
整体风格：传统蓝色可视化风格，在原有的基础上增加了一些细节，比如小圆点，纵向柱状图的数据展示样式（可以赋予整个图表这个样式）。同时颜色取色没有规律性，整体颜色太多，在一套组件的前提下，很难想到是一套组件。
图表细节：整体图表除仪表盘图外，基本没有脱离基础组件的样式，其实这不是一个好习惯，在做练习的时候不要怕程序实现不了，这个程序不行，其他程序是可以的，不要因为这个去限制了自己的思维。
比如柱状图，可以在XY轴直线端口添加箭头，在图表内增加虚线，以及面状的底。
饼图：是否可以考虑将现有的形状添加圆形的小虚线作为装饰，只不过是一个小装饰的div，并不难！
总结：可以基于现有的组件，去设计一套属于自己的组件，令每一个图表都有其共性，一看就知道是一种风格的图表，是一套的。而不是说通过颜色去强行整合成一套，同时也需要对颜色的选择进行把控，配色还需要增加练习，继续加油！
cicle
整体风格：不像是一套组件，更像是很多套东西杂合在一起的，建议可以将此统一化，做成一套的东西，配色什么的再根据这一套去做，组件很多，量很大，可以精简一下自己的组件，提炼出最好的一些，毕竟在精不在多。
图表细节：可以多一些基础组件没有的东西，比如饼图里面的环形图，环形图也可通过实线虚线渐变发光投影去调节，这样就有了很多的变化。
折线图：可以讲折线图分为，折线图，面积图，双折线图，可以通过这些去完善组件，并且要注意颜色的搭配（大折线图，xy轴的颜色选用方面）。
柱状图：样式就很丰富，表现的方式有很多，例如点线，2.5d，渐变，描边等等方式去做，这样是极好的。
仪表盘：不要用单色去做，可以通过添加白色，以及对比色去增强图表的效果。
总结：内容太多，看不到重点，可以将整个组件，细致分类之后，提取一套比较好的组件，这样会更好一点。同时也要注意颜色的选用，同一色相的颜色，不要过多的用在一个图形上。同时需要对整个页面进行排版，排版也是体验设计很重要的一个指标。
LUCKY
整体风格：黄绿色系，整体感觉很好，细节多，而且表明了一些图表的使用场景，以及他的弊端和优势，这是非常好的，这就是一个非常好的组件化思维的习惯，需要去提炼，以及总结组件的优略势，非常好。
图表细节：整块图表内容都是基于基础组件的变形，可以再适当的增加一下自己的设计在里面，再添加一些细节，对图表进行进一步的升华，会好很多。在一些细节上还可以再优化一下例如：折线面积图，可以用以下渐变这个样式，这样质感会更好一点。柱状图在不同的样式下，可以运用不同的方式去表现（减少柱状的宽度，在矩形上进行一些变化）。
雷达图：尽可能出现跟最后一个雷达图相似的东西，多一些这样子的图表，质量一下子就提升了很多。
总结：可以通过基础组件去变形，通过将一些小元素进行不同样式的替换，这样就很有组件化思维，需要更加丰富这一点，将所有的图表都运用到此种的思维，那么你的作品就会有很明显的提升，同时细节又很突出。
浮生
整体风格：蓝绿色系，颜色很好，有高级感，整体颜色有些暗，用色规范也可优化，部分细节还需要继续优化。
细节点评：标题的文字可以用亮色（如白色，蓝色）去表示，现样式有些暗淡了。
柱状图：可以将数字数据展现的再明显一些，并且现文字的颜色显示不太明显，可以用更亮的颜色去表示。
折线图：描边可以适当的加粗一下，一像素的描边有点太细了，应该跟面积图的描边大小差不多即可。
饼图：可以在此基础上再加一些修饰性的东西，避免同质化比较严重的问题。
散点图：可以通过不同的散点，不同的样式去区分，可以用圆形，也可以用方形，三角形，以及菱形五边形等等样式。
雷达图：文字颜色此处不应该是这样子的，应该跟上面的图表统一。
仪表盘：第二个仪表盘可以将数字表现得明显一点，细节再增加一点会比较好。
总结：整体颜色可以调整一下，提高一下啊对比度，蓝色的底可以深一点（这里指的是边框底，和整体的背景图），同时文字的颜色可以亮一点，文字颜色统一一点图表细节多一点。
胡萝卜
整体风格：蓝色系，样式新颖，有自己的想法，并且风格很统一，有组件化思维，平时应该经常会做一些规范的整理。
图表细节：图表的风格非常的好，知道运用不同的展现方式去修饰同种图表的不同类型，比如散点图，可以想着通过大小来控制，比如仪表盘可以通过实线与虚线的方式去控制，比如饼图，可以通过二维和3维的方式去控制，比如柱状图，可以通过面和线来控制，比如图表里的正方形框架，每个图表都有这个，这就是组件化的去制作，这就是组件化思维的核心，通过细小的变化以及同一细节的总结和运用。
总结：整体效果很好，可以在此基础上，继续拓展图表，不过在饼图颜色的选用上，配色有点不好，希望继续加油。
囧囧
整体风格：蓝绿色系，不可选用同种色相下的不同颜色，应该选用不同颜色去区分，颜色这块是重中之重，我有篇文章里面讲的有关于可视化颜色选用的问题的，可以去翻一下，了解一下。
图表细节：柱状图：很好的展示了通过不同样式的表现，去展示图表的细节（加底色，实线，虚线），这种就是组件化的思维。
折线图：此处应该尽量加上y轴的线，因为本身折线图占比就很空，需要更多的细节去填充。
饼图：饼图可以通过不同的颜色去表示每一项，这样表现起来更直观，如果用同种颜色用户理解起来比较吃力。
散点图：可以通过不同的散点，不同的样式去区分，可以用圆形，也可以用方形，三角形，以及菱形五边形等等样式。
总结：组件化的思维很棒，知道如何去组件化，掌握了方法，颜色方面再加以修改，一定会出现非常好的优秀的作品，区别于其他人的一些作品。
九
整体风格：九的配色非常的舒服，样式也很好，对于颜色的把控很到位，并且图表的表现方式区别于基础组件，非常的好。
总结：此图表非常的好，可以算是本次最好的一个作品了，堆叠柱状的颜色可以再优化一下，运用饼图1当中所出现的颜色，这样整体就是非常的和谐了，同时饼图2的颜色，也可以相同的方式去优化。图表数据的展示可以文字再大一些，并且将其他图表的样式数据选中的样式都加上，就是一个非常好的组件，并且也是一个非常好的商业组件。
没有可以提出的问题了，实至名归，很好的作品。
老猫
老猫一贯的单色风格，颜色很和谐，画面感很好，不过商业设计的前提下，多色应该还是主流，可以适当的添加一些颜色，更加丰富画面。
柱状图可以用不同的展现形式，比如用面线，可以是渐变，也可以是虚线，多种样式去表达会更好一点。
散点图：可以通过不同的散点，不同的样式去区分，可以用圆形，也可以用方形，三角形，以及菱形五边形等等样式。
雷达图：应该是以展示多维度数据为主，各城市的指标是多少，图上并不能表现出来具体的数据是多少。
总结：可以在此图表的基础上，优化一下颜色，以及图表的一些样式，去丰富一下图表的表现方式，画面会更好。
李逍遥
整体风格：颜色样式，都非常的好，基于基础组件的变换也做了一些细小的变化，边框的增加也更能体现一整套组件的完整度以及统一性。
细节：柱状图的表现通过斜角的方式，立马就区别于传统组件，所以就是需要这些大胆的尝试，因为现阶段客户对传统设计有些审美疲劳了。
饼图的样式跟基础组件相比，没有改动，可以基于此图形，面状的玫瑰图，做成线状的这样就有了区分，同时又可以在此图形上进行再次创作，添加一些线条感的圆形等辅助线
散点图：可以通过不同的散点，不同的样式去区分，矩形，方形等等。
雷达图：需要添加上数据信息，不然体现不出各种维度的展示。
总结：整体非常好，在饼图方面还需要多下点功夫，尽量多出现仪表盘那种类型的东西，对画面的提升非常大，差异性也很强，继续加油！！！
玲
整体风格：这是跟所有图表的样式都有区分的产品，说实话今天我看了将近20位同学的作品，印象最深刻的就属于初一（紫色系），九（整体都非常好），接下来就是这个，这个印象还在其他人之上，不同于其他人的图表，展示方式新颖，创造力很强，设计师就应该有这样的创造力。
图表细节：柱状图这块可以适当的缩小一下图形，因为图形所占比例过多，显得有些不精致，具体可以参考自己的第一个饼图，那样的感觉非常的好。
折线图的样式可以添加上坐标轴，毕竟展示数据，需要直观的看到数据的展示。
饼图：此样式非常的好，看的我都想去立即临摹一下，特别喜欢这样感觉的东西（这只是个人主观意愿）
雷达图：雷达图应该是展现的不同维度的东西，单单一个92%不能展示出全部维度的东西。
仪表盘：两种样式也是非常的好，仪表盘1想法非常独特，开启了我自己又一扇大门。
总结：设计师就该有这样子的创造精神，不单是去借鉴参考，更要去超越参考，制定属于自己的设计规范，希望继续加油，一直保持这种创造力。
文阁
整体风格：画面感觉很舒服，但不知为什么要将底色换成两种不同的颜色去设计，感觉像是两种不同的风格。如若需要选择，我倾向于暖色系风格的设计。
细节：上半部，蓝色图表样式采用了渐变的样式去展示，区别传统组件的实心样式。
散点图：不同的样式去区分点，有聚集有分区域展示，点的样式可以转变一下。
饼图：饼图的颜色可以在优化一下，紫色的这部分可以偏蓝色一点，并且加上数据的信息展示会更好一点。
仪表盘：仪表盘的样式很具有特殊性，希望其他的图表多出现此类型的东西，这样对画面的提升比较大，也能区别于其他人。
总结：整体图表样式上有自己的想法 非常好，希望继续发扬这样组件化的思维，通过修改一点小的细节，一些不一样的地方，这样出来的东西，才会有变化性。
DATAV作品（侵删）
其他作品（未按标准来做）
总结
这期暴露了很多问题，最严重的就是配色的问题，AYONG后面会单开一期，讲一讲颜色的问题，同时本期周练就是为了培养大家的组件化思维，希望大家在以后的工作中，运用组件化思维去做设计，这样不仅提高了设计效率，也有利于自己的归纳和总结。设计师就是要不断的创造奇迹和改变世界。
我是AYONG，一位热爱数据可视化的设计师！！!
同时在此也欢迎有志同道合的设计师们加入，一起去做一些关于数据可视化的事情，蚍蜉虽小，亦能撼树。同时也感谢tob-design对周练的大力支持，超实用的B端可视化设计师平台。
