mini_program_echarts

uni-app开发微信小程序引入Echarts

Demo 线上地址自行前往github下载即可。

1、uni-ec-canvas文件夹复制到pages同级

<template>  
    <view>  
        <view style='width: 100%;height: 400rpx;'> 
        <uni-ec-canvas  
            class="uni-ec-canvas"  
            id="line-chart"  
            ref="canvas"  
            canvas-id="lazy-load-chart"  
            :ec="ec"  
        ></uni-ec-canvas>  
        </view> 
    </view>  
</template>  
<script>  
import uniEcCanvas from '../../uni-ec-canvas/uni-ec-canvas.vue'  
import * as echarts from '../../uni-ec-canvas/echarts'  
export default {  
    data() {  
        return {  
            ec: {  
                lazyLoad:true,  
                option: {  
                    color: ['#3398DB'],  
                    tooltip: {  
                        trigger: 'axis',  
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效  
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
                        }  
                    },  
                    grid: {  
                        left: '3%',  
                        right: '4%',  
                        bottom: '3%',  
                        containLabel: true  
                    },  
                    xAxis: [  
                        {  
                            type: 'category',  
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
                            axisTick: {  
                                alignWithLabel: true  
                            }  
                        }  
                    ],  
                    yAxis: [  
                        {  
                            type: 'value'  
                        }  
                    ],  
                    series: [  
                        {  
                            name: '直接访问',  
                            type: 'bar',  
                            barWidth: '60%',  
                            data: [10, 52, 200, 334, 390, 330, 220]  
                        }  
                    ]  
                }  
            }  
        }     
    },  
    onReady () {  
        setTimeout(()=>{  
            console.log(this)  
            console.log(this.$refs)  
            this.$refs['canvas'].init()  
            console.log('延迟加载了')  
        },1000) // 两秒之后延迟加载  
    
        setTimeout(()=>{  
            //this.ec.option.series[0].data = [120, 132, 101, 134, 90, 230, 210]  
            // this.ec.option.xAxis[0].data = [1,2,3,4,5,6,7]  
            // 如果是data数组内的数据 记得用$set  
            console.log('数据更改了')  
        },2000)  
    },  
    components: {  
        uniEcCanvas  
    }  
}  
</script>

3、本示例的echarts.js文件是在ECharts 在线定制网页选取的简易柱状图相关js文件，仅按该文档内options配置可用，如有非柱状图需求请自行前往定制页重新选取echarts.js文件进行替换。

齐活儿 .... over

Hold The Faith . Forever !

We can find a way .
Someday .
A path to a new world
And maybe
Maybe its just the begnning after all