首页 前端知识 uniapp微信小程序接入echarts(踩坑无数)

uniapp微信小程序接入echarts(踩坑无数)

2024-03-03 11:03:15 前端知识 前端哥 984 313 我要收藏

微信开发者工具效果图

在这里插入图片描述
在这里插入图片描述

真机显示

在这里插入图片描述
在这里插入图片描述
因为本次小程序开发使用到了echarts 发现接入有点麻烦,记录一下

前置准备

使用了uniapp插件市场的 echarts-for-wx插件
在这里插入图片描述
导入到自己的项目会多出以下文件夹,真正有用的是红框内的三个文件,可以将其移入到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以下的在这里插入图片描述
不然插件会报错 有的方法不支持

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3156.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!