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

最新推荐文章于 2024-04-24 22:52:34 发布
最新推荐文章于 2024-04-24 22:52:34 发布
阅读量1.4k 收藏 25
点赞数 6
文章标签： 微信小程序 小程序 javascript 源码软件 前端
未经允许，禁止转载
本文链接：https://blog.csdn.net/weixin_44904003/article/details/128823696
版权

小程序绘制曲线图

在这里插入图片描述

<view class="container">
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
    <button type="primary" bindtap="updateData">更新数据</button>
</view>

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var lineChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
        console.log(lineChart.getCurrentDataIndex(e));
        lineChart.showToolTip(e, {
            // background: '#7cb5ec'
        });
    },    
    createSimulationData: function () {
        var categories = [];
        var data = [];
        for (var i = 0; i < 10; i++) {
            categories.push('2016-' + (i + 1));
            data.push(Math.random()*(20-10)+10);
        }
        // data[4] = null;
        return {
            categories: categories,
            data: data
        }
    },
    updateData: function () {
        var simulationData = this.createSimulationData();
        var series = [{
            name: '成交量1',
            data: simulationData.data,
            format: function (val, name) {
                return val.toFixed(2) + '万';
            }
        }];
        lineChart.updateData({
            categories: simulationData.categories,
            series: series
        });
    },
    onLoad: function (e) {
        var windowWidth = 320;
        try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }
        
        var simulationData = this.createSimulationData();
        lineChart = new wxCharts({
            canvasId: 'lineCanvas',
            type: 'line',
            categories: simulationData.categories,
            animation: true,
            background: '#f5f5f5',
            series: [{
                name: '成交量1',
                data: simulationData.data,
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }, {
                name: '成交量2',
                data: [11, 24, 29, 15, null, 21, 32, 23, 45, 21],
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }],
            xAxis: {
                disableGrid: true
            },
            yAxis: {
                title: '成交金额 (万元)',
                format: function (val) {
                    return val.toFixed(2);
                },
                min: 0
            },
            width: windowWidth,
            height: 200,
            dataLabel: false,
            dataPointShape: true,
            extra: {
                lineStyle: 'curve'
            }
        });
    }
});

小程序绘制柱状图

在这里插入图片描述

<view class="container">
	<view class="title">
		<view wx:if="{{!isMainChartDisplay}}" class="back-btn" bindtap="backToMainChart">返回</view>
		{{chartTitle}}
	</view>
    <canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
    <view style="text-align:center">点击数据每一项查看详情</view>
</view>

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var columnChart = null;
var chartData = {
    main: {
        title: '总成交量',
        data: [15, 20, 45, 37],
        categories: ['2012', '2013', '2014', '2015']
    },
    sub: [{
        title: '2012年度成交量',
        data: [70, 40, 65, 100, 34, 18],
        categories: ['1', '2', '3', '4', '5', '6']
    }, {
        title: '2013年度成交量',
        data: [55, 30, 45, 36, 56, 13],
        categories: ['1', '2', '3', '4', '5', '6']
    }, {
        title: '2014年度成交量',
        data: [76, 45, 32, 74, 54, 35],
        categories: ['1', '2', '3', '4', '5', '6']                
    }, {
        title: '2015年度成交量',
        data: [76, 54, 23, 12, 45, 65],
        categories: ['1', '2', '3', '4', '5', '6']
    }]
};
Page({
    data: {
        chartTitle: '总成交量',
        isMainChartDisplay: true
    },
    backToMainChart: function () {
        this.setData({
            chartTitle: chartData.main.title,
            isMainChartDisplay: true
        });
        columnChart.updateData({
            categories: chartData.main.categories,
            series: [{
                name: '成交量',
                data: chartData.main.data,
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }]
        });
    },
    touchHandler: function (e) {
        var index = columnChart.getCurrentDataIndex(e);
        if (index > -1 && index < chartData.sub.length && this.data.isMainChartDisplay) {
            this.setData({
                chartTitle: chartData.sub[index].title,
                isMainChartDisplay: false
            });
            columnChart.updateData({
                categories: chartData.sub[index].categories,
                series: [{
                    name: '成交量',
                    data: chartData.sub[index].data,
                    format: function (val, name) {
                        return val.toFixed(2) + '万';
                    }
                }]
            });

        }
    },
    onReady: function (e) {
        var windowWidth = 320;
        try {
          var res = wx.getSystemInfoSync();
          windowWidth = res.windowWidth;
        } catch (e) {
          console.error('getSystemInfoSync failed!');
        }

        columnChart = new wxCharts({
            canvasId: 'columnCanvas',
            type: 'column',
            animation: true,
            categories: chartData.main.categories,
            series: [{
                name: '成交量',
                data: chartData.main.data,
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }],
            yAxis: {
                format: function (val) {
                    return val + '万';
                },
                title: 'hello',
                min: 0
            },
            xAxis: {
                disableGrid: false,
                type: 'calibration'
            },
            extra: {
                column: {
                    width: 15
                }
            },
            width: windowWidth,
            height: 200,
        });
    }
});

