devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序Canvas绘制曲线图饼图柱状图雷达图蛛网图实现（附源码）_小程序 曲线图

作者：Cpp五条 | 2024-05-02 23:01:54

赞

踩

小程序 曲线图

小程序绘制曲线图

在这里插入图片描述

  1. <view class="container">
  2.     <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
  3.     <button type="primary" bindtap="updateData">更新数据</button>
  4. </view>
  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var lineChart = null;
  4. Page({
  5.     data: {
  6.     },
  7.     touchHandler: function (e) {
  8.         console.log(lineChart.getCurrentDataIndex(e));
  9.         lineChart.showToolTip(e, {
  10.             // background: '#7cb5ec'
  11.         });
  12.     },    
  13.     createSimulationData: function () {
  14.         var categories = [];
  15.         var data = [];
  16.         for (var i = 0; i < 10; i++) {
  17.             categories.push('2016-' + (i + 1));
  18.             data.push(Math.random()*(20-10)+10);
  19.         }
  20.         // data[4] = null;
  21.         return {
  22.             categories: categories,
  23.             data: data
  24.         }
  25.     },
  26.     updateData: function () {
  27.         var simulationData = this.createSimulationData();
  28.         var series = [{
  29.             name: '成交量1',
  30.             data: simulationData.data,
  31.             format: function (val, name) {
  32.                 return val.toFixed(2) + '万';
  33.             }
  34.         }];
  35.         lineChart.updateData({
  36.             categories: simulationData.categories,
  37.             series: series
  38.         });
  39.     },
  40.     onLoad: function (e) {
  41.         var windowWidth = 320;
  42.         try {
  43.             var res = wx.getSystemInfoSync();
  44.             windowWidth = res.windowWidth;
  45.         } catch (e) {
  46.             console.error('getSystemInfoSync failed!');
  47.         }
  48.         
  49.         var simulationData = this.createSimulationData();
  50.         lineChart = new wxCharts({
  51.             canvasId: 'lineCanvas',
  52.             type: 'line',
  53.             categories: simulationData.categories,
  54.             animation: true,
  55.             background: '#f5f5f5',
  56.             series: [{
  57.                 name: '成交量1',
  58.                 data: simulationData.data,
  59.                 format: function (val, name) {
  60.                     return val.toFixed(2) + '万';
  61.                 }
  62.             }, {
  63.                 name: '成交量2',
  64.                 data: [11, 24, 29, 15, null, 21, 32, 23, 45, 21],
  65.                 format: function (val, name) {
  66.                     return val.toFixed(2) + '万';
  67.                 }
  68.             }],
  69.             xAxis: {
  70.                 disableGrid: true
  71.             },
  72.             yAxis: {
  73.                 title: '成交金额 (万元)',
  74.                 format: function (val) {
  75.                     return val.toFixed(2);
  76.                 },
  77.                 min: 0
  78.             },
  79.             width: windowWidth,
  80.             height: 200,
  81.             dataLabel: false,
  82.             dataPointShape: true,
  83.             extra: {
  84.                 lineStyle: 'curve'
  85.             }
  86.         });
  87.     }
  88. });

小程序绘制柱状图

