#插件讨论# 【 echart-for-weixin-miniprogram - Incarnation 】微信开发工具可以预览 但没办法通过体验版预览

<template>  
                            <view>  
                       <uni-ec-canvas   
                          class="uni-ec-canvas"  
                          id="uni-ec-canvas"  
                          ref="uni-ec-canvas"  
                          canvas-id="uni-ec-canvas"  
                          @inited="inited"  
                          :ec="ec"  
                       ></uni-ec-canvas>  
                </view>   
</template>  

<script>  
    import uniEcCanvas from '../../../js_sdk/ec-canvas/echarts-for-wx-uniapp-1.0.2/uni-ec-canvas/uni-ec-canvas.vue'  

    const upColor = '#e54d42';  
    const upBorderColor = '#e54d42';  
    const downColor = '#39b54a';  
    const downBorderColor = '#39b54a';  

    function splitData(rawData) {  
        var categoryData = [];  
        var values = []  
        for (var i = 0; i < rawData.length; i++) {  
            categoryData.push(rawData[i].splice(0, 1)[0]);  
            values.push(rawData[i])  
        }  
        return {  
            categoryData: categoryData,  
            values: values  
        };  
    }  

    function calculateMA(dayCount, dataset) {  
        var result = [];  
        for (var i = 0, len = dataset.length; i < len; i++) {  
            if (i < dayCount) {  
                result.push('-');  
                continue;  
            }  
            var sum = 0;  
            for (var j = 0; j < dayCount; j++) {  
                sum += dataset[i - j][1];  
            }  
            result.push(sum / dayCount);  
        }  
        return result;  
    }  

    export default {  
        data() {  
            return {  
                index: -1,  
                picker: ['价格成本', '黄金分割', '策略3'],  
                iStatusBarHeight: 0,  
                iChartHeight: 0,  
                iHeaderHeight: 0,  
                isUpdate: false,  
                x: 0,  
                y: 0,  
                productName: '西麦食品',  
                productID: 'SZ002956',  
                ec:{  
                        option: {  
                            title: {  
                                show: false  
                            },  
                            tooltip: {  
                                show: false,  
                                trigger: 'axis',  
                                axisPointer: {  
                                    type: 'cross'  
                                }  
                            },  

                            grid: {  
                                top: '10%',  
                                left: '10%',  
                                right: '16px',  
                                bottom: '10%'  
                            },  
                            xAxis: {  
                                type: 'category',  
                                data: [],  
                                scale: true,  
                                boundaryGap: false,  
                                axisLine: {  
                                    onZero: false,  
                                    lineStyle: {  
                                        color: "#ccc"  
                                    }  
                                },  
                                axisLabel: {  
                                    color: "#ccc",  
                                    fontWeight: 100,  
                                    fontSize: 6  
                                },  
                                splitLine: {show: false},  
                                splitNumber: 20,  
                                min: 'dataMin',  
                                max: 'dataMax'  
                            },  
                            yAxis: {  
                                scale: true,  
                                axisLine: {  
                                    lineStyle: {  
                                        color: "#ccc"  
                                    }  
                                },  
                                axisLabel: {  
                                    color: "#ccc",  
                                    fontWeight: 100,  
                                    fontSize: 8  
                                },  
                                splitLine: {show: false},  
                            },  
                            dataZoom: [  
                                {  
                                    type: 'inside',  
                                    start: 50,  
                                    end: 100  
                                },  
                                {  
                                    show: true,  
                                    type: 'slider',  
                                    top: '90%',  
                                    start: 50,  
                                    end: 100  
                                }  
                            ],  
                            series: [  
                                {  
                                    name: '日K',  
                                    type: 'candlestick',  
                                    data: [],  
                                    symbol: 'none',  
                                    itemStyle: {  
                                        color: upColor,  
                                        color0: downColor,  
                                        borderColor: upBorderColor,  
                                        borderColor0: downBorderColor  
                                    },  
                                    emphasis: {  
                                        label: {  
                                            show: true  
                                        },  
                                        itemStyle: {  
                                            borderWidth: 5,  
                                            shadowColor: 'rgba(0, 0, 0, 0.5)',  
                                            shadowBlur: 10  
                                        }  
                                    },  
                                },  
                                {  
                                    name: 'MA',  
                                    type: 'line',  
                                    data: [],  
                                    symbol: 'none',  
                                    smooth: true,  
                                    lineStyle: {  
                                        opacity: 0.5  
                                    }  
                                },  

                            ]  
                        }  
                    }  

            }  
        },  
        onShow() {  

            uni.showLoading({  
                title: '加载中'  
            });  

            if (this.productID) {  
                uni.request({  
                    url: "http://fcapi.allin-sh.com/kLineData/symbol/" + this.productID,  
                    success: (res) => {  
                        const rawData = res.data.datas;  
                        const categoryData = [];  
                        const values = [];  

                        if (rawData && rawData.length > 0 ) {  
                            for (var i = 0; i < rawData.length; i++) {  
                                categoryData.push(rawData[i].splice(0, 1)[0]);  
                                values.push(rawData[i])  
                            }  

                            this.ec.option.xAxis.data = categoryData;  
                            this.ec.option.series[0].data = values;  
                            this.ec.option.series[1].data = calculateMA(5, values);  

                            uni.hideLoading();  
                        } else {  
                            uni.hideLoading();  

                            uni.showToast({  
                                title: '暂无数据',  
                                icon: 'none',  
                                success: function(){  
                                    setTimeout(function(){  
                                        uni.navigateBack({  
                                            delta: 1  
                                        });  
                                    }, 1000);  
                                }  
                            })  
                        }  

                    },  
                    fail: (res) => {  
                        console.log("数据获取失败")  
                        console.log(res);  

                    }  
                })  
            } else {  
                uni.hideLoading();  

                uni.showToast({  
                    title: '暂无数据',  
                    icon: 'none',  
                    success: function(){  
                        setTimeout(function(){  
                            uni.navigateBack({  
                                delta: 1  
                            });  
                        }, 1000);  
                    }  
                })  

            }  

        },  
        mounted() {  
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
            this.iChartHeight = this.iStatusBarHeight + 50;  

            let chartHeight;  
            uni.createSelectorQuery().select('#chart-section').boundingClientRect(data => {  
                if(data) {  
                    chartHeight = data.height;  
                } else {  
                    chartHeight = this.$refs['uni-ec-canvas'].$el.getBoundingClientRect().height;  
                }  
                this.iHeaderHeight = this.iStatusBarHeight + chartHeight + 50;  
            }).exec();  

        },  
        methods: {  
            goBack () {  
                uni.navigateBack({  
                    delta: 1  
                });  
            },  
            updatePriceCheck (e) {  
                this.isUpdate = e.detail.value  
            },  
            inited(curChart) {  

                this.$refs['uni-ec-canvas'].$curChart.setOption(this.ec.option);  
                this.$refs['uni-ec-canvas'].$curChart.on('datazoom', function(params){  
                    console.log(params);  
                });  
            }  

        },  
        components:{  
            uniEcCanvas  
        }  
    }  
</script>  

<style>  
.page {  
}  
.chart {  
    width: 100%;  
    height: 400px;  
}  

.uni-ec-canvas{  
    width:100%;  
    height:400rpx;  
    display:block;  
    margin-top: 50px;  
}  

.track-input {  
    border: solid 1px #8799a3;  
    border-radius: 3px;  
    padding: 3px;  
    height: 30px;  

}  
</style>