小程序 wxchart 使用简单入门

已于 2023-07-27 11:52:39 修改
阅读量3.1k 收藏 9
点赞数
文章标签： 前端 javascript 小程序 wxchart
于 2023-07-13 14:07:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LlanyW/article/details/131701044
版权
本文介绍了微信小程序图表组件wxCharts的使用方法，包括引入方式、基本参数设置、不同类型的图表（如Pie,Ring,Line,Column,Area,Radar）以及各种图表的配置选项。提供了实例代码展示如何创建饼图、圆环图和柱状图。
摘要由CSDN通过智能技术生成
官方参考：

Example - wxCharts使用说明 · Issue #58 · xiaolin3303/wx-charts · GitHub

引入

地址：GitHub - xiaolin3303/wx-charts: 微信小程序图表charts组件，Charts for WeChat Mini Program

把clone下来的文件里dist下面的wxcharts.js或者wxcharts-min.js放到自己文件目录中

常用参数说明

参数说明
 

opts                      Object
opts.canvasId         String Required        对应wxml中的canvasId
opts.type               String Required        图表类型，可选值为：pie、line、column、area、ring、radar
opts.width             Number Required      canvas宽度，单位px
opts.height            Number Required      canvas高度，单位px
opts.legend           Boolean                   是否显示图表下方各类别的标识，默认true
opts.background    String                      canvas背景颜色 ，默认#fff
opts.animation       Boolean                  是否动画展示，默认true
opts.enableScroll   Boolean                是否开启图表可拖拽滚动，默认false，支持 line、area 图表类型（需配合绑定scrollStart, scroll, scrollEnd 方法）
opts.categories     Array Required        数据类别分类 (pie、ring 图表不需要)
opts.dataLabel      Boolean                 是否在图表中显示数据内容值，默认true
opts.dataPointShare  Boolean             是否在图表中显示数据点图形标识，默认true


opts.xAxis            Object                   X轴配置


opts.xAxis.gridColor  String                X轴网格颜色
opts.xAxis.fontColor  String                X轴数据点颜色
opts.xAxis.disableGrid   Boolean         不绘制X轴网格，默认false
opts.xAxis.type     String                    可选值：calibration（刻度），默认包含样式


opts.yAxis            Object                   Y轴配置


opts.yAxis.format  Function                自定义Y轴文案显示
opts.yAxis.min      Number                 Y轴起始值
opts.yAxis.max     Number                 Y轴终止值
opts.yAxis.title      String                   Y轴title
opts.yAxis.gridColor  String               Y轴网格颜色
opts.yAxis.fontColor  String               Y轴数据点颜色
opts.yAxis.titleFontColor   String        Y轴title颜色
opts.yAxis.disabled   Boolean            不绘制Y轴，默认false
opts.extra             Object                 其它非通用配置项
opts.extra.ringWidth   Number           ring圆环宽度，单位px
opts.extra.lineStyle     String             仅对line、area图表有效，可选值：curve曲线、straight直线，默认straight
opts.extra.column      Object             column图表相关配置
opts.extra.column.width    Number     柱状图每项的图形宽度，单位px
opts.extra.legendTextColor   String    legend文案颜色
opts.series         Array Required        数据列表


数据列表series每项参数说明

dataItem              Object 
dataItem.data       Array Required        饼图、圆环图为Number数据，如果传入null，图表该处出现断点
dataItem.color      String                     不传入则使用系统默认的配色方案
dataItem.name     String                     数据名称
dataItem.format   Function                 自定义显示数据内容


ring 图表相关配置

opts.title                     Object                  仅支持 ring 图表类型
opts.title.name             String                   标题内容
opts.title.fontSize         Number                标题字体大小，单位px
opts.title.color             String                   标题颜色
opts.title.offsetX          Number                标题横向位置偏移量，单位px，默认0
opts.subtitle                Object                  仅支持 ring 图表类型
opts.subtitle.name        String                  副标题内容
opts.subtitle.fontSize    Number               副标题字体大小，单位px
opts.subtitle.color        String                  副标题颜色
opts.subtitle.offsetX     Number               副标题横向位置偏移量，单位px，默认0


radar 图表相关配置

opts.extra.radar                    Object        radar图表相关配置
opts.extra.radar.max             Number       数据区间最大值，用于调整数据显示的比例，默认series data的最大值
opts.extra.radar.labelColor     String         各项标识文案的颜色，默认#666
opts.extra.radar.gridColor      String         雷达图网格颜色，默认#ccc

pie、ring 图表相关配置

opts.disablePieStroke          Boolean       不绘制pie、ring图表各区块的白色分割线，默认false
opts.extra.pie                     Object         pie、ring图表相关配置
opts.extra.pie.offsetAngle    Number       起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可），默认0

type:'pie',设置类型简单，改掉初始时type的值就可以了

pie

ring 

line

column

area

radar

1.饼图 pie
2.圆环图 ring
3.线图 line
4.柱状图 column
5.区域图 area
6.雷达图 radar

实例

饼图 type:'pie'
//wxml
<canvas class="cav" canvas-id="pieCanvas"></canvas>