在这里插入图片描述

  1. <view class="container">
  2. 	<view class="title">
  3. 		<view wx:if="{{!isMainChartDisplay}}" class="back-btn" bindtap="backToMainChart">返回</view>
  4. 		{{chartTitle}}
  5. 	</view>
  6.     <canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
  7.     <view style="text-align:center">点击数据每一项查看详情</view>
  8. </view>
  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var columnChart = null;
  4. var chartData = {
  5.     main: {
  6.         title: '总成交量',
  7.         data: [15, 20, 45, 37],
  8.         categories: ['2012', '2013', '2014', '2015']
  9.     },
  10.     sub: [{
  11.         title: '2012年度成交量',
  12.         data: [70, 40, 65, 100, 34, 18],
  13.         categories: ['1', '2', '3', '4', '5', '6']
  14.     }, {
  15.         title: '2013年度成交量',
  16.         data: [55, 30, 45, 36, 56, 13],
  17.         categories: ['1', '2', '3', '4', '5', '6']
  18.     }, {
  19.         title: '2014年度成交量',
  20.         data: [76, 45, 32, 74, 54, 35],
  21.         categories: ['1', '2', '3', '4', '5', '6']                
  22.     }, {
  23.         title: '2015年度成交量',
  24.         data: [76, 54, 23, 12, 45, 65],
  25.         categories: ['1', '2', '3', '4', '5', '6']
  26.     }]
  27. };
  28. Page({
  29.     data: {
  30.         chartTitle: '总成交量',
  31.         isMainChartDisplay: true
  32.     },
  33.     backToMainChart: function () {
  34.         this.setData({
  35.             chartTitle: chartData.main.title,
  36.             isMainChartDisplay: true
  37.         });
  38.         columnChart.updateData({
  39.             categories: chartData.main.categories,
  40.             series: [{
  41.                 name: '成交量',
  42.                 data: chartData.main.data,
  43.                 format: function (val, name) {
  44.                     return val.toFixed(2) + '万';
  45.                 }
  46.             }]
  47.         });
  48.     },
  49.     touchHandler: function (e) {
  50.         var index = columnChart.getCurrentDataIndex(e);
  51.         if (index > -1 && index < chartData.sub.length && this.data.isMainChartDisplay) {
  52.             this.setData({
  53.                 chartTitle: chartData.sub[index].title,
  54.                 isMainChartDisplay: false
  55.             });
  56.             columnChart.updateData({
  57.                 categories: chartData.sub[index].categories,
  58.                 series: [{
  59.                     name: '成交量',
  60.                     data: chartData.sub[index].data,
  61.                     format: function (val, name) {
  62.                         return val.toFixed(2) + '万';
  63.                     }
  64.                 }]
  65.             });
  66.  
  67.         }
  68.     },
  69.     onReady: function (e) {
  70.         var windowWidth = 320;
  71.         try {
  72.           var res = wx.getSystemInfoSync();
  73.           windowWidth = res.windowWidth;
  74.         } catch (e) {
  75.           console.error('getSystemInfoSync failed!');
  76.         }
  77.  
  78.         columnChart = new wxCharts({
  79.             canvasId: 'columnCanvas',
  80.             type: 'column',
  81.             animation: true,
  82.             categories: chartData.main.categories,
  83.             series: [{
  84.                 name: '成交量',
  85.                 data: chartData.main.data,
  86.                 format: function (val, name) {
  87.                     return val.toFixed(2) + '万';
  88.                 }
  89.             }],
  90.             yAxis: {
  91.                 format: function (val) {
  92.                     return val + '万';
  93.                 },
  94.                 title: 'hello',
  95.                 min: 0
  96.             },
  97.             xAxis: {
  98.                 disableGrid: false,
  99.                 type: 'calibration'
  100.             },
  101.             extra: {
  102.                 column: {
  103.                     width: 15
  104.                 }
  105.             },
  106.             width: windowWidth,
  107.             height: 200,
  108.         });
  109.     }
  110. });

 小程序绘制饼图

 在这里插入图片描述

  1. <view class="container">
  2.     <canvas canvas-id="pieCanvas" class="canvas" style="height:300px" bindtouchstart="touchHandler"></canvas>
  3. </view>

  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var pieChart = null;
  4. Page({
  5.     data: {
  6.     },
  7.     touchHandler: function (e) {
  8.         console.log(pieChart.getCurrentDataIndex(e));
  9.     },        
  10.     onLoad: function (e) {
  11.         var windowWidth = 320;
  12.         try {
  13.             var res = wx.getSystemInfoSync();
  14.             windowWidth = res.windowWidth;
  15.         } catch (e) {
  16.             console.error('getSystemInfoSync failed!');
  17.         }
  18.  
  19.         pieChart = new wxCharts({
  20.             animation: true,
  21.             canvasId: 'pieCanvas',
  22.             type: 'pie',
  23.             series: [{
  24.                 name: '成交量1',
  25.                 data: 15,
  26.             }, {
  27.                 name: '成交量2',
  28.                 data: 35,
  29.             }, {
  30.                 name: '成交量3',
  31.                 data: 78,
  32.             }, {
  33.                 name: '成交量4',
  34.                 data: 63,
  35.             }, {
  36.                 name: '成交量2',
  37.                 data: 35,
  38.             }, {
  39.                 name: '成交量3',
  40.                 data: 78,
  41.             }, {
  42.                 name: '成交量4',
  43.                 data: 63,
  44.             }, {
  45.                 name: '成交量2',
  46.                 data: 35,
  47.             }, {
  48.                 name: '成交量3',
  49.                 data: 78,
  50.             }, {
  51.                 name: '成交量3',
  52.                 data: 78,
  53.             }],
  54.             width: windowWidth,
  55.             height: 300,
  56.             dataLabel: true,
  57.         });
  58.     }
  59. });

小程序绘制环形图

