当前位置：首页 > news >正文

小程序中引入echarts（保姆级教程）

news 2025/8/6 9:28:38

在这里插入图片描述

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

在这里插入图片描述

文章目录

- - 一、echarts的简介
  - 二、下载
  - 三、定制图标
  - 四、引入小程序配置
  - 四、引入小程序页面
  - 🎉写在最后

一、echarts的简介

是一个基于JS的数据可视化图标库，它提供了直观，生动，可交互，可个性定制的数据可视化图表

二、下载

echarts-for-weixin下载地址

在这里插入图片描述

在下载之前看看自己下载的版本号，后面有用

在这里插入图片描述

三、定制图标

1、echarts官网
在这里插入图片描述

在这里插入图片描述

当你看到ok时说明下载好了

在这里插入图片描述

四、引入小程序配置

将下载的文件解压后将其中的ec-canvas中的内容放到小程序components中，然后用在线定制的echarts.min.js换掉原先的echarts.js

在这里插入图片描述

在自己需要的页面中引入

在这里插入图片描述

四、引入小程序页面

1.logs.wxml

<view class="main"><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas></view></view>

2.logs.wxss

  .main {height: 500rpx;}ec-canvas {width: 100%;height: 100%;}

1=3.logs.js

import * as echarts from "../../components/echarts/echarts.min.js"
Page({
onLoad(){this.initChart()},initChart: function () {this.echartsComponentline = this.selectComponent('#mychart-dom-line');this.echartsComponentline.init((canvas, width, height) => {// 初始化图表const chartline = echarts.init(canvas, null, {width: width,height: height});this.setChartOptionline(chartline);return chartline;});},canvas.setChart(chart);setChartOptionline: function (chart) {var option = {backgroundColor: 'rgba(255,255,255,0.8)',tooltip: {trigger: 'item'},legend: {//显示图例show: true,top: '5%',left: 'center'},series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '60%'],//位置radius: ['20%', '30%'],//圈大小data: [{//每一项value: 3,name: '数字农业 3个'}, {value: 2,name: '体育产业 2个'}, {value: 7,name: '乡村新业态 7个'}, {value: 3,name: '其他产业 3个'}]}]};chart.setOption(option);
}
}
})