taro 项目中接入EChart图表库

一下子就醒了

于 2021-04-01 16:12:56 发布

阅读量1.8k

点赞数 2

分类专栏： Taro 文章标签： taro echarts 小程序图表

本文链接：https://blog.csdn.net/weixin_42442713/article/details/115376597

版权

本文介绍了如何在Taro项目中接入ECharts图表库，通过使用物料市场提供的封装组件以及自定义封装折线图组件的方式，展示了在小程序中使用ECharts的步骤，并给出了实际效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用物料市场提供的封装好的组件

https://taro-ext.jd.com/plugin/view/5f648e4c0dd8313026e0942d

npm i echarts-taro3-react   or yarn add echarts-taro3-react

2、使用、封装折线图组件：

lineChart.js

import React, { Component } from 'react'
import { View } from '@tarojs/components'
import { EChart } from 'echarts-taro3-react'
import PropTypes from 'prop-types'
import './index.less'

/**
|--------------------------------------------------
| #Component
| 折线图组件
|--------------------------------------------------
*/

class Line extends Component {
  static defaultProps = {
    xData: [],
    yData: [],
  }

  componentDidMount() {
    setTimeout(() => {
      this.refresh()
    }, 10)

    // this.props.onRef(this)
  }

  refresh() {
    const { xData, yData } = this.props
    // 更多关于option的参数配置参考Echart

最低0.47元/天解锁文章