🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 象形图组件就是添加象形图的组件。点击“![](https://img.kancloud.cn/7e/94/7e943cbae6d2a0148ea1b1fe46f2a6ca_31x31.png)”图标,再点击“象形图”,即可创建新的图像,如图2.51; ![](https://img.kancloud.cn/1f/5d/1f5dd5daf2679fb9801818f5114db926_945x480.png) ![](https://img.kancloud.cn/3c/a2/3ca2aa96f1d7416ba97126a4d74111f3_804x38.png) ## **一、组件名称设置** ### 选中象形图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图2.52。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/df/26/df26693cbb7e2a9a251094641a01004c_1080x558.png) ![](https://img.kancloud.cn/1a/5b/1a5b91d97129226684c430b4de712512_800x39.png) ## **二、图标** ### 选中该象形组件,在操作界面右侧,输入图片地址,即可自定义设置象形图图标,如图2.53。 ![](https://img.kancloud.cn/f4/32/f432b62d874ded97622881450c26f66c_1094x548.png) ![](https://img.kancloud.cn/57/9a/579a265c73ff4305fa27b0d92ac282d2_801x42.png) ## **三、图标字号** ### 选中该象形图组件,在操作界面右侧,选择图标字号,可设置图标的大小,如图2.54。 ![](https://img.kancloud.cn/77/05/77053525de19e5219f9734adebd24c8e_1088x556.png) ![](https://img.kancloud.cn/9a/2e/9a2ec79a5cd134378802adaa0ad7f3c9_792x37.png) ## **四、字体设置** ### 包含设置“字体大小、字体颜色”,如图2.55。 ![](https://img.kancloud.cn/84/d3/84d3d7e213e9ca6f2ea7800a15dafff4_1005x421.png) ![](https://img.kancloud.cn/e5/dd/e5ddcb1cf2f26f698ad4a1538a7c874d_798x32.png) ## **五、轴字体颜色** ### 选中该象形图组件,在操作界面右侧,选择轴字体颜色,可设置轴文字的颜色(即Y轴文字的颜色),如图2.56。 ![](https://img.kancloud.cn/9b/36/9b363555fbc66706248932694fed7ea3_1102x451.png) ![](https://img.kancloud.cn/92/31/9231af9171262af5d7cb8c80adb8f165_802x39.png) ## **六、间距** ### 选中该象形图组件,在操作界面右侧,调整“间距”大小,可修改组件Y轴之间的间距,如图2.57。 ![](https://img.kancloud.cn/95/1d/951d65e8e6f1d47b804c19cb56cdf18c_1105x456.png) ![](https://img.kancloud.cn/56/92/56920f24239a50244a7aa197cfe3362c_792x35.png) ## **七、Y轴设置** ### 选中该象形图组件,在操作界面右侧的“Y轴设置”处可设置Y轴的样式,如图2.58。 * ### 显示:是否显示Y轴字体; * ### 字号:Y轴字体的大小; ![](https://img.kancloud.cn/0a/47/0a47be3176ba4f4b2626b4042261fb05_1106x618.png) ![](https://img.kancloud.cn/3d/9a/3d9a0c7c681faffa26f362703b3040aa_801x38.png) ## **八、坐标轴边距设置** ### 选中该象形图组件,在操作界面右侧的“坐标轴边距设置”处可配置距离左、右、上、下的距离,如图2.59。 * ### 左边距(像素):柱形图距离左边的距离; * ### 顶边距(像素):柱形图距离顶部的距离; * ### 右边距(像素):柱形图距离右边的距离; * ### 底边距(像素):柱形图距离底部的距离; ![](https://img.kancloud.cn/00/64/006453b6adf098187fc70dfc8816f792_1096x414.png) ![](https://img.kancloud.cn/52/db/52db2baabc8e2dcb08fcbbeda481e291_801x36.png) ## **九、接口设置** ### 选中该象形图组件,在操作界面右侧,点击“![](https://img.kancloud.cn/a1/72/a1724479138ebec7f559bac976af851d_349x38.png)”,可设置接口,如图2.591。 ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 * ### name:为标签名称; * ### value:为标签值; ### (1)静态数据,接口地址传过来的内容要符合以下格式: ~~~ [ { "name": "苹果", "value": 1000879 }, { "name": "三星", "value": 3400879 }, { "name": "小米", "value": 2300879 }, { "name": "oppo", "value": 5400879 }, { "name": "大疆", "value": 3000 }, { "name": "抖音", "value": 2000 } ] ~~~ ### (2)动态数据,接口地址传过来的内容要符合以下格式: ~~~ {"data":[{"name":"苹果","value":1000879},{"name":"三星","value":3400879},{"name":"小米","value":2300879},{"name":"oppo","value":5400879},{"name":"大疆","value":3000}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/d6/8d/d68d3fcde12939ad5566af080c98be6d_694x1352.png)