微信小程序 - uCharts 图表

一、使用背景

前端图表的插件库有很多，例如echarts、uCharts等等
echarts 更适合应用于后台管理系统 或者pc 端
当微信小程序使用 echarts 并且引用 echarts 他会提示一段话 然后报错

小程序“文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理，手机端使用过大的 js 库影响性能。”

二、uCharts高性能跨平台图表库

uCharts官网   https://www.ucharts.cn

uCharts git 地址 uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

下载cCharts 地址 uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

下载并在本地引入

三、在微信小程序中使用 uCharts 基本案例

将其封装成微信小程序的组件

<view class="pie-columns">
	<view class="pie-charts" style="width: {{ cWidth }}px;height:{{ cHeight }}px">
		<canvas canvas-id="canvasPie" id="canvasPie" class="charts" style="width: {{ cWidth }}px;height:{{ cHeight }}px" ontouchstart="touchPie"></canvas>
	</view>
</view>

page {
  width: 750rpx;
  overflow-x: hidden;
}

.pie-columns {
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}


.pie-charts {
  box-sizing: border-box;
}

.charts {
  box-sizing: border-box;
}

// components/line-chart/line-chart.js
import uCharts from '../../libs/uCharts/u-charts.js'
var canvaPie = null

const request = require('../../request.js')
const { $get } = request

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabIndex: {
      type: String || Number,
      value: 0,
      observer: function(newVal, oldVal) {
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    cWidth: '',
    cHeight: '',
    pixelRatio: 1
  },

  attached (){
    this.setData({
      cWidth: wx.getSystemInfoSync().windowWidth/2,
      cHeight: 150
    })
    this.getServerData()
  },

  /**
   * 组件的方法列表
   */
  methods: { 
    // 获取网络数据
    getServerData(){
      let _this = this
      $get('https://www.ucharts.cn/data.json',{},res => {
        if(res.code == 0){
          
        } else {
          let Pie = {}
          if(this.data.tabIndex == 0) {
            Pie = {
              series: [{
                name: '自己销售',
                data: 50,
                color: '#009DA8',
                textColor: '#333333',
                textSize: 9
              }, {
                name: '一级合伙人销售',
                data: 200,
                color: '#EB7D78',
                textColor: '#333333',
                textSize: 9
              }, {
                name: '二级合伙人销售',
                data: 500,
                color: '#FDE18E',
                textColor: '#333333',
                textSize: 9
              }]
            }
          } else if(this.data.tabIndex == 2){
            Pie = {
              series: [{
                name: '一级合伙人',
                data: 50,
                color: '#EB7D78',
                textColor: '#333333',
                textSize: 9
              }, {
                name: '二级合伙人',
                data: 200,
                color: '#FDE18E',
                textColor: '#333333',
                textSize: 9
              }]
            }
          }
   
          _this.showPie("canvasPie",Pie)
        }
      })
    },

    showPie(canvasId,chartData){
      let _this = this
      canvaPie = new uCharts({
        $this: _this,
        canvasId: canvasId,
        type: 'pie',
        fontSize: 9,
        legend: {
          show: false,
          // position: 'right',
          // float: 'center',
          // itemGap: 10,
          // padding: 1,
          // lineHeight: 26,
          // margin: 25,
          // borderWidth :1
        },
        dataLabel: false,
        // dataPointShape: true,
        background: '#FFFFFF',
        pixelRatio: _this.data.pixelRatio,
        series: chartData.series,
        animation: true,
        width: _this.data.cWidth * _this.data.pixelRatio,
        height: _this.data.cHeight * _this.data.pixelRatio,
        extra: {
          pie:{
             labelWidth: 3,
             border: true,
             borderWidth: 1,
             ringWidth : 15
          }
        }
      })   
    },

    touchPie(e) {
      canvaPie.showToolTip(e, {
        format: function (item) {
          return item.name + item.data + '盒'
        }
      })
    }
  }
})