图表示例

基本柱状图 - 图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.     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:'group',
  24.             width: _self.cWidth*_self.pixelRatio*0.45/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="canvasColumn" id="canvasColumn" 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 Column={categories:[],series:[]};
  43.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  44.                         Column.categories=res.data.data.Column.categories;
  45.                         Column.series=res.data.data.Column.series;
  46.                         _self.showColumn("canvasColumn",Column);
  47.                     },
  48.                     fail: () => {
  49.                         _self.tips="网络错误，小程序端请检查合法域名";
  50.                     },
  51.                 });
  52.             },
  53.             showColumn(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:'group',
  77.                             width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  78.                         }
  79.                       }
  80.                 });
  82.             },
  83.             touchColumn(e){
  84.                 canvaColumn.showToolTip(e, {
  85.                     format: function (item, category) {
  86.                         if(typeof item.data === 'object'){
  87.                             return category + ' ' + item.name + ':' + item.data.value 
  88.                         }else{
  89.                             return category + ' ' + item.name + ':' + item.data 
  90.                         }
  91.                     }
  92.                 });
  93.             },
  94.         }
  95.     }
  96. </script>
  98. <style>
  99. page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
  100. .qiun-padding{padding:2%; width:96%;}
  101. .qiun-wrap{display:flex; flex-wrap:wrap;}
  102. .qiun-rows{display:flex; flex-direction:row !important;}
  103. .qiun-columns{display:flex; flex-direction:column !important;}
  104. .qiun-common-mt{margin-top:10upx;}
  105. .qiun-bg-white{background:#FFFFFF;}
  106. .qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
  107. .qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
  108. .qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  109. .charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  110. </style>