<style>
.chart {
margin-top: 20rpx;
padding: 40rpx 0rpx;
height: 634rpx;
background-color: #fff;
box-sizing: border-box;
}
</style>
<template>
<view class="qiun-charts">
<canvas
canvas-id="canvasLineA"
id="canvasLineA"
class="charts"
@touchmove="canvas_line_hc_moveA"
@touchstart="touchLineA"
></canvas>
</view>
</template>
<script>
import uCharts from "@/components/u-charts/u-charts.js";
var canvaLineA = null;
export default {
data(){
return{
cWidth: "",
cHeight: "",
pixelRatio: 1,
}
},
onLoad(options) {
let that = this;
console.log(options);
that.cWidth = uni.upx2px(720);
that.cHeight = uni.upx2px(500);
// 发送请求获取数据
that.getDate1();
},
methods:{
// 参数配置
showLineA(canvasId, chartData) {
let that = this;
// "chart_datachart_datachart_datachart_data", chartData;
// chartData.series.forEach((e) => {
// e.legendShape = "line";
// });
canvaLineA = new uCharts({
$this: that,
canvasId: canvasId,
type: "line",
fontSize: 12,
// padding: [15, 20, 0, 15],
legend: {
show: true,
position: "top",
float: "left",
padding: 10,
// lineHeight: 11,
margin: 0,
fontColor: "#000",
},
dataLabel: false,
dataPointShape: false,
background: "#FFFFFF",
pixelRatio: that.pixelRatio,
// categories: chartData.categories,
series: chartData.series, // 数据渲染
animation: false,
xAxis: {
xOffset: 5,
disabled: false, // 禁用坐标刻度
disableGrid: true, // 禁用网格
calibration: true,
// axisLineColor: "#262626",
boundaryGap: "justify", // 两边对齐
splitNumber: 1, // x坐标显示的数量为1 显示最大和最小值
axisLine: true, // 坐标线
format: (val) => {
return this.format_date_time(val, "str");
// return val.toFixed(0)+'%'
},
// showMaxLable: true, //显示最大值
// showMinLable: true, //显示最小值
// "scrollAlign": "center",
// "axisLineColor": "#CCCCCC", // 坐标颜色
},
yAxis: {
// gridType: "solid",
gridColor: "#EFEFEF",
dashLength: 8,
splitNumber: 5,
labelCount: 2,
// min: -0.6,
// max: 4.65,
format: (val) => {
// return this.format_date_time(val, "str");
return val.toFixed(2) + "%";
// return val.toFixed(2) + (chartData.yCompany || "%");
},
},
width: that.cWidth * that.pixelRatio,
height: that.cHeight * that.pixelRatio,
extra: {
line: {
type: "curve",
addLine: true,
gradient: true,
width: 1,
},
},
});
//下面是默认选中索引
// let cindex = 3;
//下面是自定义文案
// let textList = [
// { text: "我是一个标题", color: null },
// { text: "自定义1：值1", color: "#2fc25b" },
// { text: "自定义2：值2", color: "#facc14" },
// // { text: "自定义3：值3", color: "#f04864" },
// ];
//下面是event的模拟,tooltip的Y坐标值通过这个mp.changedTouches[0].y控制
// let tmpevent = { mp: { changedTouches: [{ x: 0, y: 80 }] } };
// setTimeout(() => {
// canvaLineA.showToolTip(tmpevent, {
// // index: cindex,
// textList: that.textList,
// });
// }, 200);
},
// 点击收益率图表的回调
touchLineA(e) {
let that = this;
// e.index = 2;
// let temp = [];
canvaLineA.showToolTip(e, {
format: function (item, category) {
// console.error(item,item);
// temp.push({
// color: item.color,
// name: item.name,
// date: that.format_date_time(item.data[0]),
// data: parseFloat(item.data[1]).toFixed(2) + "%",
// });
return (
item.name +
":" +
that.format_date_time(item.data[0]) +
"," +
parseFloat(item.data[1]).toFixed(2) +
"%"
);
// return ""; // that.format_date_time(item.data[0]) + item.name + ":" + parseFloat(item.data[1]).toFixed(2) + "%"
},
});
},
// 这个函数根据自己的需求使用
canvas_line_hc_moveA(e) {
let that = this;
basics.debouce(() => {
let temp = [];
canvaLineA.showToolTip(e, {
format: function (item, category) {
//console.log(item);
temp.push({
color: item.color,
name: item.name,
date: that.format_date_time(item.data[0]),
data: parseFloat(item.data[1]).toFixed(2) + "%",
});
return ""; // that.format_date_time(item.data[0]) + item.name + ":" + parseFloat(item.data[1]).toFixed(2) + "%"
},
});
//console.log(temp);
that.can_data_list = temp;
}, 5);
return;
},
// 请求数据
async getDate1(){
let that = this
try{
const res = await getdata()
let line_data = res.data;
that.showLineA("canvasLineA", line_data); // ID,数据
}catch(err){
}
}
}
}
</script>
