图表示例

堆叠柱状图 - 图1

标准数据格式

  1. "ColumnStack": {
  2.   "categories": ["2013", "2014", "2015", "2016", "2017", "2018"],
  3.   "series": [{
  4.     "name": "类别一",
  5.     "data": [35, 36, 31, 33, 13, 34]
  6.   }, {
  7.     "name": "类别二",
  8.     "data": [18, 27, 21, 24, 6, 28]
  9.   }, {
  10.     "name": "类别三",
  11.     "data": [18, 27, 21, 24, 6, 28]
  12.   }]
  13. }

调用方法

  1. canvaColumn=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'column',
  5.     legend:true,
  6.     fontSize:11,
  7.     background:'#FFFFFF',
  8.     pixelRatio:_self.pixelRatio,
  9.     animation: true,
  10.     categories: chartData.categories,
  11.     series: chartData.series,
  12.     xAxis: {
  13.         disableGrid:true,
  14.     },
  15.     yAxis: {
  16.         //disabled:true
  17.     },
  18.     dataLabel: true,
  19.     width: _self.cWidth*_self.pixelRatio,
  20.     height: _self.cHeight*_self.pixelRatio,
  21.     extra: {
  22.         column: {
  23.             type:'stack',
  24.             width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
  25.         }
  26.       }
  27. });

完整代码示例

  1. <template>
  2.     <view class="qiun-columns">
  3.         <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
  4.             <view class="qiun-title-dot-light">堆叠柱状图</view>
  5.         </view>
  6.         <view class="qiun-charts" >
  7.             <canvas canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts"  @touchstart="touchColumn"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaColumn=null;
  17.     export default {
  18.         data() {
  19.             return {
  20.                 cWidth:'',
  21.                 cHeight:'',
  22.                 pixelRatio:1,
  23.                 serverData:'',
  24.             }
  25.         },
  26.         onLoad() {
  27.             _self = this;
  28.             this.cWidth=uni.upx2px(750);
  29.             this.cHeight=uni.upx2px(500);
  30.             this.getServerData();
  31.         },
  32.         methods: {
  33.             getServerData(){
  34.                 uni.request({
  35.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  36.                     data:{
  37.                     },
  38.                     success: function(res) {
  39.                         console.log(res.data.data)
  40.                         //下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
  41.                         _self.serverData=res.data.data;
  42.                         let ColumnStack={categories:[],series:[]};
  43.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  44.                         ColumnStack.categories=res.data.data.ColumnStack.categories;
  45.                         ColumnStack.series=res.data.data.ColumnStack.series;
  46.                         _self.showColumnStack("canvasColumnStack",ColumnStack);
  47.                     },
  48.                     fail: () => {
  49.                         _self.tips="网络错误，小程序端请检查合法域名";
  50.                     },
  51.                 });
  52.             },
  53.             showColumnStack(canvasId,chartData){
  54.                 canvaColumn=new uCharts({
  55.                     $this:_self,
  56.                     canvasId: canvasId,
  57.                     type: 'column',
  58.                     legend:true,
  59.                     fontSize:11,
  60.                     background:'#FFFFFF',
  61.                     pixelRatio:_self.pixelRatio,
  62.                     animation: true,
  63.                     categories: chartData.categories,
  64.                     series: chartData.series,
  65.                     xAxis: {
  66.                         disableGrid:true,
  67.                     },
  68.                     yAxis: {
  69.                         //disabled:true
  70.                     },
  71.                     dataLabel: true,
  72.                     width: _self.cWidth*_self.pixelRatio,
  73.                     height: _self.cHeight*_self.pixelRatio,
  74.                     extra: {
  75.                         column: {
  76.                             type:'stack',
  77.                             width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
  78.                         }
  79.                       }
  80.                 });
  82.             },
  83.             touchColumn(e){
  84.                 canvaColumn.showToolTip(e, {
  85.                     format: function (item, category) {
  86.                         return category + ' ' + item.name + ':' + item.data 
  87.                     }
  88.                 });
  89.             },
  90.         }
  91.     }
  92. </script>
  94. <style>
  95. page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
  96. .qiun-padding{padding:2%; width:96%;}
  97. .qiun-wrap{display:flex; flex-wrap:wrap;}
  98. .qiun-rows{display:flex; flex-direction:row !important;}
  99. .qiun-columns{display:flex; flex-direction:column !important;}
  100. .qiun-common-mt{margin-top:10upx;}
  101. .qiun-bg-white{background:#FFFFFF;}
  102. .qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
  103. .qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
  104. .qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  105. .charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  106. </style>