1.0.132 • Published 4 years ago

qf-taro-echarts v1.0.132

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Qf-Taro-Echarts

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

安装

npm i -S qf-taro-echarts

配置

修改Taro项目的配置config/index

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

使用

引入

import Echarts from 'qf-taro-echarts'

示例代码:以折线图为例

<Echarts
  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图表的宽string100%
height图表的高string200px
optionECharts的option配置object-
onBeforeSetOption在echarts首次调用setOption前执行该方法,该方法会返回echarts的引用,可以在该方法中注册地图注册主题(echarts)=>void-
customStyle自定义容器样式string-
loading是否显示loading效果boolfalse
loadingConfloading效果的样式配置object-

支持度

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

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

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import Echarts from 'qf-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>
        <Echarts
          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

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.132

4 years ago

1.0.131

4 years ago

1.0.130

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.70

4 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.78

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.40

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.49

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.101

4 years ago

1.0.100

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.109

4 years ago

1.0.108

4 years ago

1.0.103

4 years ago

1.0.102

4 years ago

1.0.105

4 years ago

1.0.104

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.121

4 years ago

1.0.120

4 years ago

1.0.123

4 years ago

1.0.122

4 years ago

1.0.129

4 years ago

1.0.128

4 years ago

1.0.125

4 years ago

1.0.124

4 years ago

1.0.127

4 years ago

1.0.126

4 years ago

1.0.80

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.89

4 years ago

1.0.110

4 years ago

1.0.112

4 years ago

1.0.111

4 years ago

1.0.118

4 years ago

1.0.117

4 years ago

1.0.119

4 years ago

1.0.114

4 years ago

1.0.113

4 years ago

1.0.116

4 years ago

1.0.115

4 years ago

1.0.91

4 years ago

1.0.90

4 years ago

1.0.95

4 years ago

1.0.94

4 years ago

1.0.93

4 years ago

1.0.92

4 years ago

1.0.99

4 years ago

1.0.98

4 years ago

1.0.97

4 years ago

1.0.96

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.19

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.9

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago