wx-charts微信小程序图表插件

最新推荐文章于 2024-09-13 21:55:15 发布

Archer_yy

最新推荐文章于 2024-09-13 21:55:15 发布

阅读量1.2k

点赞数

文章标签： echarts wx-echarts

本文链接：https://blog.csdn.net/Dilemma_me/article/details/102551751

版权

微信小程序主流的图表工具，基于 Canvas，体积小，wx-charts 插件无法在组件内使用。
1.直接拷贝编译好的文件 dist/wxcharts-min.js到utils文件中，js下载地址：wxcharts-min.js
2.js中导入

import wxCharts from '../../utils/wxcharts-min.js'

3.wxml

<!--pages/reportform2/reportform2.wxml-->
<canvas canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;"></canvas>
<canvas canvas-id="ringCanvas" disable-scroll="true" class="ringCanvas" style="width:300px; height:300px;"></canvas>
<canvas canvas-id="lineCanvas" disable-scroll="true" class="lineCanvas" style="width:300px; height:300px;"></canvas>
<canvas canvas-id="columnCanvas" disable-scroll="true" class="columnCanvas" style="width:300px; height:300px;"></canvas>
<canvas canvas-id="areaCanvas" disable-scroll="true" class="areaCanvas" style="width:300px; height:300px;"></canvas>
<canvas canvas-id="radarCanvas" disable-scroll="true" class="radarCanvas" style="width:300px; height:300px;"></canvas>

canvas-id 与 new wxCharts({canvasId: ‘’}) 中的 canvasId 值必须一致。

For example

// pages/reportform2/reportform2.js
import wxCharts from '../../utils/wxcharts-min.js'
Page({
  data: {

  },
  onLoad: function (options) {
    this.echarts()
  },
  echarts(){
    // 饼图
    let piechart = new wxCharts({
      animation: true,
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }],
      width: 300,
      height: 300,
    })
    // 圆环图
    let ringchart = new wxCharts({
      animation: