<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> // +---------------------------------------------------------------------- // | CRMEB [ CRMEB赋能开发者,助力企业发展 ] // +---------------------------------------------------------------------- // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved. // +---------------------------------------------------------------------- // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 // +---------------------------------------------------------------------- // | Author: CRMEB Team <admin@crmeb.com> // +---------------------------------------------------------------------- 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>