图表示例

仪表盘基本用法 - 图1

标准数据格式

  1. Gauge: {
  2.     categories: [{
  3.         value: 0.2,
  4.         color: '#2fc25b'
  5.     }, {
  6.         value: 0.8,
  7.         color: '#f04864'
  8.     }， {
  9.         value: 1,
  10.         color: '#1890ff'
  11.     }],
  12.     series: [{
  13.         name: '完成率',
  14.         data: 0.85
  15.     }]
  16. }

调用方法

  1. canvaGauge = new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'gauge',
  5.     fontSize:11,
  6.     legend:false,
  7.     title: {
  8.         name: Math.round(chartData.series[0].data*100)+'%',
  9.         color: chartData.categories[1].color,
  10.         fontSize: 25*_self.pixelRatio,
  11.         offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
  12.     },
  13.     subtitle: {
  14.         name: chartData.series[0].name,
  15.         color: '#666666',
  16.         fontSize: 15*_self.pixelRatio,
  17.         offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
  18.     },
  19.     extra: {
  20.         gauge:{
  21.             type:'default',
  22.             width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
  23.             startAngle:0.75,
  24.             endAngle:0.25,
  25.             startNumber:0,
  26.             endNumber:100,
  27.             splitLine:{
  28.                 fixRadius:0,
  29.                 splitNumber:10,
  30.                 width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
  31.                 color:'#FFFFFF',
  32.                 childNumber:5,
  33.                 childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
  34.             },
  35.             pointer:{
  36.                 width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
  37.                 color:'auto'
  38.             }
  39.         }
  40.     },
  41.     background:'#FFFFFF',
  42.     pixelRatio:_self.pixelRatio,
  43.     categories: chartData.categories,
  44.     series: chartData.series,
  45.     animation: true,
  46.     width: _self.cWidth*_self.pixelRatio,
  47.     height: _self.cHeight*_self.pixelRatio,
  48.     dataLabel: true,
  49. });

完整代码示例

  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="canvasGauge" id="canvasGauge" class="charts"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaGauge=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 Gauge={categories:[],series:[]};
  40.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  41.                         Gauge.categories=res.data.data.Gauge.categories;
  42.                         Gauge.series=res.data.data.Gauge.series;
  43.                         _self.showGauge("canvasGauge",Gauge);
  44.                     },
  45.                     fail: () => {
  46.                         _self.tips="网络错误，小程序端请检查合法域名";
  47.                     },
  48.                 });
  49.             },
  50.             showGauge(canvasId,chartData){
  51.                 canvaGauge = new uCharts({
  52.                     $this:_self,
  53.                     canvasId: canvasId,
  54.                     type: 'gauge',
  55.                     fontSize:11,
  56.                     legend:false,
  57.                     title: {
  58.                         name: Math.round(chartData.series[0].data*100)+'%',
  59.                         color: chartData.categories[1].color,
  60.                         fontSize: 25*_self.pixelRatio,
  61.                         offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
  62.                     },
  63.                     subtitle: {
  64.                         name: chartData.series[0].name,
  65.                         color: '#666666',
  66.                         fontSize: 15*_self.pixelRatio,
  67.                         offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
  68.                     },
  69.                     extra: {
  70.                         gauge:{
  71.                             type:'default',
  72.                             width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
  73.                             startAngle:0.75,
  74.                             endAngle:0.25,
  75.                             startNumber:0,
  76.                             endNumber:100,
  77.                             splitLine:{
  78.                                 fixRadius:0,
  79.                                 splitNumber:10,
  80.                                 width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
  81.                                 color:'#FFFFFF',
  82.                                 childNumber:5,
  83.                                 childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
  84.                             },
  85.                             pointer:{
  86.                                 width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
  87.                                 color:'auto'
  88.                             }
  89.                         }
  90.                     },
  91.                     background:'#FFFFFF',
  92.                     pixelRatio:_self.pixelRatio,
  93.                     categories: chartData.categories,
  94.                     series: chartData.series,
  95.                     animation: true,
  96.                     width: _self.cWidth*_self.pixelRatio,
  97.                     height: _self.cHeight*_self.pixelRatio,
  98.                     dataLabel: true,
  99.                 });
  100.             }
  101.         }
  102.     }
  103. </script>
  105. <style>
  106.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  107.     .qiun-charts {
  108.         width: 750upx;
  109.         height: 500upx;
  110.         background-color: #FFFFFF;
  111.     }
  113.     .charts {
  114.         width: 750upx;
  115.         height: 500upx;
  116.         background-color: #FFFFFF;
  117.     }
  118. </style>