更新记录
1.0.1(2024-06-14)
下载此版本
修复示例和文档中的错误问题
1.0.0(2024-06-14)
下载此版本
支持uniapp的vchart图表库上线啦
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
lei-vchart
一款基于vchart封装的图表库,该库默认了最简单的图表,需根据自己的需求进行打包。
示例
<template>
<lei-vchart :spec="spec" :options="options" :events="events" canvasId="chart" @chartinit="chartinit"
@chartready="chartready"></lei-vchart>
</template>
<script setup>
import {
reactive
} from 'vue';
const spec = {
type: 'bar',
data: [{
id: 'barData',
values: [{
type: 'Autocracies',
year: '1930',
value: 129
},
{
type: 'Autocracies',
year: '1940',
value: 133
},
{
type: 'Democracies',
year: '1930',
value: 22
},
{
type: 'Democracies',
year: '1940',
value: 13
},
]
}],
xField: ['year', 'type'],
yField: 'value',
seriesField: 'type',
legends: {
visible: true,
orient: 'top',
position: 'start'
},
axes: [{
orient: 'left',
label: {}
}]
}
const options = {}
const events = []
const chartinit = (e) => {
console.log('chartinit:', e)
}
const chartready = (e) => {
console.log('chartready:', e)
}
</script>
属性说明
属性名 |
类型 |
默认值 |
说明 |
canvasId |
String |
|
必填,图表ID |
options |
Object |
|
初始化配置项 |
spec |
Object |
|
图表配置 |
events |
Array |
|
图表事件回调 |
事件说明
属性名 |
类型 |
说明 |
chartinit |
|
图表库初始化触发事件 |
chartready |
|
图表库渲染后触发事件 |
定制说明:
1,设置定制内容
- 打包格式:
esm
- 是否压缩代码:
否
- 选择环境类型:
微信
2,下载下来后替换掉vchart.js
文件
3,修改vchart.js
文件内容
- 将
wx.getSystemInfoSync
修改 uni.getWindowInfo
- 将
wx.createSelectorQuery
修改 uni.createSelectorQuery