Taro react 小程序 封装 uchart.js 图表

uChart.js 文档 https://www.ucharts.cn/

开发环境

uchart.js version 'v2.3.3-20210706'

Taro 版本 3.3.5

react 17.0.0

版本过久 可能会导致引起一些兼容问题

封装组件

components 新建一个目录 Mychart 在其目录下创建 Mychart.jsx文件

注意 uChart.js 文件需要在官网下载 放在util 文件目录下了

import {Component} from 'react'
import {View, Canvas} from '@tarojs/components'
import PropTypes from 'prop-types'
import Taro from '@tarojs/taro'

import uCharts from '../../util/uCharts.js'

let canvaColumn = null // 配置对象
let chartConfig = {
  type: 'bar', // 类型
  //   color: ['#6468e5'], // 图例颜色
  //   yAxis: {
  //     gridColor: 'red', // 坐标坐标轴颜色
  //   },
  xAxis: {
    disableGrid: false,
    min: 0, // 最小值为0
    max: 80, // 最大值为80
  },
  //   legend: {
  //     show: false, // 是否显示图例
  //   },
  //   dataLabel: true, // 是否显示图表区域内数据点上方的数据文案
  animation: true, // 是否动画展示
  //   duration: 500, // 动画展示时长
  //   fontSize: 12, // 全局默认字体
  //   fontColor: '#666', // 全局默认字体颜色
  //   // 扩展设置
  extra: {
    bar: {
      type: 'group', // 柱状图类型
      width: 15, // 柱状图每个柱子的图形宽度
      seriesGap: 10, // 多series每个柱子之间的间距
      categoryGap: 4, // 每个category点位（X轴点）柱子组之间的间距
      // barBorderCircle: true, // 启用分组柱状图半圆边框
      // linearType: 'custom', // 渐变类型  自定义
      // linearOpacity: 1, // 透明渐变的透明度
      // colorStop: 1, // 渐变色的显示比例
      //   activeBgColor: '#000000', // 当前点击柱状图的背景颜色
      // customColor: ['#8bc34a', '#8bc34a'], // 自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
      // activeBgOpacity: 0.7, // 当前点击柱状图的背景颜色透明度
    },
    // tooltip: {showBox: true, showCategory: true, showArrow: true},
  },
}
export default class CateDetail extends Component {
  static propTypes = {
    categories: PropTypes.array,
    series: PropTypes.array,
    config: PropTypes.object,
    onTouchChart: PropTypes.func,
  }
  static defaultProps = {
    categories: [],
    series: [],
    config: {},
    onTouchChart: null,
    style: {},
    width: 0,
  }
  // 初始化页面的属性与状态
  constructor() {
    super(...arguments)
    this.state = {
      cWidth: '',
      cHeight: '',
      // eslint-disable-next-line react/no-unused-state
      pixelRatio: 1,
    }
  }

  // 生命周期回调—监听页面加载
  componentWillMount() {}a

  // 生命周期回调—监听页面初次渲染完成
  componentDidMount() {
    // 渲染宽度和高度
    const sysInfo = Taro.getSystemInfoSync()
    let pixelRatio = 1
    if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
      pixelRatio = sysInfo.pixelRatio
    }
    const cWidth = pixelRatio * (sysInfo.windowWidth - this.props.width)
    const cHeight = (750 / 750) * cWidth
    // eslint-disable-next-line react/no-unused-state
    this.setState({cWidth, cHeight, pixelRatio}, () => this.getServerData())
  }

  // 页面是否需要更新
  shouldComponentUpdate() {
    return true
  }

  // 页面即将更新
  // eslint-disable-next-line no-unused-vars
  componentWillUpdate(nextProps, nextState) {}

  // 页面更新完毕
  componentDidUpdate() {}

  // 生命周期回调—监听页面卸载
  componentWillUnmount() {}

  // 生命周期回调-监听页面显示
  componentDidShow() {}

  // 生命周期回调-监听页面隐藏
  componentDidHide() {}

  // 错误监听函数
  componentDidCatchError() {}

  getServerData() {
    this.showColumn(this.props.cavansId)
  }
  showColumn(canvasId) {
    const {cWidth, cHeight} = this.state
    const {categories, series, config} = this.props
    let ctx = Taro.createCanvasContext(canvasId, this) // 上下文
    canvaColumn = new uCharts({
      categories,
      series,
      width: cWidth,
      height: cHeight,
      context: ctx,
      ...chartConfig,
      ...config,
    })
  }
  /**
   * 弹出层 可以通过 chartConfig.extra.tooltip.showBox 判断是否显示提示框
   * @param {*} e 事件对象
   * @returns 必须返回个字符串
   */
  touchColumn = e => {
    if (this.props.onTouchChart === null) {
      return
    }
    canvaColumn.showToolTip(e, {
      formatter: (item, category) => {
        return this.props.onTouchChart(item, category)
      },
    })
  }
  // 渲染页面
  render() {
    const {cWidth, cHeight} = this.state
    const {style, cavansId} = this.props
    const canvasProps = {
      width: cWidth + 'px',
      height: cHeight + 'px',
      ...style,
    }
    return (
      
        图表系统
        
      
    )
  }
}

页面使用

import {Component} from 'react'
import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'

import MyChart from '../../../components/MyChart/MyChart'
import './chart.less'

export default class CateDetail extends Component {
  // 初始化页面的属性与状态
  constructor() {
    super(...arguments)

    this.state = {
      categories: ['12月', '11月', '10月', '9月', '8月', '7月', '6月', '5月', '4月', '3月', '2月', '1月'],
      series: [
        {
          color: '#727a64',
          textColor: '#727a64',
          name: '目标值',
          data: [4888, 2345, 3465, 4888, 1235, 2222, 2996, 2345, 3465, 2101, 3328, 10000],
        },
      ],
    }
  }

  // 生命周期回调—监听页面加载
  componentWillMount() {
  }

  // 生命周期回调—监听页面初次渲染完成
  componentDidMount() {}

  // 页面是否需要更新
  shouldComponentUpdate() {
    return true
  }

  // 页面即将更新
  // eslint-disable-next-line no-unused-vars
  componentWillUpdate(nextProps, nextState) {}

  // 页面更新完毕
  componentDidUpdate() {}

  // 生命周期回调—监听页面卸载
  componentWillUnmount() {}

  // 生命周期回调-监听页面显示
  componentDidShow() {}

  // 生命周期回调-监听页面隐藏
  componentDidHide() {}

  // 错误监听函数
  componentDidCatchError() {}
  handleTouchChart = (item,category)=>{
      console.log(item)
      console.log(category)
      return `${category}${item.name}：${item.data}`
  }
  // 渲染页面
  render() {
    const {categories, series} = this.state
    const config = {
      type: 'bar',
      fontColor: '#727a64',
      xAxis: {
        min: 0, // 最小值为0
        max: 12000, // 最大值为12000 最大值最好自已计算值 不然的话x轴会出现小数点
        boundaryGap: true,
      },
      extra: {
        bar: {
          type: 'group', // 柱状图类型
          width: 15, // 柱状图每个柱子的图形宽度
          seriesGap: 10, // 多series每个柱子之间的间距
          categoryGap: 4, // 每个category点位（X轴点）柱子组之间的间距
          barBorderRadius: [10, 10, 10, 10],
        },
        tooltip: {
          showBox: true
        }
      },
    }
    return (
      
        
      
    )
  }
}

github 地址

https://gitee.com/kk_9607/taro-applet.git