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

最新推荐文章于 2025-04-29 16:59:08 发布

code袁

最新推荐文章于 2025-04-29 16:59:08 发布

阅读量1.9k

点赞数 10

分类专栏：微信小程序开发文章标签：小程序 echarts 前端小程序引入echarts

本文链接：https://blog.csdn.net/qq_48164590/article/details/144828867

版权

微信小程序开发专栏收录该内容

38 篇文章

订阅专栏

在这里插入图片描述

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

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

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

在这里插入图片描述

文章目录

一、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);
}
}
})