uniapp微信小程序接入echarts（踩坑无数）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序接入echarts（踩坑无数）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信开发者工具效果图

uniapp微信小程序接入echarts（踩坑无数）,echarts,uni-app,微信小程序

真机显示

uniapp微信小程序接入echarts（踩坑无数）,echarts,uni-app,微信小程序

因为本次小程序开发使用到了echarts 发现接入有点麻烦，记录一下

前置准备

使用了uniapp插件市场的 echarts-for-wx插件
uniapp微信小程序接入echarts（踩坑无数）,echarts,uni-app,微信小程序
导入到自己的项目会多出以下文件夹，真正有用的是红框内的三个文件，可以将其移入到components下，具体哪个页面/组件使用了就引入

页面引入使用

这里我是把uni-ec-canvas移入到components文件夹下了

<template>
	<uni-ec-canvas
            class="uni-ec-canvas"
            id="line-chart"
            canvas-id="multi-charts-line"
            :ec="ringOption"
          />
</template>


<script>
	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>

需要注意的是，直接下载那个插件，里面内置的echarts.js源文件2mb太大了，但是一个项目就用折线图、饼图，就可以去官网定制下载添加链接描述
那个版本需要选5.0以下的 uniapp微信小程序接入echarts（踩坑无数）,echarts,uni-app,微信小程序
不然插件会报错有的方法不支持文章来源地址https://www.toymoban.com/news/detail-519004.html