2025年微信小程序使用Echarts（异步请求数据）

科技前沿 • 2025-03-21 17:50 • 阅读 49

大家好，我是讯享网，很高兴认识大家。

一、下载ec-canvas插件
下载ec-canvas插件，官网地址：https://github.com/ecomfe/echarts-for-weixin，下载完成后将ec-canvas目录拷贝到自己项目下。
在这里插入图片描述
讯享网
二、在page下新建一个echarts目录，并在echarts.json中引入。

{ 
    "usingComponents": { 
    // 注意路径 "ec-canvas": "../../components/ec-canvas/ec-canvas" } }

讯享网

三、echarts.wxml

讯享网<view class="container"> <view class="chart"> <ec-canvas id="chartPie" canvas-id="chartPie" ec="{ 
    { ecChartPie }}"></ec-canvas> </view> </view>

四、echarts.js

// pages/echarts/exharts.js import * as echarts from '../../components/ec-canvas/echarts' var chartPie = null Page({ 
    / * 页面的初始数据 */ data: { 
    ecChartPie: { 
    onInit: function (canvas, width, height, dpr) { 
    chartPie = echarts.init(canvas, null, { 
    width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chartPie) return chartPie } }, }, onReady: function () { 
    let that = this that.getData() }, getData() { 
    let that = this // 请求数据 api.getOrderDetail(orderId).then(res => { 
    if (res.code == 200) { 
    // 第一个图表 that.initChartPie(res.chartData) } }) }, initChartPie(chartData) { 
    // 根据项目需要配置 chartPie.setOption({ 
    series: [ { 
    name: 'Access From', type: 'pie', radius: '50%', data: chartData } ] }) } })

2025年微信小程序使用Echarts（异步请求数据）

相关推荐