uniapp微信小程序接入echarts（踩坑无数）

本文介绍: 导入到自己的项目会多出以下文件夹，真正有用的是红框内的三个文件，可以将其移入到components下，具体哪个页面/组件使用了就引入。需要注意的是，直接下载那个插件，里面内置的echarts.js 源文件2mb太大了，但是一个项目就用折线图、饼图，就可以去官网定制下载。这里我是把uni–ec–canvas 移入到components 文件夹下了。因为本次小程序开发使用到了echarts 发现接入有点麻烦，记录一下。使用了uniapp 插件市场的。不然插件会报错有的方法不支持。那个版本需要选5.0以下的。

微信 开发者 工具 效果图

在这里插入图片描述

&lt;template&gt;
	&lt;uni-ec-canvas
            class="uni-ec-canvas"
            id="line-chart"
            canvas-id="multi-charts-line"
            :ec="ringOption"
          /&gt;
&lt;/template&gt;


<script&gt;
	import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas.vue";
	components: {
	   	uniEcCanvas,
	 },
	 data() {
	 	return {
			ringOption: {
		        option: {
		        //配置项是写在option属性下  和echarts配置一样 参考其官网就行
		          color: ["#E25244", "#3A81F6", "#DEAC8A", "#6AC5DD", "#5756CE"],
		          tooltip: {
		            trigger: "item",
		            position: "top",
		          },
		          series: [
		            {
		              name: "客户",
		              type: "pie",
		              radius: ["50%", "70%"],
		              avoidLabelOverlap: false,
		              label: {
		                show: false,
		                position: "center",
		              },
		              labelLine: {
		                show: false,
		              },
		              //这里是数据存放的地方
		              data: [],
		            },
		          ],
        },
      },
		}
	 }
</scipt>