uniapp 引入插件市场的echart插件，使用指南！+踩坑记录！！血泪史！！！

此文章适用于微信小程序中，在uniapp做的小程序中使用echarts

插件地址：echarts-for-wx - DCloud 插件市场

 

 插件网页往下翻有详细的使用步骤，这里简短的贴上几张图片

 

 以下是我 项目中的使用情况，分享给大家：

1.一键导入完插件后，项目根目录的文件夹js_sdk,将其中的uni-ec-canvas文件夹赋值到项目根目录的components中

 

 2.自定义一个组件

 3.使用组件

//html

			
		


//js
	import pieChart from './components/circleEchat.vue'//这里路径是你自定义组件的放的位置

data() {
			return {
				valueData: 10,
			}

	components: { pieChart }

 效果图：（小demo不要嫌丑hahaha）

  Echarts各式各样的定制化图表
 

Made A Pie 复刻Make A Pie 地址
Echarts社区makeapie 复刻Make A Pie 地址
MCChart 地址
PPChart 地址
ISQQW 地址
chartsdev 复刻Make A Pie 地址

文件太大怎么办？

本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 echarts.min.js 压缩版本。或从官网下载压缩版本

发布时，如果对文件大小要求更高，可以在 ECharts 在线定制网页下载仅包含必要组件的包，并且选择压缩。

下载的文件放在 uni-ec-canvas/echarts.js，注意一定需要重命名为 echarts.js。

下载了自定义最新版本的js文件后，发现样式不能用并且报错 TypeErreor: el.addEventListener is not a function

解决办法：

 还必须要用5.1.2版本的echarts 。因为小程序echarts插件文档 v2.1.1 默认是5.1.2版本。

官网上最新的为5.3.1版本 不匹配，小程序插件太久没更新了吧

解决办法来源于这里

23-4-12 更新------

图表画好了以后，准备下载压缩后的echart.js文件发现就不显示图表了，目前没找到原因，不压缩的echart文件就可以正常运行。

经漫长的找bug过程，发现下载压缩的echarts.js版本5.0.0 到5.2.2版本 我都测试都是可以运行的，其他版本没有测试。

uniapp插件版本1.0.3  想要是用成功，版本的对应很重要， 还有就是如果不报错但还是不显示图表，有可能是css样式高度或宽度没给，上述代码中我给的宽度是百分比，有时候百分比不生效就给定值，就可以解决。如果没有图表生成的话，那就给uni-ec-canvas组件加上:force-use-old-canvas="true"