图表示例

区域图基本用法 - 图1

标准数据格式

  1. Area: {
  2.     categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
  3.     series: [{
  4.         name: '成交量A',
  5.         data: [100, 80, 95, 150, 112, 132],
  6.         color: '#facc14'
  7.     }, {
  8.         name: '成交量B',
  9.         data: [70, 40, 65, 100, 44, 68],
  10.         color: '#2fc25b'
  11.     }, {
  12.         name: '成交量C',
  13.         data: [35, 20, 25, 37, 4, 20],
  14.         color: '#1890ff'
  15.     }]
  16. }

调用方法

  1. canvaArea=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'area',
  5.     fontSize:11,
  6.     legend:true,
  7.     dataLabel:false,
  8.     dataPointShape:true,
  9.     background:'#FFFFFF',
  10.     pixelRatio:_self.pixelRatio,
  11.     categories: chartData.categories,
  12.     series: chartData.series,
  13.     animation: true,
  14.     xAxis: {
  15.         type:'grid',
  16.         gridColor:'#CCCCCC',
  17.         gridType:'dash',
  18.         dashLength:8
  19.     },
  20.     yAxis: {
  21.         gridType:'dash',
  22.         gridColor:'#CCCCCC',
  23.         dashLength:8,
  24.         splitNumber:5,
  25.         min:10,
  26.         max:180,
  27.     },
  28.     width: _self.cWidth*_self.pixelRatio,
  29.     height: _self.cHeight*_self.pixelRatio,
  30.     extra: {
  31.         area:{
  32.             type: 'straight',
  33.             opacity:0.2,
  34.             addLine:true,
  35.             width:2
  36.         }
  37.     }
  38. });

完整代码示例

  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="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaArea=null;
  17.     export default {
  18.         data() {
  19.             return {
  20.                 cWidth:'',
  21.                 cHeight:'',
  22.                 pixelRatio:1,
  23.             }
  24.         },
  25.         onLoad() {
  26.             _self = this;
  27.             this.cWidth=uni.upx2px(750);
  28.             this.cHeight=uni.upx2px(500);
  29.             this.getServerData();
  30.         },
  31.         methods: {
  32.             getServerData(){
  33.                 uni.request({
  34.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  35.                     data:{
  36.                     },
  37.                     success: function(res) {
  38.                         console.log(res.data.data)
  39.                         let Area={categories:[],series:[]};
  40.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  41.                         Area.categories=res.data.data.Area.categories;
  42.                         Area.series=res.data.data.Area.series;
  43.                         _self.showArea("canvasArea",Area);
  44.                     },
  45.                     fail: () => {
  46.                         _self.tips="网络错误，小程序端请检查合法域名";
  47.                     },
  48.                 });
  49.             },
  50.             showArea(canvasId,chartData){
  51.                 canvaArea=new uCharts({
  52.                     $this:_self,
  53.                     canvasId: canvasId,
  54.                     type: 'area',
  55.                     fontSize:11,
  56.                     legend:true,
  57.                     dataLabel:false,
  58.                     dataPointShape:true,
  59.                     background:'#FFFFFF',
  60.                     pixelRatio:_self.pixelRatio,
  61.                     categories: chartData.categories,
  62.                     series: chartData.series,
  63.                     animation: true,
  64.                     xAxis: {
  65.                         type:'grid',
  66.                         gridColor:'#CCCCCC',
  67.                         gridType:'dash',
  68.                         dashLength:8
  69.                     },
  70.                     yAxis: {
  71.                         gridType:'dash',
  72.                         gridColor:'#CCCCCC',
  73.                         dashLength:8,
  74.                         splitNumber:5,
  75.                         min:10,
  76.                         max:180,
  77.                     },
  78.                     width: _self.cWidth*_self.pixelRatio,
  79.                     height: _self.cHeight*_self.pixelRatio,
  80.                     extra: {
  81.                         area:{
  82.                             type: 'straight',
  83.                             opacity:0.2,
  84.                             addLine:true,
  85.                             width:2
  86.                         }
  87.                     }
  88.                 });
  90.             },
  91.             touchArea(e) {
  92.                 canvaArea.showToolTip(e, {
  93.                     format: function (item, category) {
  94.                         return category + ' ' + item.name + ':' + item.data 
  95.                     }
  96.                 });
  97.             }
  98.         }
  99.     }
  100. </script>
  102. <style>
  103.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  104.     .qiun-charts {
  105.         width: 750upx;
  106.         height: 500upx;
  107.         background-color: #FFFFFF;
  108.     }
  110.     .charts {
  111.         width: 750upx;
  112.         height: 500upx;
  113.         background-color: #FFFFFF;
  114.     }
  115. </style>