164 lines
3.4 KiB
Vue
164 lines
3.4 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,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
init() {
|
||
switch (this.chartType) {
|
||
case 'column':
|
||
this.initColumnChart();
|
||
break;
|
||
case 'line':
|
||
this.initLineChart();
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
initColumnChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
type: 'column',
|
||
legend: true,
|
||
fontSize: 11,
|
||
background: '#FFFFFF',
|
||
pixelRatio: this.pixelRatio,
|
||
animation: true,
|
||
categories: this.opts.categories,
|
||
series: this.opts.series,
|
||
enableScroll: true,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 4,
|
||
scrollShow: true
|
||
},
|
||
yAxis: {
|
||
//disabled:true
|
||
},
|
||
dataLabel: true,
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
}
|
||
}
|
||
});
|
||
},
|
||
initLineChart() {
|
||
canvases[this.canvasId] = new uCharts({
|
||
$this: this,
|
||
canvasId: this.canvasId,
|
||
type: 'line',
|
||
fontSize: 11,
|
||
legend: true,
|
||
dataLabel: false,
|
||
dataPointShape: true,
|
||
background: '#FFFFFF',
|
||
pixelRatio: this.pixelRatio,
|
||
categories: this.opts.categories,
|
||
series: this.opts.series,
|
||
animation: true,
|
||
enableScroll: true,
|
||
xAxis: {
|
||
type: 'grid',
|
||
gridColor: '#CCCCCC',
|
||
gridType: 'dash',
|
||
dashLength: 8,
|
||
itemCount: 4,
|
||
scrollShow: true
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
gridColor: '#CCCCCC',
|
||
dashLength: 8,
|
||
splitNumber: 5,
|
||
min: 10,
|
||
max: 180,
|
||
format: (val) => {
|
||
return val.toFixed(0) + '元'
|
||
}
|
||
},
|
||
width: this.cWidth * this.pixelRatio,
|
||
height: this.cHeight * this.pixelRatio,
|
||
extra: {
|
||
line: {
|
||
type: 'straight'
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
|
||
changeData(cid,newdata) {
|
||
canvases[cid].updateData({
|
||
series: newdata.series,
|
||
categories: newdata.categories
|
||
});
|
||
},
|
||
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) {}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.charts {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex: 1;
|
||
background-color: #FFFFFF;
|
||
}
|
||
</style>
|