更新记录
0.1(2025-05-22)
下载此版本
适配h5和app端,使用renderjs实现的echarts图表组件
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用 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
}