前端 图表的插件库 有很多
echarts 跟 uCharts …
echarts 更适合应用于后台管理系统 或者pc 端
当小程序使用echarts 并且引用echarts 他会提示一段话 然后报错
小程序“文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理,手机端使用过大的js库影响性能。”问题处理
所以 我就换了uCharts
现在记录一下自己的uCharts 在小程序中使用
uCharts链接 https://www.ucharts.cn
下载uCharts https://gitee.com/uCharts/uCharts
找到微信小程序
复制 js 文件
在小程序components 文件夹下面 建立 u-charts文件夹 把你刚刚复制的js文件粘贴进来
页面使用
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" bindtouchstart="touchColumn"></canvas>
那个文件需要 就在那个文件的js 中引用
import uCharts from '../../components/u-charts/u-charts.min'
import uCharts from '../../components/u-charts/u-charts.min'
var _self;
var canvaColumn = null;
Page({
/**
* 页面的初始数据
*/
data: {
cWidth: '',
cHeight: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
_self=this;
this.cWidth = wx.getSystemInfoSync().windowWidth;
this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
this.getServerData()
},
// 这里 先暂时 应用 ucharts 里面提供的数据 调取他们的接口
getServerData: function () {
wx.request({
url: 'https://www.ucharts.cn/data.json',
data: {
},
success: function (res) {
let Column = { categories: [], series: [] };
Column.categories = res.data.data.ColumnB.categories;
Column.series = res.data.data.ColumnB.series;
//自定义标签颜色和字体大小
Column.series[1].textColor = 'red';
Column.series[1].textSize = 11;
_self.showColumn("canvasColumn", Column);
},
fail: () => {
console.log("请点击右上角【详情】,启用不校验合法域名");
},
})
},
showColumn(canvasId, chartData) {
canvaColumn = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'line',
legend: true,
fontSize: 11,
background: '#FFFFFF',
pixelRatio: 1,
animation: true,
categories: chartData.categories,
series: chartData.series,
xAxis: {
disableGrid: true,
},
yAxis: {
//disabled:true
},
dataLabel: true,
width: _self.cWidth ,
height: _self.cHeight ,
extra: {
column: {
type: 'group',
width: _self.cWidth * 0.45 / chartData.categories.length
}
}
});
}
})
css 也一定要写上 不然图表出不来
/**index.wxss**/
.qiun-charts {
width: 750rpx;
height: 500rpx;
background-color: #FFFFFF;
}
.charts {
width: 750rpx;
height: 500rpx;
background-color: #FFFFFF;
}