605 lines
15 KiB
Vue
605 lines
15 KiB
Vue
<template>
|
||
<canvas
|
||
v-if="canvasId"
|
||
:id="canvasId"
|
||
:canvasId="canvasId"
|
||
:style="{
|
||
width: cWidth * pixelRatio + 'px',
|
||
height: cHeight * pixelRatio + 'px',
|
||
transform: 'scale(' + 1 / pixelRatio + ')',
|
||
'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
|
||
'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
||
}"
|
||
:ontouch="true"
|
||
@touchstart="touchStart"
|
||
@touchmove="touchMove"
|
||
@touchend="touchEnd"
|
||
@error="error"
|
||
>
|
||
</canvas>
|
||
</template>
|
||
|
||
<script>
|
||
// import { min } from "moment";
|
||
import uCharts from "./u-charts.js";
|
||
var canvases = {};
|
||
|
||
export default {
|
||
props: {
|
||
chartType: {
|
||
required: true,
|
||
type: String,
|
||
default: "column",
|
||
},
|
||
opts: {
|
||
required: true,
|
||
type: Object,
|
||
default() {
|
||
return null;
|
||
},
|
||
},
|
||
canvasId: {
|
||
type: String,
|
||
default: "u-canvas",
|
||
},
|
||
cWidth: {
|
||
default: uni.upx2px(375),
|
||
},
|
||
cHeight: {
|
||
default: uni.upx2px(250),
|
||
},
|
||
pixelRatio: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
legends: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
colors: [
|
||
"#5181F6",
|
||
"#00DBB6",
|
||
"#F67F51",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69",
|
||
],
|
||
_opts: {}
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.$nextTick(() => {
|
||
// this.init();
|
||
// })
|
||
},
|
||
watch: {
|
||
_opts: {
|
||
handler(newVal, oldVal) {
|
||
// console.log("发生改变了123", newVal)
|
||
this.init();
|
||
this.changeData(this.canvasId, newVal);
|
||
},
|
||
// deep: true,
|
||
// immediate: true,
|
||
},
|
||
opts: {
|
||
handler(newVal, oldVal) {
|
||
// console.log("发生改变了", newVal)
|
||
this._opts = newVal;
|
||
// // this.init();
|
||
// // console.log('canvases')
|
||
// console.log(canvases)
|
||
// if (canvases = {}) {
|
||
// // this.$nextTick(() => {
|
||
// // this.init();
|
||
// // })
|
||
// setTimeout(()=>{
|
||
// this.init();
|
||
// this.changeData(this.canvasId, newVal);
|
||
// },600)
|
||
|
||
// } else {
|
||
|
||
// }
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
init() {
|
||
console.log("图表初始化");
|
||
switch (this.chartType) {
|
||
case "column":
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化1");
|
||
this.initColumnChart();
|
||
});
|
||
break;
|
||
case "line":
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化2");
|
||
this.initLineChart();
|
||
});
|
||
break;
|
||
case "arcbar": //半圆
|
||
console.log("图表初始化3");
|
||
setTimeout(() => {
|
||
this.initArcbarChart();
|
||
}, 1200);
|
||
break;
|
||
case "ring": //圆环
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化4");
|
||
this.initRingChart();
|
||
});
|
||
case "columnar": //柱状图
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化5");
|
||
this.initColumnarChart();
|
||
});
|
||
break;
|
||
case "pie": //圆环
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化6");
|
||
this.initPieChart();
|
||
});
|
||
break;
|
||
case "mix": //混合图
|
||
this.$nextTick(() => {
|
||
console.log("图表初始化7");
|
||
this.initMixChart();
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
initColumnChart() {
|
||
// console.log(3333, structuredClone(this._opts.series[0]))
|
||
// .data.sort((a, b) => { a - b})[0] + 20
|
||
console.log(2222222, uni.upx2px(11));
|
||
canvases[this.canvasId] = new uCharts({
|
||
// $this: this,
|
||
// canvasId: this.canvasId,
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
type: "column",
|
||
legend: {
|
||
show: false,
|
||
},
|
||
padding: [uni.upx2px(30), 0, uni.upx2px(20), uni.upx2px(20)],
|
||
colors: this.colors,
|
||
fontSize: uni.upx2px(22),
|
||
background: "#FFFFFF",
|
||
pixelRatio: this.pixelRatio,
|
||
// animation: true,
|
||
categories: this._opts.categories,
|
||
series: this._opts.series,
|
||
enableScroll: true,
|
||
textDataTitle: this._opts.textDataTitle ? this._opts.textDataTitle : '',
|
||
textLabelX: this._opts.textDataX ? true : false,
|
||
textDataX: this._opts.textDataX,
|
||
animation: false,
|
||
update: true,
|
||
duration: 0,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 4,
|
||
labelCount: this._opts.categories.length,
|
||
fontSize: uni.upx2px(22),
|
||
lineHeight: uni.upx2px(40),
|
||
scrollShow: true,
|
||
// rotateLabel: true,
|
||
},
|
||
yAxis: {
|
||
format: (val) => {
|
||
if ((val + "").indexOf(".") != -1) {
|
||
return val.toFixed(0); //保留小数后1位
|
||
} else {
|
||
return val;
|
||
}
|
||
},
|
||
// data:{
|
||
|
||
// }
|
||
// axisLine:false
|
||
//disabled:true
|
||
},
|
||
dataLabel: true,
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: uni.upx2px(28),
|
||
},
|
||
},
|
||
scales: {
|
||
xAxis: [
|
||
{
|
||
stacked: true,
|
||
ticks: {
|
||
fontColor: "red", // X轴样式
|
||
},
|
||
},
|
||
],
|
||
},
|
||
});
|
||
},
|
||
initLineChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
type: "line",
|
||
fontSize: uni.upx2px(22),
|
||
legend: {
|
||
show: this.legends,
|
||
},
|
||
dataLabel: false,
|
||
dataPointShape: true,
|
||
colors: this.colors,
|
||
background: "#FFFFFF",
|
||
pixelRatio: this.pixelRatio,
|
||
categories: this._opts.categories,
|
||
series: this._opts.series,
|
||
animation: true,
|
||
enableScroll: true,
|
||
xAxis: {
|
||
type: "grid",
|
||
axisLine: false,
|
||
gridColor: "#fff",
|
||
gridType: "dash",
|
||
dashLength: 8,
|
||
itemCount: 4,
|
||
scrollShow: true,
|
||
fontSize: uni.upx2px(22),
|
||
},
|
||
yAxis: {
|
||
axisLine: false,
|
||
// gridType: 'dash',
|
||
gridColor: "rgba(42, 43, 91, 0.1)",
|
||
// dashLength: 8,
|
||
// splitNumber: 5,
|
||
min: 0,
|
||
// max: 180,
|
||
// format: (val) => {
|
||
// return val.toFixed(0) + '元'
|
||
// }
|
||
},
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
line: {
|
||
type: "curve",
|
||
},
|
||
},
|
||
});
|
||
},
|
||
|
||
//半圆
|
||
initArcbarChart() {
|
||
let winWidth = 0;
|
||
uni.getSystemInfo({
|
||
success: function (res) {
|
||
winWidth = res.windowWidth / 2 - 10;
|
||
},
|
||
});
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
|
||
type: "arcbar",
|
||
fontSize: 11,
|
||
legend: {
|
||
show: false,
|
||
},
|
||
background: "#FFFFFF",
|
||
pixelRatio: 1,
|
||
series: this._opts.series,
|
||
animation: true,
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
dataLabel: true,
|
||
subtitle: {
|
||
name: this._opts.series[0].name,
|
||
color: "#000",
|
||
fontSize: 25,
|
||
offsetY: -12,
|
||
},
|
||
extra: {
|
||
arcbar: {
|
||
type: "default",
|
||
width: 12,
|
||
startAngle: 1,
|
||
endAngle: 0,
|
||
gap: 5,
|
||
radius: 90,
|
||
center: {
|
||
y: 100,
|
||
x: winWidth,
|
||
},
|
||
},
|
||
},
|
||
});
|
||
},
|
||
|
||
//圆环
|
||
initRingChart() {
|
||
console.log("this.canvasId", this.canvasId);
|
||
|
||
var dataLabel = false,
|
||
legend = false;
|
||
var radius = 0;
|
||
if (this.canvasId == "integritySafety") {
|
||
dataLabel = legend = true;
|
||
}
|
||
if (this.canvasId == "qualityPieChart") {
|
||
radius = 30;
|
||
}
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
|
||
type: "ring",
|
||
fontSize: uni.upx2px(22),
|
||
title: this._opts.title,
|
||
legend: {
|
||
show: legend,
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: uni.upx2px(24),
|
||
offsetAngle: -90,
|
||
activeRadius: radius,
|
||
},
|
||
tooltip: {
|
||
showBox: false,
|
||
},
|
||
},
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
background: "#FFFFFF",
|
||
series: this._opts.series,
|
||
dataLabel: dataLabel,
|
||
});
|
||
},
|
||
// 饼图
|
||
initPieChart() {
|
||
console.log("我是饼图", this.canvasId);
|
||
// return
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
type: "pie",
|
||
fontSize: uni.upx2px(26),
|
||
title: this._opts.title,
|
||
legend: {
|
||
show: this.legends,
|
||
position: "right",
|
||
lineHeight: uni.upx2px(60),
|
||
fontSize: uni.upx2px(26),
|
||
lineHeight: uni.upx2px(44),
|
||
itemGap: uni.upx2px(20),
|
||
padding: uni.upx2px(10),
|
||
margin: uni.upx2px(10),
|
||
},
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: uni.upx2px(1),
|
||
activeRadius: uni.upx2px(20),
|
||
offsetAngle: 0,
|
||
lableWidth: uni.upx2px(30),
|
||
border: true,
|
||
borderWidth: uni.upx2px(6),
|
||
borderColor: "#FFFFFF",
|
||
linearType: "custom",
|
||
},
|
||
tooltip: {
|
||
showBox: true,
|
||
dashLength: uni.upx2px(8),
|
||
boxPadding: uni.upx2px(6),
|
||
fontSize: uni.upx2px(26),
|
||
lineHeight: uni.upx2px(40),
|
||
},
|
||
markLine: {
|
||
dashLength: uni.upx2px(8),
|
||
}
|
||
},
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
background: "#FFFFFF",
|
||
series: this._opts.series,
|
||
dataLabel: true,
|
||
});
|
||
},
|
||
// 条状图
|
||
initColumnarChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
type: "bar",
|
||
fontSize: 11,
|
||
legend: {
|
||
show: this.legends,
|
||
},
|
||
dataLabel: false,
|
||
dataPointShape: true,
|
||
colors: this.colors,
|
||
background: "#FFFFFF",
|
||
pixelRatio: this.pixelRatio,
|
||
categories: this._opts.categories,
|
||
series: this._opts.series,
|
||
animation: true,
|
||
enableScroll: true,
|
||
textLabelX: this._opts.textDataX ? true : false,
|
||
textDataX: this._opts.textDataX,
|
||
xAxis: {
|
||
// min: 0,
|
||
// boundaryGap: "justify",
|
||
disableGrid: true,
|
||
// type: "grid",
|
||
axisLine: false,
|
||
gridColor: "#fff",
|
||
gridType: "dash",
|
||
dashLength: 8,
|
||
},
|
||
yAxis: {
|
||
// itemCount: 4,
|
||
// scrollShow: true,
|
||
// scrollShow: true,
|
||
// itemCount: 4,
|
||
// axisLine: false,
|
||
// // gridType: 'dash',
|
||
// gridColor: "rgba(42, 43, 91, 0.1)",
|
||
// // dashLength: 8,
|
||
// // splitNumber: 5,
|
||
// min: 0,
|
||
// max: 180,
|
||
// format: (val) => {
|
||
// return val.toFixed(0) + '元'
|
||
// }
|
||
},
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
bar: {
|
||
type: "group",
|
||
width: 30,
|
||
meterBorde: 1,
|
||
meterFillColor: "#FFFFFF",
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
categoryGap: 2,
|
||
},
|
||
tooltip: {
|
||
formatter: function (item, category, seriesName, dataIndex) {
|
||
console.log(66666, item, category, seriesName, dataIndex);
|
||
return `${seriesName} ${category}:${dataIndex}`;
|
||
},
|
||
},
|
||
},
|
||
});
|
||
},
|
||
// 混合图
|
||
initMixChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
context: uni.createCanvasContext(this.canvasId, this),
|
||
type: "mix",
|
||
fontSize: uni.upx2px(22),
|
||
legend: {
|
||
show: this.legends,
|
||
},
|
||
dataLabel: false,
|
||
dataPointShape: true,
|
||
colors: this.colors,
|
||
background: "#FFFFFF",
|
||
pixelRatio: this.pixelRatio,
|
||
categories: this._opts.categories,
|
||
series: this._opts.series,
|
||
enableScroll: true,
|
||
animation: false,
|
||
update: true,
|
||
legend: {
|
||
itemGap: uni.upx2px(10),
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
// type: "grid",
|
||
axisLine: false,
|
||
gridColor: "#fff",
|
||
gridType: "dash",
|
||
dashLength: 7,
|
||
itemCount: 6,
|
||
fontSize: uni.upx2px(23),
|
||
lineHeight: uni.upx2px(40),
|
||
// scrollShow: true,
|
||
},
|
||
yAxis: {
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridType: "dash",
|
||
dashLength: uni.upx2px(8),
|
||
gridColor: "#CCCCCC",
|
||
padding: uni.upx2px(20),
|
||
showTitle: true,
|
||
data: [
|
||
{
|
||
position: "left",
|
||
title: "累计",
|
||
titleFontSize: uni.upx2px(26),
|
||
titleOffsetY: uni.upx2px(-5),
|
||
},
|
||
{
|
||
position: "right",
|
||
title: "当期",
|
||
textAlign: "left",
|
||
titleFontSize: uni.upx2px(26),
|
||
titleOffsetY: uni.upx2px(-5),
|
||
},
|
||
],
|
||
},
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
mix: {
|
||
column: {
|
||
width: uni.upx2px(20),
|
||
},
|
||
line: {
|
||
width: uni.upx2px(4),
|
||
}
|
||
},
|
||
},
|
||
});
|
||
},
|
||
|
||
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
|
||
changeData(cid, newdata) {
|
||
console.log("updateData", newdata);
|
||
console.log(canvases[cid], canvases, cid);
|
||
if (!canvases[cid]) return;
|
||
var xData = newdata.categories;
|
||
if (xData) {
|
||
for (var i = 0; i < xData.length; i++) {
|
||
if (xData[i].length > 5) {
|
||
xData[i] = xData[i].substring(0, 5) + "...";
|
||
}
|
||
}
|
||
}
|
||
|
||
canvases[cid].updateData({
|
||
series: newdata.series,
|
||
categories: xData,
|
||
title: newdata.title,
|
||
});
|
||
},
|
||
touchStart(e) {
|
||
// canvases[this.canvasId].showToolTip(e, {
|
||
// format: function (item, category) {
|
||
// return category + " " + item.name + ":" + item.data;
|
||
// },
|
||
// });
|
||
canvases[this.canvasId].scrollStart(e);
|
||
},
|
||
touchMove(e) {
|
||
canvases[this.canvasId].scroll(e);
|
||
},
|
||
touchEnd(e) {
|
||
canvases[this.canvasId].scrollEnd(e);
|
||
},
|
||
error(e) {
|
||
console.log(e);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.charts {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex: 1;
|
||
background-color: #ffffff;
|
||
}
|
||
</style>
|