更新记录
0.1(2025-05-22)
适配h5和app端,使用renderjs实现的echarts图表组件
平台兼容性
uni-app(4.01)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
- |
√ |
√ |
√ |
√ |
√ |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
× |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(4.01)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
- |
- |
- |
- |
使用 renderjs
加载封装的 echarts
图表
- 引入
echarts
库
- 把插件下载放到components目录下,然后在页面上使用组件
// 引入组件并使用
<jayc-echarts :optionData="option" />
// option为echarts配置项 例如
const option = ref({
title: {
text: 'ECharts 入门示例',
},
tooltip: {},
legend: {
data: ['销量'],
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [],
},
],
})
// 数据变化直接修改option即可 例如:
function changeOption() {
const data = []
for (let i = 0; i < 6; i++) {
data.push(Math.floor(Math.random() * 100))
}
option.value.series[0].data = data
}