低代码高性能原生UI框架快速上手
本节将介绍如何在项目中使用 UxChart，请认真阅读本章节
请使用最新HBuilderX版本
平台兼容性
| Android uni-app-x | iOS uni-app-x | web | 小程序 |
|---|---|---|---|
| √ | x | x | x |
介绍
UxChart 是基于F2图表开发的一个图表组件库，提供一个统一的图表开发接口，方便开发者快速开发UNI-APP-X图表
F2 是什么?
F2 是一个基于Canvas2D的图表库，提供一个统一的图表开发接口，方便开发者快速开发图表。
为了更好得使用 UxChart 进行数据可视化，我们需要了解 F2 图表的组成以及相关术语
| 术语 | 类型 | 说明 |
|---|---|---|
| 坐标轴 | Axis | 每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）以及网格线（grid）组成 |
| 图例 | Legend | 图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表以及帮助用户在图表中进行数据的筛选过滤 |
| 几何标记 | Geometry | 即我们所说的点、线、面这些几何图形，在图形语法 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属性 |
| 图形属性 | Attribute | 图形属性对应视觉编码中的视觉通道，是图形语法元素非常重要和灵活的一部分，不同的几何标记拥有自己的图形属性，F2 提供了位置（position）、颜色（color）、大小（size）、形状（shape）这四种图形属性 |
| 坐标系 | Coordinate | 坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面 |
| 提示信息 | Tooltip | 当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等，帮助用户从图表中获取具体的数据信息 |
| 辅助标记 | Guide | 当需要在图表上绘制一些辅助线、辅助框或者文本时，比如增加预警线、最高值线或者标示明显的范围区域时，辅助标记 Guide 是非常有用的工具 |
UxChart 组件
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | UXChart | - | 图表配置数据 |
| showLoading | Boolean | true | 显示加载中 |
| loadingText | String | '加载中...' | 加载中文案 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| message | 回调消息事件 | WebViewMessageEvent |
| loading | 加载中事件 | WebViewLoadingEvent |
| loaded | 加载完成事件 | WebViewLoadedEvent |
| error | 加载失败事件 | WebViewErrorEvent |
TIP
js函数用 `` 包裹成函数字符串，框架会自动解析成js函数
js
onShow: `function (ev) {
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}`onShow: `function (ev) {
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}`示例代码
html
<template>
<ux-page :colors="['white']">
<ux-navbar title="Chart" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template><template>
<ux-page :colors="['white']">
<ux-navbar title="Chart" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template>ts
<script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
sales: {
tickCount: 5
}
}
},
geom: {
interval: [{
position: 'year*sales',
}]
},
axis: [{
field: 'year'
}],
tooltip: {
showItemMarker: false,
onShow: `function (ev) {
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}`
},
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
year: '1951 年',
sales: 38
}, {
year: '1952 年',
sales: 52
}, {
year: '1956 年',
sales: 61
}, {
year: '1957 年',
sales: 145
}, {
year: '1958 年',
sales: 48
}, {
year: '1959 年',
sales: 38
}, {
year: '1960 年',
sales: 38
}, {
year: '1962 年',
sales: 38
}] as UTSJSONObject[]
},
}
}
</script><script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
sales: {
tickCount: 5
}
}
},
geom: {
interval: [{
position: 'year*sales',
}]
},
axis: [{
field: 'year'
}],
tooltip: {
showItemMarker: false,
onShow: `function (ev) {
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}`
},
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
year: '1951 年',
sales: 38
}, {
year: '1952 年',
sales: 52
}, {
year: '1956 年',
sales: 61
}, {
year: '1957 年',
sales: 145
}, {
year: '1958 年',
sales: 48
}, {
year: '1959 年',
sales: 38
}, {
year: '1960 年',
sales: 38
}, {
year: '1962 年',
sales: 38
}] as UTSJSONObject[]
},
}
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>