### 折线图组件就是添加折线图的组件。点击“![](https://img.kancloud.cn/7e/94/7e943cbae6d2a0148ea1b1fe46f2a6ca_31x31.png)”图标,再点击“折线图”,即可创建新的图像,如图2.21; ![](https://img.kancloud.cn/d2/eb/d2eb11c0526784b7e91837e68386fe51_988x497.png) ![](https://img.kancloud.cn/60/ec/60ec0dec98aa1e9d9d0b5b7a44ca931b_800x48.png) ## **一、组件名称设置** ### 选中折线图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图2.22。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/85/48/8548d49001dec3868edb105176421649_1221x666.png) ![](https://img.kancloud.cn/27/ac/27ac8f7a1bfc87956d76894ac5822b77_806x40.png) ## **二、系统配色** ### 选中该折线图组件,在操作界面右侧,打开“系统配色”开关,在“配色选择”下拉框中选择主题,来修改折线图组件的配色,如图2.23。 * ### 默认配色:效果图如图2.231; * ### 紫色主题:效果图如图2.232; * ### 绿色主题:效果图如图2.233; ![](https://img.kancloud.cn/23/43/234367ffcdc59ae11d19820fc46ea474_1220x823.png) ![](https://img.kancloud.cn/29/ac/29ac75fc99e7f040a9f41812b031b61f_797x42.png) ![](https://img.kancloud.cn/70/1e/701e4dfddbe303a325557e3bbf106ba7_997x274.png) ## **三、位置设置** ### 选中该折线图组件,在操作界面右侧,打开“竖展示”开关,可修改折线图组件的显示方向,如图2.24;效果图如图2.241。 ![](https://img.kancloud.cn/0a/ca/0aca3d3349990dd3a1cea3bfd51f3a8a_1080x756.png) ![](https://img.kancloud.cn/57/5d/575dc93ffa524eef146f78b4a8a14330_799x48.png) ![](https://img.kancloud.cn/02/63/026325054d649f8d1c29ed951bfe29bf_726x272.png) ![](https://img.kancloud.cn/96/b5/96b5e4b54ea2a48f9be010afdd1cfb75_802x43.png) ## **四、折线设置** ### 选中该折线图组件,在操作界面右侧的“折线设置”处可修改设置组件的外观特点,如图2.25。 * ### 标记点:设置折线图上是否有标记点,默认有标记点;(关闭标记点开关,效果图如图2.251;打开标记点开关,效果图如图2.252) * ### 点大小:设置标记点的大小; * ### 平滑曲面开关:设置折线图是平滑曲面还是折线,默认是平滑曲面;(关闭平滑曲面开关,效果图如图2.253;打开平滑曲面开关,如图2.254) * ### 阶梯线图:包含当前点、中间点、下个拐点。当前点指:当前点做阶梯拐点,如图2.255;中间点指:当前为中间点做拐点,如图2.256;下个拐点:下个点做拐点,如图2.257。 * ### 面积堆积:设置折线图是否是面积堆积样式;(关闭面积堆积开关,效果图图如图2.258,打开面积堆积开关,效果图如图2.259) * ### 线条宽度:设置线条的宽度;(图2.25标记1) ![](https://img.kancloud.cn/c8/67/c867a7e3a0a5533282a2baac502c026b_789x313.png) ![](https://img.kancloud.cn/41/93/4193f5e3fc51b194e0577dfbe44c958c_802x45.png) ![](https://img.kancloud.cn/3f/c6/3fc6ccd463be599dffbe899a8538a4b3_996x307.png) ![](https://img.kancloud.cn/a4/a0/a4a0e858b3e881b6311446fd6d17d3ec_997x297.png) ![](https://img.kancloud.cn/ed/2a/ed2aaa8a0029610d3a759e5d03cf7a5e_973x274.png) ![](https://img.kancloud.cn/3d/00/3d0070cf20f9505fbe65a0a5125b42ec_977x354.png) ## **五、标题设置** ### 选中该折线图组件,在操作界面右侧的“标题设置”处可修改折线图组件的标题样式,如图2.26。 * ### 标题开关:该开关控制标题的显示与隐藏; * ### 标题:标题显示的内容; * ### 字体颜色:标题的颜色; * ### 字体粗细:标题字体的粗细; * ### 字体大小:标题字体大小; * ### 字体位置:标题的位置,分为:居中、左对齐、右对齐; * ### 副标题:副标题内容; * ### 字体颜色:副标题字体颜色; * ### 字体粗细:副标题字体的粗细; * ### 字体大小:副标题字体大小; ![](https://img.kancloud.cn/a9/5d/a95d7038be779a0e8d1ff2be6a4200dd_1042x640.png) ![](https://img.kancloud.cn/92/4a/924a02de951fd40bd3a01bfd2662ee7f_799x42.png) ## **六、X轴设置** ### 选中该折线图组件,在操作界面右侧的“X轴设置”处可修改折线图组件的X轴样式,如图2.27。 * ### 名称:X轴的名称; * ### 显示:X轴是否显示; * ### 显示网格:网格是否显示;(打开显示网格线开关,效果图如图2.271) * ### 轴线颜色:网格线颜色设置; * ### 标签间距:每个类型之间的距离; * ### 文字角度:X轴文字的旋转角度;(调整文字角度,效果图如图2.272) * ### 轴反转:折线图顺序左右调转; * ### 字号:X轴字体大小; ![](https://img.kancloud.cn/ad/9f/ad9f2da9d769935484e6cdc19715a04d_1226x512.png) ![](https://img.kancloud.cn/1f/97/1f978539abecca375e19d8d12daab8a6_803x41.png) ![](https://img.kancloud.cn/61/1d/611d891335eee12e8df0c2ed70b495cb_948x312.png) ## **七、Y轴设置** ### 选中该折线图组件,在操作界面右侧的“Y轴设置”处可修改折线图组件的Y轴样式,如图2.28。 * ### 名称:Y轴的名称; * ### 显示:Y轴是否显示; * ### 轴网格线:网格是否显示; * ### 轴线颜色:网格线颜色设置; * ### 轴反转:折线图顺序上下调转; * ### 字号:Y轴字体大小; ![](https://img.kancloud.cn/71/a3/71a3285d030ad3a9ede51c76d1630826_1221x676.png) ![](https://img.kancloud.cn/eb/7b/eb7b6ee73c4ddda1ec66b68ccb9c1fdb_803x45.png) ## **八、字体设置** ### 选中该折线图,在操作界面右侧的“字体设置”处可修改折线图组件上文字的样式,如图2.29。 **备注:上边“折线设置 ->标记点”开关一定打开** * ### 显示:数值文字是否显示; * ### 字体大小:文字的大小; * ### 字体颜色:文字的颜色; * ### 字体粗细:文字的粗细; ![](https://img.kancloud.cn/07/a5/07a555b1e429214cd3ad5a18a00047c1_1226x707.png) ![](https://img.kancloud.cn/76/42/7642c47c355cdb5443dedd56c1344e49_801x46.png) ## **九、提示语设置** ### 选中该折线图组件,在操作界面右侧的“提示语设置”处可修改折线图组件的提示语,如图2.291;效果图如图2.292; * ### 字体大小:提示语的字体大小; * ### 字体颜色:提示语的字体颜色; ![](https://img.kancloud.cn/07/fb/07fbc08151ab258d4f245103c6e7f76c_1241x715.png) ![](https://img.kancloud.cn/ad/08/ad08e93eb91221e70c224b515c951f37_799x39.png) ![](https://img.kancloud.cn/bb/54/bb54bf5053f6ea16962334d6a27bbe59_787x362.png) ![](https://img.kancloud.cn/6c/f8/6cf844efc17716febfde628cca5ea2e6_799x43.png) ## **十、坐标轴边距设置** ### 选中该折线图组件,在操作界面右侧的“坐标轴边距设置”处可修改折线图距离左、右、上、下的距离,如图2.293。 * ### 左边距(像素):折线图距离左边的距离; * ### 顶边距(像素):折线图距离顶部的距离; * ### 右边距(像素):折线图距离右边的距离; * ### 底边距(像素):折线图距离底部的距离; ![](https://img.kancloud.cn/60/50/6050b5a82d4bd5391e559935e0a72e23_1222x512.png) ![](https://img.kancloud.cn/69/a4/69a46e4550efba0905bdf27d1468c4f6_799x39.png) ## **十一、图例设置** ### 选中该折线图组件,在操作界面右侧的“图例设置”处可设置图例的样式,如图2.294;效果图如图2.295。 * ### 图例开关:是否显示图例; * ### 字体颜色:图例的字体颜色。如果要想自定义图例的颜色,需要关闭系统配色(图2.2951)和删除所有自定义配色(图2.2952)中的颜色。 * ### 图例宽度:图例的宽度; * ### 横向位置:图例的位置,分为:居中、左对齐、右对齐,如图2.2953; * ### 纵向位置:图例的位置,分为:顶部、底部,如图2.2954; * ### 布局朝向:图例的排列顺序,分为:横排和竖排,如图2.2955; * ### 字体大小:图例的字体大小; ![](https://img.kancloud.cn/dd/64/dd64966ad2d507274f36b9dfdc48d304_1021x435.png) ![](https://img.kancloud.cn/ad/aa/adaa9ecfa236928b923274ec84c1fcd1_800x42.png) ![](https://img.kancloud.cn/13/d5/13d587aa5d62210806b04cc7f971cd9b_819x334.png) ![](https://img.kancloud.cn/d7/16/d7168f78b60e0e9b44bf1805c154f0c7_802x42.png) ![](https://img.kancloud.cn/b5/22/b5220bfa342099cb79f8e6b09a59855e_926x362.png) ![](https://img.kancloud.cn/a3/07/a30759158db7a9a476ce9e917e19be9a_792x43.png) ![](https://img.kancloud.cn/dd/d1/ddd1434d4a94cf4343369558739506f0_878x382.png) ![](https://img.kancloud.cn/2d/21/2d219db7ea9eba9a661a734637ab44db_789x37.png) ![](https://img.kancloud.cn/c2/ef/c2efe489aaba03349e0f48562920f7c7_998x277.png) ![](https://img.kancloud.cn/d7/43/d743d4b01bbf76e2c995c99b705bb67e_798x38.png) ![](https://img.kancloud.cn/20/a2/20a21bc9a41d5aa965b05def47fbc2e6_972x370.png) ![](https://img.kancloud.cn/ca/02/ca022ad74e17b3f5b7c0da0bf65ea427_804x43.png) ![](https://img.kancloud.cn/b3/80/b3807e84830f5742d8dfc7031f8686b2_979x350.png) ![](https://img.kancloud.cn/1f/db/1fdb7df84dacab1d82d5c314552a477f_798x41.png) ## **十二、自定义配色设置** ### 选中该折线图组件,在操作界面右侧的“自定义配色设置”处可配置上边不能设置的内容,如图2.296。 * ### 文字颜色:X、Y轴字体的颜色; * ### 轴线颜色:X、Y轴轴线颜色; * ### 配色:折线的颜色,如果开启了“系统配色”,需要先把系统配色先关掉,这样自定义的颜色才起作用; ![](https://img.kancloud.cn/3f/a5/3fa56a5c104332e0a086efeee97a4772_1259x659.png) ![](https://img.kancloud.cn/61/bb/61bb593b464f3fdc14f6384a4aef3464_799x42.png)