uni小程序使用echarts

 1、推荐使用插件市场 echarts-for-wx 插件 小程序中几乎可以完美使用 用法和echarts用法一致

 

2、https://echarts.apache.org/zh/builder.html定制echarts的js文件，选择需要的图下载，生成文件放到上图：

3、使用

<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 '@/components/uni-ec-canvas/uni-ec-canvas.vue'
    import * as echarts from '@/components/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>

<style scoped>
.uni-ec-canvas{
    width: 370rpx;
    height: 750rpx;
}
</style>