1

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

pages/share/salesvolume.vue

@@ -132,7 +132,7 @@
 </template>
 
 <script>
-	import uCharts from './cp/u-charts.js';
+	import uCharts from '../school/components/u-charts/u-charts.min.js';
 	import calendar from './cp/fl-calendar.vue'
 
 	var canvaColumn = null;
@@ -232,14 +232,14 @@
 					res => {
 						if (res.resultCode == 1) {
 							this.data = res.data
-							// this.data.DayList = [{Day: "2020-04-10",MySale: 80,ReSale: 70},
-							// 	{Day: "2020-04-11",MySale: 100,ReSale: 40},
-							// 	{Day: "2020-04-12",MySale: 20,ReSale: 30},
-							// 	{Day: "2020-04-13",MySale: 30,ReSale: 120},
-							// 	{Day: "2020-04-14",MySale: 58,ReSale: 67},
-							// 	{Day: "2020-04-15",MySale: 90,ReSale: 100},
-							// 	{Day: "2020-04-16",MySale: 23,ReSale: 400},
-							// ]
+							this.data.DayList = [{Day: "2020-04-10",MySale: 80,ReSale: 70},
+								{Day: "2020-04-11",MySale: 100,ReSale: 40},
+								{Day: "2020-04-12",MySale: 20,ReSale: 30},
+								{Day: "2020-04-13",MySale: 30,ReSale: 120},
+								{Day: "2020-04-14",MySale: 58,ReSale: 67},
+								{Day: "2020-04-15",MySale: 90,ReSale: 100},
+								{Day: "2020-04-16",MySale: 23,ReSale: 400},
+							]
 							
 							let Column = {
 								categories: [],
@@ -248,7 +248,7 @@
 							let MySale={
 								name:'自己销售额',
 								data:[],
-								color: "#7E85EE",
+								color: "#3FE5ED",
 								index: 0,
 								legendShape: "rect",
 								pointShape: "circle",
@@ -259,7 +259,7 @@
 							let ReSale={
 								name:'线下销售额',
 								data:[],
-								color: "#2fc25b",
+								color: "#D86CFB",
 								index: 0,
 								legendShape: "rect",
 								pointShape: "circle",