|
|
<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) {
|
|
|
console.log(e)
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.charts {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
flex: 1;
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
</style>
|
