The current repo belongs to Paused status, and some functions are restricted. For details, please refer to the description of repo status
4 Star 6 Fork 1

Eyelly Wu / taro-echarts
Paused

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Taro-Echarts

适用于Taro项目的ECharts图表组件,基于项目echarts-for-weixin封装

安装

npm i -S taro-echarts

配置

修改Taro项目的配置config/index

  1. copy
copy: {
  patterns: [
    // 需添加如下配置
    {
      from: 'node_modules/taro-echarts/components/ec-canvas/',
      to: 'dist/npm/taro-echarts/components/ec-canvas',
      ignore: ['ec-canvas.js', 'wx-canvas.js']
    }
  ],
  options: {
  }
}
  1. h5.esnextModules
h5: {
  // 需添加如下配置
  esnextModules: ['taro-echarts'],
  ...
}

使用

引入

import Chart from 'taro-echarts'

示例代码:以折线图为例

<Chart
  option={{
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  }}
/>

API

属性名 说明 类型 默认值
width 图表的宽 string 100%
height 图表的高 string 200px
option ECharts的option配置 object -
onBeforeSetOption 在echarts首次调用setOption前执行该方法,该方法会返回echarts的引用,可以在该方法中注册地图注册主题 (echarts)=>void -
customStyle 自定义容器样式 string -
loading 是否显示loading效果 bool false
loadingConf loading效果的样式配置 object -

支持度

h5 微信小程序 ReactNative 支付宝小程序 百度小程序 字节跳动小程序
× × × ×

微信小程序获取图片示例代码

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import Chart from 'taro-echarts'

export default class Page extends Component {

  setChartRef = node => this.chartRef = node

  preview = async () => {
    // 获取到临时图片地址
    const path = await this.chartRef.getImagePath()
    Taro.previewImage({ current: path, urls: [path] })
  }

  render() {
    return (
      <View>
        <Button onClick={this.preview}>查看生成图片</Button>
        <Chart
          ref={this.setChartRef}
          loadingConf={{ textColor: 123 }}
          option={{
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
            }]
          }}
        />
      </View>
    )
  }
}

License

MIT

About

适用于Taro项目的ECharts图表组件,欢迎各位提PR哟 expand collapse
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/eyelly/taro-echarts.git
git@gitee.com:eyelly/taro-echarts.git
eyelly
taro-echarts
taro-echarts
master

Search