uniapp引入Echart踩坑记录

依赖

需要引用到依赖：uni-ui

引入插件：echart-for-weixin-miniprogram

下载地址：echart-for-weixin-miniprogram - DCloud 插件市场

支持

VUE2 和微信小程序

使用

第一步，下载插件的zip压缩包 解压后uni-ec-canvas文件夹复制到公共组件文件夹下面

踩坑1，只是挪到components文件下面还不够，依赖报错，又在@dcloudio/uni-ui/lib文件下复制进去一份，不然会报错缺少依赖

项目结构： 在uni-ec-canvas文件夹下有三个文件

        1.uni-ec-canvas.vue 这是用来调用的组件
        
        2.wx-canvas.js      这是关联的js
        
        3.echarts.js        这个就是装echart的，在echart网站上下载的模板可以覆盖安装他 以减少体积

引入

在页面中引入

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

<script>
// 此处将路径替换为你放置该组件的路径  
import uniEcCanvas from './uni-ec-canvas/ec-canvas.vue'  

export default{
    data(){
        return {
            ec:{
                option:{} //echart 配置项
            }
        }
    },
    components:{
        uniEcCanvas
    },
    methods:{
        inited(chart){
           console.log('图表初始化完毕')
           console.log('chart实例', chart)
        }
    }
}
</script>

我们在echart网站上调好配置后，直接将上面的option的代码复制放进ec.option中

踩坑2 .uni-ec-canvas容器一定要给他设置一个宽高，下面默认的是100% 然并卵 不显示 因为他的父容器可能宽高是0！

// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
.uni-ec-canvas{
    width:100%;
    height:100%;
    display:block;
}
</style>

over