//js
Page({
  data: {
    chart: null
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
    let chart = new wxCharts({
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [{
        name: 'cat1',
        data: 50,
      }, {
        name: 'cat2',
        data: 30,
      }, {
        name: 'cat3',
        data: 1,
      }, {
        name: 'cat4',
        data: 1,
      }, {
        name: 'cat5',
        data: 46,
      }],
      width: 360,
      height: 300,
      dataLabel: true
    });
    this.setData({
      chart: chart,
    })
  }
});

//wxss

.cav{
  width: 100%;
  height: 540px;
  background-color: antiquewhite;
}
饼图效果

圆环

有了饼的经验，这个简单了。把type:'pie'改成 type:'ring' 

//wxml
<canvas class="cav" canvas-id="pieCanvas"></canvas>

//js
Page({
  data: {
    chart: null
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
    let chart = new wxCharts({
      canvasId: 'pieCanvas',
      type: 'ring',
      series: [{
        name: 'cat1',
        data: 50,
      }, {
        name: 'cat2',
        data: 30,
      }, {
        name: 'cat3',
        data: 1,
      }, {
        name: 'cat4',
        data: 1,
      }, {
        name: 'cat5',
        data: 46,
      }],
      width: 360,
      height: 300,
      dataLabel: true
    });
    this.setData({
      chart: chart,
    })
  }
});

//wxss

.cav{
  width: 100%;
  height: 540px;
  background-color: antiquewhite;
}
圆环效果图

柱状图：
//wxss
.cav{
    width: 100%;
    height: 540px;
    background-color: antiquewhite;
}

//wxml
<canvas class="cav" canvas-id="column"></canvas>

js
Page({
  data: {
    colChart: null,
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
  
    let col = new wxCharts({
      canvasId: 'column',
      type: 'column',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        }
      },
      width: 320,
      height: 200
    });

    this.setData({
      colChart: col
    })
  }
});

line 线条

效果：

案例源码： 

//wxml
<view>
  <canvas canvas-id="linec" class="chart"> </canvas>
</view>

//wxss
.chart {
  width: 700rpx;
  height: 600rpx;
}

//js
const wxCharts = require("../../../utils/wxcharts.js")

let areaChart;
Page({
  LoadTu() {
    areaChart = new wxCharts({
      canvasId: 'linec', type: 'line',
      categories: this.data.chartDatas.day7,
      animation: true,
      series: [{
        name: '洗涤费',
        // 线条的颜色
        color: '#FF8A06',
        data: this.data.chartDatas.money7,
        format: function (val) {
          return val.toFixed(1) + '';
        }
      }],
      dataPointShape: true,
      xAxis: {
        fontColor: '#7D7D7F',
        // 不显示x轴 刻度点
        disableGrid: true,
      },
      yAxis: {
        // y轴文字颜色，display:true不显示
        fontColor: '#FF8A06',
        // 不显示y轴
        disabled: true
      },
      // 非通用配置
      extra: {
        legendTextColor: '#c427b1',
        lineWidth: 10,
        // 线条形状：curve 圆滑
        lineStyle: 'curve'
      },
      // dataPointShape:false,
      legend: false,
      width: 320, height: 200,
    });

    return this;
  },

  data: {
    menus: [],
    ordermsg: {},
    swiper_h: 0,
    chartDatas: {
      money7: [6.4, 0, 0, 0, 18.71, 5.6, 0],
      day7: ["13日", "14日", "15日", "16日", "17日", "18日", "19日"]
    }
  },
  onLoad: function (options) {
    this.LoadTu()
  }
});

