|
|
@@ -2,19 +2,6 @@ import Taro, { Component } from '@tarojs/taro'
|
|
2
|
2
|
import echarts from '../ec-canvas/echarts'
|
|
3
|
3
|
import './style.scss'
|
|
4
|
4
|
|
|
5
|
|
-function initChart(options, callback) {
|
|
6
|
|
- return function (canvas, width, height) {
|
|
7
|
|
- const chart = echarts.init(canvas, null, {
|
|
8
|
|
- width: width,
|
|
9
|
|
- height: height
|
|
10
|
|
- });
|
|
11
|
|
- canvas.setChart(chart);
|
|
12
|
|
- chart.setOption(options);
|
|
13
|
|
- callback && callback(chart);
|
|
14
|
|
- return chart;
|
|
15
|
|
- }
|
|
16
|
|
-}
|
|
17
|
|
-
|
|
18
|
5
|
function createLineOptions(source = []) {
|
|
19
|
6
|
const colorWithOpacity = op => `rgba(187,156,121, ${op})`
|
|
20
|
7
|
|
|
|
@@ -106,51 +93,56 @@ export default class LineChart extends Component {
|
|
106
|
93
|
chart = null;
|
|
107
|
94
|
ecComponent = null
|
|
108
|
95
|
|
|
109
|
|
- state = {
|
|
110
|
|
- ec: { lazyLoad: true },
|
|
111
|
|
- isDisposed: false,
|
|
112
|
|
- }
|
|
113
|
|
-
|
|
114
|
|
- componentDidShow() {
|
|
115
|
|
- this.setState({ isDisposed: false })
|
|
116
|
|
- }
|
|
117
|
|
-
|
|
118
|
|
- componentDidHide() {
|
|
119
|
|
- this.setState({ isDisposed: true })
|
|
120
|
|
- }
|
|
|
96
|
+ state = {}
|
|
121
|
97
|
|
|
122
|
98
|
componentDidMount() {
|
|
123
|
|
- this.ecComponent = this.$scope.selectComponent(`#${this.props.lid}`)
|
|
|
99
|
+ this.ecComponent = this.$scope.selectComponent('#mychart-dom-bar')
|
|
124
|
100
|
this.init(this.props)
|
|
125
|
101
|
}
|
|
126
|
102
|
|
|
127
|
103
|
componentWillReceiveProps(nextProps) {
|
|
128
|
|
- // 简单优化, 不显示的组件不更新
|
|
129
|
|
- // 但是有个 bug 。如果此时有 props 更新, 会导致页面绘制的数据错误
|
|
130
|
|
- if (this.state.isDisposed) return
|
|
131
|
|
-
|
|
132
|
|
- // 简单的性能优化, 只有数据改变了才重新绘图
|
|
133
|
|
- if (JSON.stringify(nextProps.source) != JSON.stringify(this.props.source)) {
|
|
134
|
|
- this.init(nextProps)
|
|
135
|
|
- }
|
|
|
104
|
+ this.resetData(nextProps)
|
|
136
|
105
|
}
|
|
137
|
106
|
|
|
138
|
107
|
init = (props) => {
|
|
139
|
|
- const tk = setTimeout(() => {
|
|
140
|
|
- if (this.ecComponent && props.source && props.source.length) {
|
|
141
|
|
- const options = createLineOptions(props.source)
|
|
142
|
|
- this.ecComponent.init(initChart(options, chart => (this.chart = chart)))
|
|
|
108
|
+ if (!this.ecComponent) {
|
|
|
109
|
+ console.log('-==-------no ecComponent---------')
|
|
|
110
|
+ return
|
|
|
111
|
+ }
|
|
|
112
|
+
|
|
|
113
|
+ let options;
|
|
|
114
|
+ if (props.source && props.source.length) {
|
|
|
115
|
+ options = createLineOptions(props.source)
|
|
|
116
|
+ }
|
|
|
117
|
+
|
|
|
118
|
+ this.ecComponent.init((canvas, width, height) => {
|
|
|
119
|
+ const chart = echarts.init(canvas, null, { width, height });
|
|
|
120
|
+ canvas.setChart(chart);
|
|
|
121
|
+
|
|
|
122
|
+ if (options) {
|
|
|
123
|
+ chart.setOption(options);
|
|
143
|
124
|
}
|
|
144
|
125
|
|
|
145
|
|
- clearTimeout(tk)
|
|
146
|
|
- }, 500)
|
|
|
126
|
+ this.chart = chart
|
|
|
127
|
+ return chart;
|
|
|
128
|
+ })
|
|
|
129
|
+ }
|
|
|
130
|
+
|
|
|
131
|
+ resetData(props) {
|
|
|
132
|
+ // console.log('----------------->', props)
|
|
|
133
|
+ if (this.chart) {
|
|
|
134
|
+ const options = createLineOptions(props.source)
|
|
|
135
|
+ this.chart.setOption(options);
|
|
|
136
|
+ }
|
|
147
|
137
|
}
|
|
148
|
138
|
|
|
149
|
139
|
render() {
|
|
|
140
|
+ const ec = { lazyLoad: true }
|
|
|
141
|
+
|
|
150
|
142
|
return (
|
|
151
|
143
|
<View style="width:100vw;height:480rpx;position: relative;">
|
|
152
|
144
|
<View className="map-container">
|
|
153
|
|
- <ec-canvas id={this.props.lid} ec={this.state.ec}></ec-canvas>
|
|
|
145
|
+ <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec={ec}></ec-canvas>
|
|
154
|
146
|
</View>
|
|
155
|
147
|
</View>
|
|
156
|
148
|
)
|
