图表示例

横屏模式 - 图1

标准数据格式

  1. "Column": {
  2.   "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
  3.   "series": [{
  4.     "name": "成交量1",
  5.     "data": [15, {"value": 20,"color": "#f04864"}, 45, 37, 43, 34]
  6.   }, {
  7.     "name": "成交量2",
  8.     "data": [30, {"value": 40,"color": "#facc14"}, 25, 14, 34, 18]
  9.   }]
  10. }

调用方法

  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.     rotate:true,
  11.     categories: chartData.categories,
  12.     series: chartData.series,
  13.     xAxis: {
  14.         disableGrid:true,
  15.     },
  16.     yAxis: {
  17.         //disabled:true
  18.     },
  19.     dataLabel: true,
  20.     width: _self.cWidth2*_self.pixelRatio,
  21.     height: _self.cHeight2*_self.pixelRatio,
  22.     extra: {
  23.         column: {
  24.             type:'group',
  25.             width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
  26.             meter:{
  27.                 //这个是外层边框的宽度
  28.                 border:4,
  29.                 //这个是内部填充颜色
  30.                 fillColor:'#E5FDC3'
  31.             }
  32.         }
  33.       }
  34. });

完整代码示例

  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-rotate" >
  7.             <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" @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;
  16.     export default {
  17.         data() {
  18.             return {
  19.                 cWidth2:'',//横屏图表
  20.                 cHeight2:'',//横屏图表
  21.                 pixelRatio:1,
  22.             }
  23.         },
  24.         onLoad() {
  25.             _self = this;
  26.             this.cWidth2=uni.upx2px(700);
  27.             this.cHeight2=uni.upx2px(1100);
  28.             this.getServerData();
  29.         },
  30.         methods: {
  31.             getServerData(){
  32.                 uni.request({
  33.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  34.                     data:{
  35.                     },
  36.                     success: function(res) {
  37.                         console.log(res.data.data)
  38.                         let ColumnColumn={categories:[],series:[]};
  39.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  40.                         ColumnColumn.categories=res.data.data.ColumnB.categories;
  41.                         ColumnColumn.series=res.data.data.ColumnB.series;
  42.                         _self.showColumnColumn("canvasColumn",ColumnColumn);
  43.                     },
  44.                     fail: () => {
  45.                         _self.tips="网络错误，小程序端请检查合法域名";
  46.                     },
  47.                 });
  48.             },
  49.             showColumnColumn(canvasId,chartData){
  50.                 canvaColumn=new uCharts({
  51.                     $this:_self,
  52.                     canvasId: canvasId,
  53.                     type: 'column',
  54.                     legend:true,
  55.                     fontSize:11,
  56.                     background:'#FFFFFF',
  57.                     pixelRatio:_self.pixelRatio,
  58.                     animation: true,
  59.                     rotate:true,
  60.                     // #ifdef MP-ALIPAY || MP-BAIDU
  61.                     rotateLock:true,//百度及支付宝需要锁定旋转
  62.                     // #endif
  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.cWidth2*_self.pixelRatio,
  73.                     height: _self.cHeight2*_self.pixelRatio,
  74.                     extra: {
  75.                         column: {
  76.                             type:'group',
  77.                             width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
  78.                             meter:{
  79.                                 //这个是外层边框的宽度
  80.                                 border:4,
  81.                                 //这个是内部填充颜色
  82.                                 fillColor:'#E5FDC3'
  83.                             }
  84.                         }
  85.                       }
  86.                 });
  88.             },
  89.             touchColumn(e){
  90.                 canvaColumn.showToolTip(e, {
  91.                     format: function (item, category) {
  92.                         return category + ' ' + item.name + ':' + item.data 
  93.                     }
  94.                 });
  95.             }
  96.         }
  97.     }
  98. </script>
  100. <style>
  101.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  102.     .qiun-charts-rotate {
  103.         width: 700upx;
  104.         height: 1100upx;
  105.         background-color: #FFFFFF;
  106.         padding: 25upx;
  107.     }
  109.     .charts-rotate {
  110.         width: 700upx;
  111.         height: 1100upx;
  112.         background-color: #FFFFFF;
  113.     }
  114. </style>