导航
导航
文章目录󰁋
  1. 一、使用echarts-for-weixin
  2. 二、封装一个刷新图表的组件
  3. 三、使用问题查询

Taro中使用Echart小结

一、使用echarts-for-weixin

  1. 下载 https://github.com/ecomfe/echarts-for-weixin 下的 ec-canvas 文件到项目 components

  2. 排除Taro编译选项 config/index.js配置文件中找到如下

1
2
3
4
...
compile: {
exclude: ['src/components/ec-canvas/echarts.js']
}
  1. 定制echart文件大小可减少小程序构建包的大小。然后替换src/components/ec-canvas/echarts.js文件即可

https://www.echartsjs.com/zh/builder.html

二、封装一个刷新图表的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// src/compoments/Chart.js

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import PropTypes from 'prop-types'
import _isEqual from 'lodash/isEqual.js'
import Nerv from 'nervjs'
import * as echarts from '../ec-canvas/echarts'


let Taro_ = Taro
if (process.env.TARO_ENV === 'h5') {
Taro_ = require('@tarojs/taro-h5').default
}

const commonFunc = (_this, chart) => {
const { option, loading, loadingConf } = _this.props
_this.beforeSetOption()
_this.chartInstance = chart
if (loading) {
_this.chartInstance.showLoading('default', loadingConf)
} else {
_this.chartInstance.setOption(option)
}
}

const initChart = ((type) => {
switch (type) {
case 'h5':
return (_this) => {
const { chartId } = _this.props
let node = document.getElementById(chartId)
let chart = echarts.init(node)
commonFunc(_this, chart)
}
case 'weapp':
return (_this) => {
_this.chartRef.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
commonFunc(_this, chart)
return chart
})
}
}
})(process.env.TARO_ENV)

export default class Chart extends Taro_.Component {

config = {
component: true,
usingComponents: {
'ec-canvas': '../ec-canvas/ec-canvas'
}
}

componentDidMount() {
initChart(this)
}

componentWillReceiveProps(nextProps) {
const { option: newOption } = nextProps
if (!_isEqual(nextProps, this.props)) {
this.refreshChart(newOption)
}
}

shouldComponentUpdate(nextProps) {
return !_isEqual(this.props, nextProps)
}

refreshChart = (newOption) => {
const { option, loading, loadingConf } = this.props
if (this.chartInstance) {
if (loading) {
this.chartInstance.showLoading('default', loadingConf)
} else {
this.chartInstance.hideLoading()
this.chartInstance.setOption(newOption || option, true)
}
}
}

beforeSetOption = () => {
const { onBeforeSetOption } = this.props
onBeforeSetOption && onBeforeSetOption(echarts)
}

setChartRef = node => this.chartRef = node

render() {
const { chartId, width, height, customStyle } = this.props
let chartContainerStyle = `${customStyle}width:${width};height:${height};`

return (
<View style={chartContainerStyle}>
{
{
'h5': <View style={`width:${width};height:${height};`} id={chartId} />,
'weapp': <ec-canvas ref={this.setChartRef} canvasId={chartId} ec={{ lazyLoad: false,disableTouch: true }} />
}[process.env.TARO_ENV]
}
</View>
)
}
}

Chart.propTypes = {
chartId: PropTypes.string.isRequired,
width: PropTypes.string,
height: PropTypes.string,
customStyle: PropTypes.string,
loading: PropTypes.bool,
loadingConf: PropTypes.object,
option: PropTypes.object.isRequired,
onBeforeSetOption: PropTypes.func
}

Chart.defaultProps = {
width: '100%',
height: '200px',
customStyle: '',
loading: null,
loadingConf: null,
onBeforeSetOption: null
}

使用例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 <Chart
chartId='chart-heartRate-line'
height={'400px'}
onBeforeSetOption={echarts=>{
console.log(echarts)
}}
option={{
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross'
// },
// triggerOn: 'click',
// // @FIX tooltip到了容器边缘不改变位置。 给 position return 百分数数组无效,返回[number,number]是有效果的
// position: function (pos, params, dom, rect, size) {
// // 鼠标在左侧,tooltip 鼠标在右侧
// if (pos[0] < size.viewSize[0] / 2) {
// return [pos[0] + 10, pos[1] - 30];
// } else {
// // 鼠标在右侧,tooltip 鼠标在左侧
// return [pos[0] - size.contentSize[0] - 15, pos[1] - 15];
// }
// }
// },
animation: false,
legend: {
data:[''],
y: 'top',
x: 'center',
padding: 10,
show: true,
},
xAxis: {
type: 'category',
show : true,
splitLine: {
show: false
},
boundaryGap: false,
nameTextStyle: {
color: '#333'
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
fontSize: '15'
},
formatter: '{value}'
},
data: historyData ? historyData.map(v=>weeks[v.weekDay-1]) : []
},
yAxis: {
type: 'value',
axisLine:{
show: false
},
axisTick:{ //y轴刻度线
"show":false
},
splitLine: { //网格线
"show": false
},
axisLabel: {
show: true,
textStyle: {
fontSize: '15'
},
formatter: '{value}'
},
axisPointer: {
snap: true
}
},
series : [
{
name:'安静心率',
type:'line',
itemStyle:{
normal:{
color: '#B0EA32',
}
},
label:{
normal:{
show:true, //显示数字
position: 'top' //这里可以自己选择位置
}
},
data: historyData ? historyData.map(v=>v.heartRate) : []
}
]
}}
/>

三、使用问题查询

https://github.com/ecomfe/echarts-for-weixin/issues

支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