372 lines
7.3 KiB
Vue
372 lines
7.3 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'}"
|
||
@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error">
|
||
</canvas>
|
||
</template>
|
||
|
||
<script>
|
||
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: 375,
|
||
},
|
||
cHeight: {
|
||
default: 250,
|
||
},
|
||
pixelRatio: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
legends: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
colors: [
|
||
"#5181F6",
|
||
"#00DBB6",
|
||
"#F67F51",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69"
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.$nextTick(() => {
|
||
// this.init();
|
||
// })
|
||
|
||
},
|
||
watch: {
|
||
opts: {
|
||
handler(newVal, oldVal) {
|
||
// // 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();
|
||
})
|
||
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
initColumnChart() {
|
||
var xData = this.opts.categories
|
||
for (var i = 0; i < xData.length; i++) {
|
||
if (xData[i].length > 5) {
|
||
xData[i] = xData[i].substring(0, 5) + '...'
|
||
}
|
||
|
||
}
|
||
canvases[this.canvasId] = new uCharts({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
type: 'column',
|
||
legend: {
|
||
show: false
|
||
},
|
||
colors: this.colors,
|
||
fontSize: 11,
|
||
background: '#FFFFFF',
|
||
pixelRatio: this.pixelRatio,
|
||
animation: true,
|
||
categories: xData,
|
||
series: this.opts.series,
|
||
enableScroll: true,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 6,
|
||
labelCount: this.opts.categories.length,
|
||
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: 14
|
||
}
|
||
},
|
||
scales: {
|
||
xAxis: [{
|
||
stacked: true,
|
||
ticks: {
|
||
fontColor: 'red' // X轴样式
|
||
}
|
||
}],
|
||
}
|
||
});
|
||
},
|
||
initLineChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
type: 'line',
|
||
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,
|
||
xAxis: {
|
||
type: 'grid',
|
||
axisLine: false,
|
||
gridColor: '#fff',
|
||
gridType: 'dash',
|
||
dashLength: 8,
|
||
itemCount: 4,
|
||
scrollShow: true
|
||
},
|
||
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({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
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({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
type: 'ring',
|
||
fontSize: 11,
|
||
title: this.opts.title,
|
||
legend: {
|
||
show: legend
|
||
},
|
||
extra: {
|
||
pie: {
|
||
ringWidth: 12,
|
||
offsetAngle: -90,
|
||
activeRadius: radius,
|
||
},
|
||
tooltip: {
|
||
showBox: false,
|
||
}
|
||
},
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
background: '#FFFFFF',
|
||
series: this.opts.series,
|
||
dataLabel: dataLabel,
|
||
});
|
||
},
|
||
|
||
|
||
|
||
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
|
||
changeData(cid, newdata) {
|
||
console.log('updateData', newdata)
|
||
console.log(canvases[cid])
|
||
if (!canvases[cid]) return;
|
||
var xData = newdata.categories
|
||
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> |