小程序绘制饼图

在这里插入图片描述

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

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var pieChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
        console.log(pieChart.getCurrentDataIndex(e));
    },        
    onLoad: function (e) {
        var windowWidth = 320;
        try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }

        pieChart = new wxCharts({
            animation: true,
            canvasId: 'pieCanvas',
            type: 'pie',
            series: [{
                name: '成交量1',
                data: 15,
            }, {
                name: '成交量2',
                data: 35,
            }, {
                name: '成交量3',
                data: 78,
            }, {
                name: '成交量4',
                data: 63,
            }, {
                name: '成交量2',
                data: 35,
            }, {
                name: '成交量3',
                data: 78,
            }, {
                name: '成交量4',
                data: 63,
            }, {
                name: '成交量2',
                data: 35,
            }, {
                name: '成交量3',
                data: 78,
            }, {
                name: '成交量3',
                data: 78,
            }],
            width: windowWidth,
            height: 300,
            dataLabel: true,
        });
    }
});

小程序绘制环形图

在这里插入图片描述

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

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var ringChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
        console.log(ringChart.getCurrentDataIndex(e));
    },
    updateData: function () {
        ringChart.updateData({
            title: {
                name: '80%'
            },
            subtitle: {
                color: '#ff0000'
            }
        });
    },     
    onReady: function (e) {
        var windowWidth = 320;
        try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }

        ringChart = new wxCharts({
            animation: true,
            canvasId: 'ringCanvas',
            type: 'ring',
            extra: {
                ringWidth: 25
            },
            title: {
                name: '70%',
                color: '#7cb5ec',
                fontSize: 25
            },
            subtitle: {
                name: '收益率',
                color: '#666666',
                fontSize: 15
            },
            series: [{
                name: '成交量1',
                data: 15,
                stroke: false
            }, {
                name: '成交量2',
                data: 35,
                 stroke: false
            }, {
                name: '成交量3',
                data: 78,
                stroke: false
            }, {
                name: '成交量4',
                data: 63,
                 stroke: false
            }],
            disablePieStroke: true,
            width: windowWidth,
            height: 200,
            dataLabel: false,
            legend: false,
            padding: 0
        });
        ringChart.addEventListener('renderComplete', () => {
            console.log('renderComplete');
        });
        setTimeout(() => {
            ringChart.stopAnimation();
        }, 500);
    }
});

小程序绘制曲线图选区

在这里插入图片描述

<view class="container">
    <canvas canvas-id="areaCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
</view>

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var areaChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
        console.log(areaChart.getCurrentDataIndex(e));
        areaChart.showToolTip(e);
    },    
    onLoad: function (e) {
        var windowWidth = 320;
        try {
          var res = wx.getSystemInfoSync();
          windowWidth = res.windowWidth;
        } catch (e) {
          console.error('getSystemInfoSync failed!');
        }
        
        areaChart = new wxCharts({
            canvasId: 'areaCanvas',
            type: 'area',
            categories: ['1', '2', '3', '4', '5', '6'],
            animation: true,
            series: [{
                name: '成交量1',
                data: [32, 45, null, 56, 33, 34],
                format: function (val) {
                    return val.toFixed(2) + '万';
                }
            }],
            yAxis: {
                title: '成交金额 (万元)',
                format: function (val) {
                    return val.toFixed(2);
                },
                min: 0,
                fontColor: '#8085e9',
                gridColor: '#8085e9',
                titleFontColor: '#f7a35c'
            },
            xAxis: {
                fontColor: '#7cb5ec',
                gridColor: '#7cb5ec'
            },
            extra: {
                legendTextColor: '#cb2431'
            },
            width: windowWidth,
            height: 200
        });
    }
});

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

