效果圖.png

注：報錯不知道啥情況黍氮，不影響使用。

mini_program_echarts

uni-app開發(fā)微信小程序引入Echarts

Demo 線上地址 自行前往github下載即可彤路。

1秕硝、uni-ec-canvas文件夾復(fù)制到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: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效  
                            type: 'shadow'        // 默認(rèn)為直線洲尊，可選為：'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數(shù)組內(nèi)的數(shù)據(jù) 記得用$set  
            console.log('數(shù)據(jù)更改了')  
        },2000)  
    },  
    components: {  
        uniEcCanvas  
    }  
}  
</script>  

3远豺、本示例的echarts.js文件是在ECharts 在線定制網(wǎng)頁選取的簡易柱狀圖相關(guān)js文件，僅按該文檔內(nèi)options配置可用坞嘀，如有非柱狀圖需求 請自行前往定制頁重新選取echarts.js文件進(jìn)行替換躯护。

齊活兒 .... 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