You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
3.4 KiB
165 lines
3.4 KiB
<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>
|
|
|