Lan.W
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序图表插件（wx-charts）:饼图、线图、柱状图、区域图 ...
03-29
wx-charts基于canvas绘制的微信小程序图表插件 支持图表类型 饼图 pie  *线图 line  *柱状图 column  *区域图 area 高清显示 设置canvas的尺寸为2倍大小，然后缩小到50%，建议都进行这样的设置，图表本身绘制时是按照高清显示配置的，不然整体效果会偏大   /* 例如设计图尺寸为320 x 300 */ .canvas { width: 640px; height: 600px; transform: scale(0.5) }   wx-charts参数说明     opts Object   opts.canvasId String required
wxchart.js
12-13
微信小程序canvas开发工具。在开发小程序过程中,有项目用到图表功能, 其实wxChart.js有小程序的库,我们要吧引入进来,然后配置初始化一下,就可以达到目的了.
推荐优秀开源项目：wxCharts - 微信小程序数据可视化库
gitblog_00090的博客
04-18 429
推荐优秀开源项目：wxCharts - 微信小程序数据可视化库 项目地址:https://gitcode.com/Shaman05/wxCharts 项目简介 在移动互联网时代，微信小程序已经成为许多开发者和企业的重要选择。wxCharts 是一个专为微信小程序设计的数据可视化库，它基于 Echarts 实现，提供了丰富的图表类型和高度可定制化的能力，帮助开发者轻松创建美观、交互性强的数据展示。 ...
小白学习微信小程序的数据可视化和图表展示
最新发布
qq_67153941的博客
07-06 281
在上面的代码中，我们在页面的 onReady 生命周期函数中创建了图表实例，并通过 setData 方法将它保存在 data 中；在微信开发者工具左侧的项目文件树中，找到项目的根目录，在根目录下新建一个 libs 目录，用于存放引入的第三方库。上面的代码中，我们将 echarts.min.js 文件添加到了小程序的全局脚本中，并指定了它的路径为 /libs/echarts.min。接下来，在项目的 app.json 文件中，将 echarts.min.js 添加到小程序的全局脚本中。
微信小程序wxChart
大灰狼的小绵羊哥哥的博客
01-05 9142
实例源码       什么是wxChart wxChart是一个微信小程序上的图表插件 环境要求 需要微信小程序项目环境 安装及使用 wxChart目录放置在项目中引入即可 详细使用请参照/pages/chart/chart.js 基本用法 请参照chart.js 命名规范
【微信小程序】wx-charts 图表插件
Qianmoer的博客
01-29 2246
wx-charts微信小程序主流的图表工具基于 Canvas，体积小wx-charts插件无法在组件内使用。
微信小程序图表插件（wx-charts）
滕益宏的博客
03-05 4243
微信小程序图表插件（wx-charts）微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个。微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中...
微信小程序图表插件wx-charts开源
04-29
微信小程序图表插件，折线图，饼图，柱状图等，代码开源，由大神更新，需要连接数据库可以微我，小程序wx.request方法获取数据库显示到图表实例
微信小程序中使用图表插件 wx-charts
花铛
03-26 1525
基于canvas 绘制，支持图表类型（饼图 pie、圆环图 ring、线图 line、柱状图 column、区域图 area、雷达图 radar）。
微信小程序----图表插件示例用法（wx-charts）
heavenz19的博客
05-20 1983
微信小程序----图表插件示例用法 wx-charts参数说明： opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas宽度，单位为px opts.height Numb
小程序图表wx-chart
weixin_30843605的博客
02-19 213
下载地址 https://github.com/xiaolin3303/wx-charts 使用步骤： 一、解压后，把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夹里，在当前页面引用文件。 二、需要使用图表的wxss页面中加canvas的宽高值，若没有加则不显示 .canvas { width: 100%...
wx-charts 微信小程序图表插件
03-14
微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个
微信小程序图表组件 wx-charts-master
12-23
微信小程序图表组件 wx-charts-master js代码支持微信小程序开发
微信的eCharts wx-charts
07-10
微信的eCharts wx-charts
小程序chartjs，小程序折线图图表
03-29
小程序折线图 小程序chartjs 小程序图表
微信小程序图表插件wx-charts用法实例详解
10-16
主要介绍了微信小程序图表插件wx-charts用法,结合实例形式较为详细的总结分析了微信小程序图表插件wx-charts的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
微信小程序之图表插件的使用
二个星星
03-29 2561
微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar 如何使用？ 直接引用编译好的文件 dist/charts.js（js下...
wx-charts微信小程序图表插件
rookie的博客
07-12 6595
wx-charts微信小程序主流的图表工具基于 Canvas，体积小支持图表类型饼图 pie圆环图 ring线图 line柱状图 column区域图 area雷达图 radar如何使用1. 直接拷贝编译好的文件 dist/wxcharts-min.js 到项目中（js下载地址）import wxCharts from '../../utils/wxcharts-min.js'2. wxml 中定义...
给一个demo示例，wx-chart在vue3+vite中使用
07-15
当然，我可以为您提供一个使用 wx-chart 在 Vue3 + Vite 中的示例。首先，确保您已经安装了 Vue 3 和 Vite。 1. 创建一个新的 Vue 3 + Vite 项目： ```bash npm init vite@latest my-vue-chart-app cd my-vue-chart-app npm install ``` 2. 安装 wx-chart： ```bash npm install wx-chart ``` 3. 在 `src` 目录下创建一个新的组件 `Chart.vue`： ```vue <template> <div> <canvas ref="chartCanvas"></canvas> </div> </template> <script> import { ref, onMounted } from 'vue'; import wxChart from 'wx-chart'; export default { name: 'Chart', setup() { const chartCanvas = ref(null); onMounted(() => { const chart = new wxChart(chartCanvas.value, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); }); return { chartCanvas }; } }; </script> <style> canvas { width: 100%; height: 400px; } </style> ``` 4. 在 `src` 目录下的 `App.vue` 文件中引入 `Chart` 组件： ```vue <template> <div> <h1>Vue Chart Demo</h1> <Chart /> </div> </template> <script> import Chart from './Chart.vue'; export default { name: 'App', components: { Chart } }; </script> <style> /* 样式可以根据您的需要进行调整 */ h1 { text-align: center; } </style> ``` 5. 运行项目： ```bash npm run dev ``` 现在，您应该可以在浏览器中看到一个简单的柱状图。 这是一个基本的示例，您可以根据 wx-chart 的文档进一步定制和添加其他图表类型和选项。 希望对您有所帮助！如果您还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值