1# chart 2 3 4图表组件，用于呈现线形图、柱状图、量规图界面。 5 6> **说明：** 7> 8> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 子组件 11 12不支持。 13 14 15## 属性 16 17除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 18 19| 名称 | 类型 | 默认值 | 必填 | 描述 | 20| ----------------- | ---------------------------------- | ------ | ---- | ------------------------------------------------------------ | 21| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>- bar：柱状图。<br/>- line：线形图。<br/>- gauge：量规图。<br/>- progress：进度类圆形图表。<br/>- loading：加载类圆形图表。<br/>- rainbow：占比类圆形图表。 | 22| options | ChartOptions | - | 否 | 图表参数设置，用于设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改）,量规图不生效。 | 23| datasets | Array\<ChartDataset> | - | 否 | 数据集合，用于设置多条数据集及其背景色，量规图不生效。 | 24| segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，Array\<DataSegment>针对占比类图标使用，DataSegment最多9个。 | 25| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | 26| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | 27 28 **表1** ChartOptions 29 30| 名称 | 类型 | 默认值 | 必填 | 描述 | 31| ------ | --------- | ---- | ---- | ---------------------------------------- | 32| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | 33| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | 34| series | ChartAxis | - | 否 | 数据序列参数设置，仅线形图支持。可以设置：<br>- 线的样式，如线宽、是否平滑。<br>- 线最前端位置白点的样式和大小。 | 35 36 **表2** ChartDataset 37 38| 名称 | 类型 | 默认值 | 必填 | 描述 | 39| ----------- | ---------------------------------------- | -------- | ---- | -------------------- | 40| strokeColor | <color> | \#ff6384 | 否 | 线条颜色，仅线形图支持。 | 41| fillColor | <color> | \#ff6384 | 否 | 填充颜色，线形图表示填充的渐变颜色。 | 42| data | Array<number> \| Array\<Point> | - | 是 | 设置绘制线或柱中的点集。 | 43| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色，仅线形图支持。 | 44 45 **表3** ChartAxis 46 47| 名称 | 类型 | 默认值 | 必填 | 描述 | 48| -------- | ------------- | -------- | ---- | ---------------------------------------- | 49| min | number | 0 | 否 | 轴的最小值，不支持负数，仅线形图支持。 | 50| max | number | 100 | 否 | 轴的最大值，不支持负数，仅线形图支持。 | 51| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | 52| display | boolean | false | 否 | 是否显示轴。 | 53| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | 54 55 **表4** ChartSeries 56 57| 名称 | 类型 | 默认值 | 必填 | 描述 | 58| ----------- | -------------- | ---- | ---- | -------------------- | 59| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | 60| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | 61| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | 62| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | 63| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | 64 65 **表5** ChartLineStyle 66 67| 名称 | 类型 | 默认值 | 必填 | 描述 | 68| ------ | -------------- | ----- | ---- | ----- | 69| width | <length> | 1px | 否 | 线宽设置。 | 70| smooth | boolean | false | 否 | 是否平滑。 | 71 72 **表6** PointStyle 73 74| 名称 | 类型 | 默认值 | 必填 | 描述 | 75| ----------- | -------------- | -------- | ---- | ---------------------------------------- | 76| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>- circle：圆形。<br/>- square：方形。<br/>- triangle：三角形。 | 77| size | <length> | 5px | 否 | 高亮点的大小。 | 78| strokeWidth | <length> | 1px | 否 | 边框宽度。 | 79| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | 80| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | 81 82 **表7** ChartLoop 83 84| 名称 | 类型 | 默认值 | 必填 | 描述 | 85| -------- | -------------- | ----- | ---- | ---------------------------------------- | 86| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。<br>margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | 87| gradient | boolean | false | 否 | 是否需要渐变擦除。 | 88 89 **表8** Point 90 91| 名称 | 类型 | 默认值 | 必填 | 描述 | 92| ------------ | ------------- | -------- | ---- | ---------------------------------------- | 93| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | 94| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | 95| description | string | - | 否 | 表示当前点的注释内容。 | 96| textLocation | string | - | 否 | 可选值为：<br>- "top"：注释的绘制位置位于点的上方。<br>- "bottom"：注释的绘制位置位于点的下方。<br>- "none"：不绘制。 | 97| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | 98| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。<br>- "dashed， 5， 5"：表示纯虚线，绘制5px的实线后留5px的空白。<br>- “solid”：表示绘制实线。 | 99| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | 100 101 **表9** DataSegment 102 103| 名称 | 类型 | 默认值 | 必填 | 描述 | 104| ---------- | ------ | ---- | ---- | ---------------------------------------- | 105| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | 106| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 | 107| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | 108| name | string | - | 否 | 此类数据的名称。 | 109 110| 数据组 | 主题 | 深色主题 | 111| ---- | --------------------------- | --------------------------- | 112| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | 113| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | 114| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | 115| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | 116| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | 117| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | 118| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | 119| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | 120| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | 121 122当类型为量规图时，还支持如下属性： 123 124| 名称 | 类型 | 默认值 | 必填 | 描述 | 125| ------- | ------ | ---- | ---- | ---------------------- | 126| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | 127 128 129## 样式 130 131除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 132 133| 名称 | 类型 | 默认值 | 必填 | 描述 | 134| ------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | 135| stroke-width | <length> | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | 136| start-angle | <deg> | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | 137| total-angle | <deg> | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | 138| center-x | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-y和radius一起配置才能生效。 | 139| center-y | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式，仅量规图支持。<br>该样式需要和center-x和radius一起配置才能生效。 | 140| radius | <length> | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式，仅量规图支持。<br>该样式需要和center-x和center-y一起配置才能生效。 | 141| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色，仅量规图支持。<br/>如：colors: \#ff0000, \#00ff00。 | 142| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重，仅量规图支持。<br/>如：weights: 2, 2。 | 143| font-family | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](js-service-widget-common-customizing-font.md)。 | 144| font-size | <length> | - | 否 | 表示绘制注释的字体的大小。 | 145 146 147## 事件 148 149支持[通用事件](js-service-widget-common-events.md)。 150 151 152## 示例 153 1541. 线形图 155 156 ```html 157 <!-- xxx.hml --> 158 <div class="container"> 159 <stack class="chart-region"> 160 <image class="chart-background" src="common/background.png"></image> 161 <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> 162 </stack> 163 </div> 164 ``` 165 166 167 ```css 168 /* xxx.css */ 169 .container { 170 flex-direction: column; 171 justify-content: center; 172 align-items: center; 173 } 174 .chart-region { 175 height: 400px; 176 width: 700px; 177 } 178 .chart-background { 179 object-fit: fill; 180 } 181 .chart-data { 182 width: 700px; 183 height: 600px; 184 } 185 ``` 186 187 188 ```json 189 // xxx.json 190 { 191 "data": { 192 "lineData": [ 193 { 194 "strokeColor": "#0081ff", 195 "fillColor": "#cce5ff", 196 "data": [ 197 763, 198 550, 199 551, 200 554, 201 731, 202 654, 203 525, 204 696, 205 595, 206 628, 207 791, 208 505, 209 613, 210 575, 211 475, 212 553, 213 491, 214 680, 215 657, 216 716 217 ], 218 "gradient": true 219 } 220 ], 221 "lineOps": { 222 "xAxis": { 223 "min": 0, 224 "max": 20, 225 "display": false 226 }, 227 "yAxis": { 228 "min": 0, 229 "max": 1000, 230 "display": false 231 }, 232 "series": { 233 "lineStyle": { 234 "width": "5px", 235 "smooth": true 236 }, 237 "headPoint": { 238 "shape": "circle", 239 "size": 20, 240 "strokeWidth": 5, 241 "fillColor": "#ffffff", 242 "strokeColor": "#007aff", 243 "display": true 244 }, 245 "loop": { 246 "margin": 2, 247 "gradient": true 248 } 249 } 250 } 251 } 252 } 253 ``` 254 **4*4卡片** 255 256 257 2582. 柱状图 259 260 ```html 261 <!-- xxx.hml --> 262 <div class="container"> 263 <stack class="data-region"> 264 <image class="data-background" src="common/background.png"></image> 265 <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart> 266 </stack> 267 </div> 268 ``` 269 270 271 ```css 272 /* xxx.css */ 273 .container { 274 flex-direction: column; 275 justify-content: center; 276 align-items: center; 277 } 278 .data-region { 279 height: 400px; 280 width: 700px; 281 } 282 .data-background { 283 object-fit: fill; 284 } 285 .data-bar { 286 width: 700px; 287 height: 400px; 288 } 289 ``` 290 291 292 ```json 293 { 294 "data": { 295 "barData": [ 296 { 297 "fillColor": "#f07826", 298 "data": [763, 550, 551, 554, 731, 654, 525, 696, 595, 628] 299 }, 300 { 301 "fillColor": "#cce5ff", 302 "data": [535, 776, 615, 444, 694, 785, 677, 609, 562, 410] 303 }, 304 { 305 "fillColor": "#ff88bb", 306 "data": [673, 500, 574, 483, 702, 583, 437, 506, 693, 657] 307 } 308 ], 309 "barOps": { 310 "xAxis": { 311 "min": 0, 312 "max": 20, 313 "display": false, 314 "axisTick": 10 315 }, 316 "yAxis": { 317 "min": 0, 318 "max": 1000, 319 "display": false 320 } 321 } 322 } 323 } 324 ``` 325 **4*4卡片** 326 327 328 3293. 量规图 330 331 332 ```html 333 <!-- xxx.hml --> 334 <div class="container"> 335 <div class="gauge-region"> 336 <chart class="data-gauge" type="gauge" percent = "50"></chart> 337 </div> 338 </div> 339 ``` 340 341 342 ```css 343 /* xxx.css */ 344 .container { 345 flex-direction: column; 346 justify-content: center; 347 align-items: center; 348 } 349 .gauge-region { 350 height: 400px; 351 width: 400px; 352 } 353 .data-gauge { 354 colors: #83f115, #fd3636, #3bf8ff; 355 weights: 4, 2, 1; 356 } 357 ``` 358 **4*4卡片** 359 360 361
