I found a lot of things on the Internet that are not very clear. I will directly show the code here, so that I can use it in the future.
The following two tags + js can be realized by introducing a js file. The js file is available in my resources for everyone to download .
<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA" @touchend="moveLineA"></canvas>
import uCharts from '../../u-charts.js'; //引入js文件
var _self; //用于全局使用this
var canvaLineA = null; //uCharts实例
var date = new Date();
export default {
data() {
return {
show: false,
mode: 'date',
ite: "", //日期
cWidth: 300,
cHeight: 400, //画布的宽高
data: {
//数据
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
series: [{
name: "日期",
data: [50000, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0]
}]
}
}
},
onLoad() {
try {
var value = uni.getStorageSync('key')
this.ide = value
} catch (e) {
}
//获取当前时间
this.ite = new Date().toISOString().slice(0, 10)
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(400); //设置宽高
_self = this //声明this
_self.showLineA("canvasLineA", _self.data); //触发执行函数
},
methods: {
change(e) {
this.ite = e.result
},
showLineA(canvasId, chartData) {
canvaLineA = new uCharts({
//这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
$this: _self, //指针
canvasId: canvasId, //id
type: 'line', //类型
colors: ['#facc14'], //每一条的颜色
fontSize: 11, //字体大小
padding: [15, 15, 0, 15], //空白区域值
legend: {
//图例相关配置
show: true,
padding: 5,
lineHeight: 11,
margin: 0,
},
dataLabel: false, //显示数据标签内容值
categories: chartData.categories, //数据类别
series: chartData.series, //数据列表
xAxis: {
//X轴配置
gridColor: '#CCCCCC', //X轴网格颜色
gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
dashLength: 8, //X轴网格为虚线时，单段虚线长度
},
yAxis: {
//y轴配置
gridType: 'dash',
gridColor: '#CCCCCC',
dashLength: 8,
},
width: _self.cWidth, //canvas宽度，单位为px
height: _self.cHeight, //canvas高度，单位为px
extra: {
//扩展配置
line: {
type: 'curve' //曲线 curve曲线，straight直线
}
}
});
},
moveLineA(e) {
canvaLineA.showToolTip(e, {
//详情框
format: function(item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
}
}
}