前段时间做了一个柱状统计图的图表，根据客户的要求，数据多的时候，统计图既能来回的拖动观看数据，又能提示数据信息，我网上查了好久，貌似也没有找到一个能满足条件的，就当我要放弃的时候，发现了一个插件，这个插件满足了我的所有需求。

wxml:

wxss:
.qiun-charts {
width: 750rpx;
height: 500rpx;
background-color: #FFFFFF;
}
.charts {
width: 750rpx;
height: 500rpx;
background-color: #FFFFFF;
}

js:
import uCharts from ‘…/ucharts/u-charts.js’;
var _self;
var canvaColumn = null;
var canvaLineA = null;
var canvaCandle = null;
var series;
Page({
data: {
cWidth: ‘’,
cHeight: ‘’,
},
onLoad: function () {
var cWidth = wx.getSystemInfoSync().windowWidth;
var cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
canvaColumn = new uCharts({
canvasId: ‘canvasColumn’,
type: ‘column’,
fontSize: 11,
title: ‘’,
legend: false,
animation: true,
enableScroll: true,//开启图表拖拽功能
categories: ["", “”, “”, “”, “”, “”, ‘’, ‘’],
series: series = [{
name: ‘新成交量’,
data: [35, 48, 97, 75, 78, 36, 79, 45]
}],
xAxis: {
disableGrid: false,
type: ‘grid’,
gridType: ‘dash’,
itemCount: 4,
scrollShow: true,
scrollAlign: ‘left’,
},
yAxis: {
format: function (val) {
return val;
},
title: ‘’,
min: 0,
max: 100
},
width: cWidth,
height: cHeight,
extra: {
column: {
type: ‘group’,
width: ‘15’
}
}
});
},
touchColumn(e) {
canvaColumn.scrollStart(e);
},
moveColumn(e) {
canvaColumn.scroll(e);
},
touchEndColumn(e) {
canvaColumn.scrollEnd(e);
//下面是toolTip事件，如果滚动后不需要显示，可不填写
canvaColumn.showToolTip(e, {
format: function (item, category) {
console.log(canvaColumn.getCurrentDataIndex(e));
var index = canvaColumn.getCurrentDataIndex(e)
console.log(item)
console.log(category)
var data = [‘新百’, ‘中国’, ‘解放广场’, ‘谈固’, ‘北宋’, ‘博物院’]
return category + ’ ’ + data[index] + ‘:’ + item.data
}
});
},
})

js里面用到了ucharts/u-charts.js，原谅我不会放js文件

大家可以去官网看看http://doc.ucharts.cn/1073940