秋云uCharts 高性能跨平台图表库,支持HAPP、小程序、Vue、Taro等更多支持canvas的框架平台
uCharts是一款基于Canvas的高性能图表库,支持H5、APP、小程序和Vue等多个平台。以下是一个使用uCharts在小程序中创建一个简单柱状图的示例代码:
首先,需要在小程序中引入uCharts库。在小程序的project.config.json
文件中配置:
{
"plugins": {
"ucharts": {
"version": "1.x",
"provider": "wx534d6e2795daf446"
}
}
}
然后,在需要使用图表的页面的.json
配置文件中引入:
{
"usingComponents": {
"ucharts": "plugin://ucharts/ucharts"
}
}
接下来,在页面的.wxml
文件中添加图表标签:
<ucharts canvas-id="barCanvas" type="column" opts="{{opts}}" data="{{data}}"></ucharts>
最后,在.js
文件中设置图表的配置和数据:
Page({
data: {
opts: {
// 配置项
legendShow: true,
xAxis: {
// x轴配置
},
yAxis: {
// y轴配置
},
// 其他配置...
},
data: {
// 数据
categories: ['2016', '2017', '2018', '2019', '2020'],
series: [
{
name: '销量',
data: [35, 36, 10, 10, 7]
}
]
}
},
onReady() {
this.barChart = this.selectComponent('#barCanvas');
this.barChart.init((canvas, width, height, dpr) => {
// 初始化图表
this.barChart.setCanvas(canvas);
this.barChart.setChartData(this.data.data, (chart) => {
chart.width = width;
chart.height = height;
chart.canvas2d.dpr = dpr;
chart.render();
});
});
}
});
这段代码创建了一个简单的柱状图,在小程序页面加载完成后,会初始化图表并渲染出来。
评论已关闭