如何在uni-app中使用echarts（泪的教训，保证可用，不能用来打我，保姆级教程）

线上最终实现图：

项目背景：uni-app+vue2+uv-ui+echarts
每步都有坑，跟着看完

实现过程

1. 使用了uniapp插件市场的 echarts-for-wx插件，以下两种方式均可
   
2. 下载后将以下文件拷贝到项目的components下

• 如果是zip下载，解压后就是这个uni-ec-canvas
  
• 如果是hbuildX插件，在项目的根目录下可以找到js_sdk，找到里面的uni-ec-canvas
  

3. 建立一个CustomEchart组件，例如：（以下是我的一个canvas的options设置，一个饼图的配置，可以参考我的，如果需要修改，就把option改为自己需要的）

// CustomEchart.vue
<template>
  <view class="echart-main">
    <uni-ec-canvas
      id="mychartDom"
      canvas-id="mychart-bar"
      :ec="ec"
      ref="canvas"
      canvasHeight="170"
      class="canvas_size"
    ></uni-ec-canvas>
  </view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.js'
let chart = null;
export default {
  components: {
    uniEcCanvas
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  mounted() {
  	this.$refs.canvas.init(this.initChart)
  },
  methods: {
    initChart(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
      })
      canvas.setChart(chart)
      var batteryColor = this.value < 30 ? '#ED4444' : '#37D283'
      let option = {
        series: [
          {
            name: 'Background',
            type: 'pie',
            radius: ['70%', '90%'], // 内外半径，形成环形
            startAngle: 90, // 设置起始角度到顶部
            silent: true,  // 禁用交互和动画
            animation: false,
            label: {
              show: false
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#EBEDF0' // 背景部分的颜色
                }
              }
            ]
          },
          {
            name: 'Battery',
            type: 'pie',
            radius: ['70%', '90%'], // 内外半径，形成环形
            startAngle: 90, // 设置起始角度到顶部
            silent: true,  // 禁用交互和动画
            label: {
              show: false
            },
            data: [
              {
                value: this.value,
                itemStyle: {
                    color: batteryColor, // 电量部分的颜色
                    borderRadius: 20 // 圆角弧形效果
                }
              },
              {
                value: 100 - this.value,
                itemStyle: {
                    color: 'transparent' // 透明的剩余部分
                }
              }
            ]
          }
        ],
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                  text: this.value + '%', // 中间显示的文字
                  fill: '#3E4A54', // 文字颜色与电量颜色一致
                  fontSize: 20,
                  fontWeight: 'bold'
              }
            }
          ]
        }
      }
      chart.setOption(option)
      return chart
    }
  },
}
</script>

<style land="scss" scoped>
.echart-main {
  width: 50%;
  display: inline-block;
}
</style>

4. 敲重点：此时你会发现canvas对象组装完成了，打开命令行发现有dom，也不报错，但就是没有画面，（很多博客介绍到这里就结束了，小白踩坑老半天才发现）因为没有给canvas设置宽高，所以打开刚才拷贝进去的文件，设置width和height
   
5. 如果是页面中使用那么到此就结束了，因为我的是放在modal中使用的，所以需要额外的一些配置，否则就可能会有如下报错：
   原因：这是因为uni.createSelectorQuery() 时未能正确选择到 canvas 元素，我猜测是因为modal虽然未打开，但是echarts中的代码已经在加载，执行了mounted方法中的init()，所以我们需要控制echarts的展示时机和init()执行时机
   
   解决办法：
   通过v-if决定是否渲染echarts元素，通过一个props，showCanvas来控制，在打开modal的方法中将showCanvas设置为true

// pages.vue
data() {
	return {
		showCanvas: false
	}
},
methods() {
	showBatteryDetail() {
	   this.$refs.modal.open()
	   this.showCanvas = true
	 }
}


<uv-modal ref="modal" title="门锁电量" confirmText="我知道了">
  <viewclass="slot-content">
    电池2电量低，请及时充电！
    <view>
      <CustomEchart :showCanvas="showCanvas" :value="90"></CustomEchart>
      <CustomEchart :showCanvas="showCanvas" :value="25"></CustomEchart>
    </view>
  </view>
</uv-modal>

CustomEchart.vue组件中改为

6. 因为微信小程序打包后体积限制在4M之内，但是下载下来的js文件占了3M+，这是肯定不行的，于是可以在echarts官网定制一个echart.js包，替换这个echarts.js文件。

在官网选择项目使用到的图表类型
⚠️注意：不要选择勾选压缩包！！！不要勾选，否则还会有新的报错，相关github的issue


解决办法，不勾选下载压缩版，下载的charts.js大概是1M+，可以手动压缩，使用这个网站，压缩后把内容在复制进去，可以达到400k+

步步是坑，终于圆满结束，完结撒花！！！