微信小程序引入echarts图表

本文详细介绍如何在微信小程序中引入并使用ECharts图表,包括环境准备、组件下载、页面配置及代码实现,助你快速掌握小程序图表展示技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序引入echarts图表

ECharts 和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本,ECharts图表技术在国内应该是最好的了,能结合到小程序应用真的是极好。

准备:小程序开发环境,下载ECharts组件,gitHub地址:ecomfe/echarts-for-weixin

要求小程序基础库:1.9.91(基本不用考虑版本兼容问题)

操作过程:把ec-canvas拷贝到项目根目录。

对应页面json文件引入组件:

{
  "navigationBarTitleText": "客户报表",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

对应页面js文件:

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = [1,4,6,8]
var list1 = [90,30,490,39]
 
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
 
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['客户']
    },
    grid: {
      left: '1%',
      right: '30rpx',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list,
      name: '月份',
      nameGap: 2,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      name:'数量'
    },
    series: [
      {
        name: '客户',
        type: 'line',
        stack: '总量',
        data: list1
      }
    ]
  };
 
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

对应页面wxml文件:

<view class="container">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}">
  </ec-canvas>
</view>

对应页面wxss文件:

.container{
  position: relative;
  width: 90%;
  height: 500rpx;
  margin:0 auto;
}
ec-canvas {
  position: relative;
  width: 300rpx;
  height: 400rpx;
}

至此,ECharts图表设置成功,option对象信息可以根据ECharts提供的文档进行设置,非常多。

文档一层层对应,很清晰,需要设置什么就找相应的设置即可,option的设置和网页都是一致的。

在开发的过程中,我需要线型图表可以在小程序左右滑动,一屏装不下,demo提供了不阻塞滑动,但只有开发工具上可以滑动,放到真机就不能滑动了,这个有点尴尬。有哪位大神解决这个图表真机上可以滑动的告知一下(抱拳)

ECharts小程序示例

热爱编程的您可复制链接交流:【小程序+云开发】(非技术勿扰)
分享不易,点赞关注给作者一点点鼓励,谢谢您!

下一篇:微信小程序给echarts图表动态赋值

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值