在这里插入图片描述

<view class="container">
    <canvas canvas-id="radarCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
</view>

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var radarChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
        console.log(radarChart.getCurrentDataIndex(e));
    },
    onReady: function (e) {
        var windowWidth = 320;
        try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }

        radarChart = new wxCharts({
            canvasId: 'radarCanvas',
            type: 'radar',
            categories: ['1', '2', '3', '4', '5', '6'],
            series: [{
                name: '成交量1',
                data: [90, 110, 125, 95, 87, 122]
            }],
            width: windowWidth,
            height: 200,
            extra: {
                radar: {
                    max: 150
                }
            }
        });
    }
});

完整源码下载

小程序绘图源码下载

dasdadsadasdadsad
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
狼性书生
05-22 3313
在微信小程序中使用Echarts需要下载相应的文件，可在这下载ec-canvas，该github里也有很多很好的例子，可自行调试学习。 本例子的目录结构： 微信小程序使用Echarts的步骤 在需要引入Echarts的页面的json文件中设置组件 按照以上目录结构来理解，就是在index.json文件中设置echarts组件 { "usingComponents": { "e...
微信小程序：wx-charts动态绘制折线图
botellei的博客
12-20 1万+
微信小程序：wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具，体积小易操作，支持多种图表的绘制，这里主要就动态绘制折线图做出详解，所谓动态，指的是表格的数据不是固定的，而是通过网络接口或者其他的途径获得的。 1.配置工具 首先，需要将wx-charts配置到小程序中，wx-chart.js文件下载地址： https://download.csdn.net/download/botellei/13739743 下载好文件后将其放到微信小程序utils文件夹中
微信小程序使用echarts组件实现饼状统计图功能
最新发布
weixin_45465881的博客
04-24 2560
echarts组件代码较多，components文件夹的内容可在我主页的资源免费下载或者可前往echarts官网下载呦，引入的路径一定要正确。我这里简单绘制的饼状统计图，如需要其他的统计图，可自行学习或者进我主页，将分享更多内容呦~小编创作不易，口干舌燥，可以的话，请我喝杯水吧！欢迎各位的批评指导呦~
小程序中使用echarts，案例一：实现蜘蛛网（雷达图）
qq_45290368的博客
12-26 1567
小程序中使用echarts，案例一：实现蜘蛛网（雷达图）
微信小程序中使用ECharts，实现折线图、曲线图、柱形图等
weixin_50307964的博客
06-14 4801
根据Echarts官方文档可以看到，Echarts是兼容了微信小程序的；那么我们就可以放心大胆的使用了；找到相对于的代码即可开始开发了
微信小程序中使用ECharts--折线图、柱状图、饼图等
热门推荐
guochanof的专栏
06-16 2万+
微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。 因此，ECharts 团队和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。 ...
小程序 图表js
st646889325的博客
05-24 736
/* * charts for WeChat small app v1.0 * * https://github.com/xiaolin3303/wx-charts * 2016-11-28 * * Designed and built with all the love of Web */ 'use strict'; var config = { yAxisWidth...
微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码
01-31
本文将详细讲解如何利用Canvas在微信小程序中绘制曲线图、饼图、柱状图以及雷达图/蛛网图。 首先，我们要了解Canvas的基本用法。在微信小程序中，可以创建一个 `<canvas>` 标签，并通过 `wx.createSelectorQuery()`...
wxchart微信小程序图表组件柱状图折线图饼图雷达图
08-10
`wxchart` 是一个专为微信小程序设计的图表组件库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及雷达图等，使得开发者能够轻松地在小程序中实现各种数据可视化功能。下面将详细探讨这些图表组件的特性和...
微信小程序开发-手绘雷达图案例源码.zip
08-15
在这个“微信小程序开发-手绘雷达图案例源码.zip”压缩包中，包含了一个关于如何在微信小程序中实现手绘雷达图的实例代码。雷达图是一种多轴数据展示方式，常用于对比多个变量或者展示一个变量的多个维度。 首先，...
微信小程序图表插件（wx-charts）:饼图、线图、柱状图、区域图 ...
03-29
wx-charts基于canvas绘制的微信小程序图表插件 支持图表类型 饼图 pie  *线图 line  *柱状图 column  *区域图 area 高清显示 设置canvas的尺寸为2倍大小，然后缩小到50%，建议都进行这样的设置，图表本身绘制时是...
JavaScript图表库(雷达图,饼图,折线图,曲线图,柱状图) 基于HTML5 Canvas.zip
02-12
本文将深入探讨基于HTML5 Canvas的JavaScript图表库，包括雷达图、饼图、折线图、曲线图和柱状图的实现原理与应用。 HTML5 Canvas是一个强大的绘图API，它允许开发者在网页上直接进行2D图形绘制，通过JavaScript来...
wx小程序雷达图
daengwei的博客
03-28 2276
1、看定义 雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。 雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。 在 心理测评全系统设计与代码实现 一文中绘制了雷达图， 这是将代码分享出来，希望对大家有所帮助。 2、上效果图 3、上代码 这里只定
小程序使用echarts图表-雷达图
qq_42165062的博客
01-18 1603
小程序中使用echarts图表-雷达图
小程序+echarts制作雷达图
m0_66863149的博客
05-17 1283
微信小程序引入echars参考文档： https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app wxml: <view class='box'> <ec-canvas id="chart" canvas-id="chart" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> </view> j...
微信小程序统计图表之折线图曲线图
u014388322的专栏
09-11 852
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
小程序如何使用 ECharts 绘制雷达图
Joe大叔与程序的故事
08-31 2912
文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 众所周知，在H5平台绘制图表首选 ECharts 库。它具有以下特色：丰富的可视化类型、多种数据无需转换直接使用、移动端优化、动态数据、绚丽的特效、GL实现三维可视化。这里放上 5分钟上手ECharts官方文档入口，感兴趣的朋友们可以一睹为先。 不过本篇文章Joe大叔将要带领大家一步步的在微信小程序中使用 ECharts 成功绘制出雷达图，接下来我们就开始吧！ .
微信小程序使用echarts雷达图遇到的坑
李墨瞳的博客
12-16 1890
最近一个医院的小程序需要使用雷达图来展示，简单总结一下。 1：使用场景：在详情页，根据测试的题目得分画成雷达图，测试的题目会得到2种结果，高危和低危。一种雷达图，但是样式不一样。如果是标题文字颜色不用改，那就初始化一个就行。因为这2个的文字，一个文字是白色，一个文字是黑色，而文字我并没有找到可以动态更改的方法，就只能初始化2个了，初始化2个是有一些问题的。我先说只初始化一个。 2：引入echarts，使用专用的小程序版本，点击去Git上下载。如果直接下载的话，echarts.js有700多k，小程序
使用js，将微信小程序canvas绘制的图片转为文件
05-24
可以使用Canvas.toDataURL()方法将canvas绘制的图片转为base64格式的数据，然后再利用base64转Blob的方法生成文件。 以下是一个示例代码： ```javascript // 获取canvas元素 const canvas = document.querySelector('canvas'); // 将canvas转为base64格式的数据 const base64Data = canvas.toDataURL('image/png'); // 将base64格式的数据转为Blob对象 const byteString = atob(base64Data.split(',')[1]); const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } const blob = new Blob([ab], { type: mimeString }); // 生成文件对象 const file = new File([blob], 'canvas.png', { type: 'image/png' }); ``` 以上代码将canvas绘制的图片转为了一个名为"canvas.png"的PNG文件对象。你可以根据需要修改代码中的文件名和文件类型。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值