qf-taro-echarts v1.0.132
Qf-Taro-Echarts
适用于Taro项目的ECharts图表组件,基于项目echarts-for-weixin封装
安装
npm i -S qf-taro-echarts
配置
修改Taro项目的配置config/index
copy: {
patterns: [
// 需添加如下配置
{
from: 'node_modules/qf-taro-echarts/components/ec-canvas/',
to: 'dist/npm/qf-taro-echarts/components/ec-canvas'
}
],
options: {
ignore: ['*.js']
}
}
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 | 图表的宽 | 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 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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago