图表示例

线图基本用法 - 图1

标准数据格式

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

调用方法

  1. canvaLineA=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'line',
  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.         format:(val)=>{return val.toFixed(0)+'元'}
  28.     },
  29.     width: _self.cWidth*_self.pixelRatio,
  30.     height: _self.cHeight*_self.pixelRatio,
  31.     extra: {
  32.         line:{
  33.             type: 'straight'
  34.         }
  35.     }
  36. });

完整代码示例

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