123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <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>
|