|
@@ -1,120 +0,0 @@
|
|
-<template>
|
|
|
|
- <view class="qiun-columns">
|
|
|
|
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
|
|
|
|
- <view class="qiun-title-dot-light">基本柱状图</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="qiun-charts" style="background-color: #E5FDC3;">
|
|
|
|
- <!--#ifdef MP-ALIPAY -->
|
|
|
|
- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #E5FDC3;" :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'}"></canvas>
|
|
|
|
- <!--#endif-->
|
|
|
|
- <!--#ifndef MP-ALIPAY -->
|
|
|
|
- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #E5FDC3;"></canvas>
|
|
|
|
- <!--#endif-->
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- import { mapState, mapActions, mapMutations } from 'vuex';
|
|
|
|
- import uCharts from '@/components/u-charts/u-charts.js';
|
|
|
|
- var _self;
|
|
|
|
- var canvaColumn=null;
|
|
|
|
- /*下面是服务器返回的数据格式*/
|
|
|
|
-
|
|
|
|
- /* var Data={
|
|
|
|
- Column:{categories:['2012', '2013', '2014', '2015', '2016', '2017'],
|
|
|
|
- series:[
|
|
|
|
- {
|
|
|
|
- name: '成交量1',
|
|
|
|
- data:[15, {value:20,color:'#f04864'},45, 37, 43, 34],
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '成交量2',
|
|
|
|
- data:[30, {value:40,color:'#facc14'}, 25, 14, 34, 18],
|
|
|
|
- }]}
|
|
|
|
- } */
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- cWidth:'',
|
|
|
|
- cHeight:'',
|
|
|
|
- pixelRatio:1,
|
|
|
|
- serverData:'',
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapState(['loginUser']),
|
|
|
|
- ...mapState('chart',['column']),
|
|
|
|
- },
|
|
|
|
- onLoad() {
|
|
|
|
- console.log(this.loginUser)
|
|
|
|
-
|
|
|
|
- _self = this;
|
|
|
|
- this.cWidth=uni.upx2px(750);
|
|
|
|
- this.cHeight=uni.upx2px(500);
|
|
|
|
- // this.showColumn("canvasColumn",Data.Column);
|
|
|
|
- this.getProductSaleMonth(this.loginUser['id'])
|
|
|
|
- .then(_ => [uni.stopPullDownRefresh(),this.showColumn("canvasColumn",this.column)], _ => void uni.stopPullDownRefresh());
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- ...mapActions('chart', ['getProductSaleMonth']),
|
|
|
|
- showColumn(canvasId,chartData){
|
|
|
|
- canvaColumn=new uCharts({
|
|
|
|
- $this:_self,
|
|
|
|
- canvasId: canvasId,
|
|
|
|
- enableScroll:true,
|
|
|
|
- type: 'column',
|
|
|
|
- legend:true,
|
|
|
|
- fontSize:11,
|
|
|
|
- background:'#E5FDC3',
|
|
|
|
- pixelRatio:_self.pixelRatio,
|
|
|
|
- animation: true,
|
|
|
|
- categories: chartData.categories,
|
|
|
|
- series: chartData.series,
|
|
|
|
- xAxis: {
|
|
|
|
- scrollShow:true,
|
|
|
|
- itemCount:8,
|
|
|
|
- disableGrid:true,
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- //disabled:true
|
|
|
|
- },
|
|
|
|
- dataLabel: true,
|
|
|
|
- width: _self.cWidth*_self.pixelRatio,
|
|
|
|
- height: _self.cHeight*_self.pixelRatio,
|
|
|
|
- extra: {
|
|
|
|
- column: {
|
|
|
|
- // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
|
|
|
|
- width:30
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- touchColumn(e){
|
|
|
|
- canvaColumn.showToolTip(e, {
|
|
|
|
- format: function (item, category) {
|
|
|
|
- if(typeof item.data === 'object'){
|
|
|
|
- return category + ' ' + item.name + ':' + item.data.value
|
|
|
|
- }else{
|
|
|
|
- return category + ' ' + item.name + ':' + item.data
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style>
|
|
|
|
-page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
|
|
|
|
-.qiun-padding{padding:2%; width:96%;}
|
|
|
|
-.qiun-wrap{display:flex; flex-wrap:wrap;}
|
|
|
|
-.qiun-rows{display:flex; flex-direction:row !important;}
|
|
|
|
-.qiun-columns{display:flex; flex-direction:column !important;}
|
|
|
|
-.qiun-common-mt{margin-top:10upx;}
|
|
|
|
-.qiun-bg-white{background:#FFFFFF;}
|
|
|
|
-.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
|
|
|
|
-.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
|
|
|
|
-.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
|
|
|
|
-.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
|
|
|
|
-</style>
|
|
|