https://github.com/xiaolin3303/wx-charts 下载wxcahrts.js文件 引入到utils下
wxml部分
<view class="chart-container">
<canvas style="width:100%; height: 100%;" bindtouchstart="touchcanvas" canvas-id="yueEle" disable-scroll='true'></canvas>
</view>
wxss部分
.chart-container {
width: 100%;
height: 200px;
/* background-color: rgb(151, 112, 112); */
}
js部分
data:{
zhehArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
'15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
'28', '29', '30', '31'],
zhezArr: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5,
8, 2, 4, 9, 8, 7],
yuelineChart: null,
} ,
onLoad: function () {
var that = this;
that.setList();
//监听屏幕旋转
wx.onWindowResize(function (res) {
that.drawChart()
});
},
// 图表
drawChart: function () {
var windowWidth = 320;
var windowHeight = 200;
const that = this;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
// windowHeight =250;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
that.yuelineChart = new wxCharts({
canvasId: 'yueEle',
type: 'line',
categories: that.data.zhehArr, //categories X轴
animation: true,
series: [{
name: '数据',
data: that.data.zhezArr,
format: function (val, name) {
return val + '';
},
},
],
xAxis: {
disableGrid: true
},
yAxis: {
title: '数值',
format: function (val) {
return val;
},
min: 0
},
width: windowWidth,
height: windowHeight,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve',
},
});
},
// canvas点击
touchcanvas:function(e){
console.log(e);
const that = this;
that.yuelineChart.showToolTip(e, {
format: function (item, category) {
console.log(item,category);
return category + ' ' + item.name + ':' + item.data
}
});
},