在这里插入图片描述

  1. <view class="container">
  2.     <canvas canvas-id="ringCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
  3.     <view>调用stopAnimation终止动画，并监听渲染完成事件</view>
  4.     <button type="primary" bindtap="updateData" style="margin-top:30rpx">更新title</button>
  5. </view>

  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var ringChart = null;
  4. Page({
  5.     data: {
  6.     },
  7.     touchHandler: function (e) {
  8.         console.log(ringChart.getCurrentDataIndex(e));
  9.     },
  10.     updateData: function () {
  11.         ringChart.updateData({
  12.             title: {
  13.                 name: '80%'
  14.             },
  15.             subtitle: {
  16.                 color: '#ff0000'
  17.             }
  18.         });
  19.     },     
  20.     onReady: function (e) {
  21.         var windowWidth = 320;
  22.         try {
  23.             var res = wx.getSystemInfoSync();
  24.             windowWidth = res.windowWidth;
  25.         } catch (e) {
  26.             console.error('getSystemInfoSync failed!');
  27.         }
  28.  
  29.         ringChart = new wxCharts({
  30.             animation: true,
  31.             canvasId: 'ringCanvas',
  32.             type: 'ring',
  33.             extra: {
  34.                 ringWidth: 25
  35.             },
  36.             title: {
  37.                 name: '70%',
  38.                 color: '#7cb5ec',
  39.                 fontSize: 25
  40.             },
  41.             subtitle: {
  42.                 name: '收益率',
  43.                 color: '#666666',
  44.                 fontSize: 15
  45.             },
  46.             series: [{
  47.                 name: '成交量1',
  48.                 data: 15,
  49.                 stroke: false
  50.             }, {
  51.                 name: '成交量2',
  52.                 data: 35,
  53.                  stroke: false
  54.             }, {
  55.                 name: '成交量3',
  56.                 data: 78,
  57.                 stroke: false
  58.             }, {
  59.                 name: '成交量4',
  60.                 data: 63,
  61.                  stroke: false
  62.             }],
  63.             disablePieStroke: true,
  64.             width: windowWidth,
  65.             height: 200,
  66.             dataLabel: false,
  67.             legend: false,
  68.             padding: 0
  69.         });
  70.         ringChart.addEventListener('renderComplete', () => {
  71.             console.log('renderComplete');
  72.         });
  73.         setTimeout(() => {
  74.             ringChart.stopAnimation();
  75.         }, 500);
  76.     }
  77. });

小程序绘制曲线图选区

在这里插入图片描述

  1. <view class="container">
  2.     <canvas canvas-id="areaCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
  3. </view>

  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var areaChart = null;
  4. Page({
  5.     data: {
  6.     },
  7.     touchHandler: function (e) {
  8.         console.log(areaChart.getCurrentDataIndex(e));
  9.         areaChart.showToolTip(e);
  10.     },    
  11.     onLoad: function (e) {
  12.         var windowWidth = 320;
  13.         try {
  14.           var res = wx.getSystemInfoSync();
  15.           windowWidth = res.windowWidth;
  16.         } catch (e) {
  17.           console.error('getSystemInfoSync failed!');
  18.         }
  19.         
  20.         areaChart = new wxCharts({
  21.             canvasId: 'areaCanvas',
  22.             type: 'area',
  23.             categories: ['1', '2', '3', '4', '5', '6'],
  24.             animation: true,
  25.             series: [{
  26.                 name: '成交量1',
  27.                 data: [32, 45, null, 56, 33, 34],
  28.                 format: function (val) {
  29.                     return val.toFixed(2) + '万';
  30.                 }
  31.             }],
  32.             yAxis: {
  33.                 title: '成交金额 (万元)',
  34.                 format: function (val) {
  35.                     return val.toFixed(2);
  36.                 },
  37.                 min: 0,
  38.                 fontColor: '#8085e9',
  39.                 gridColor: '#8085e9',
  40.                 titleFontColor: '#f7a35c'
  41.             },
  42.             xAxis: {
  43.                 fontColor: '#7cb5ec',
  44.                 gridColor: '#7cb5ec'
  45.             },
  46.             extra: {
  47.                 legendTextColor: '#cb2431'
  48.             },
  49.             width: windowWidth,
  50.             height: 200
  51.         });
  52.     }
  53. });

小程序绘制蛛网图/雷达图

在这里插入图片描述

  1. <view class="container">
  2.     <canvas canvas-id="radarCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
  3. </view>

  1. var wxCharts = require('../../../utils/wxcharts.js');
  2. var app = getApp();
  3. var radarChart = null;
  4. Page({
  5.     data: {
  6.     },
  7.     touchHandler: function (e) {
  8.         console.log(radarChart.getCurrentDataIndex(e));
  9.     },
  10.     onReady: function (e) {
  11.         var windowWidth = 320;
  12.         try {
  13.             var res = wx.getSystemInfoSync();
  14.             windowWidth = res.windowWidth;
  15.         } catch (e) {
  16.             console.error('getSystemInfoSync failed!');
  17.         }
  18.  
  19.         radarChart = new wxCharts({
  20.             canvasId: 'radarCanvas',
  21.             type: 'radar',
  22.             categories: ['1', '2', '3', '4', '5', '6'],
  23.             series: [{
  24.                 name: '成交量1',
  25.                 data: [90, 110, 125, 95, 87, 122]
  26.             }],
  27.             width: windowWidth,
  28.             height: 200,
  29.             extra: {
  30.                 radar: {
  31.                     max: 150
  32.                 }
  33.             }
  34.         });
  35.     }
  36. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/526518
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号