微信小程序使用Echarts(异步请求数据)

一、下载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
        }
      ]
    })
  }
})
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用Echarts获取数据并生成折线图的步骤如下: 1. 首先,下载Echarts插件并将其放入你的小程序项目中。你可以在GitHub上找到Echarts插件并将名称为ec-canvas的文件夹放入你的项目中。 2. 在小程序的json文件中引入Echarts组件。在你的echart.json文件中添加以下代码: ``` { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } ``` 3. 创建四个文件来实现Echarts使用。这四个文件分别是: - echart.wxml:用于定义Echarts图表的容器,可以在这里设置图表的大小和样式。 - echart.js:用于初始化Echarts图表,并将数据传递给图表进行渲染。 - echart.json:用于引入Echarts组件。 - echart.wxss:用于设置Echarts图表的样式。 4. 在echart.js文件中,你可以通过调用Echarts的API来获取数据并生成折线图。你可以根据你的需求来配置图表的样式、数据和交互功能。 通过以上步骤,你就可以在微信小程序使用Echarts获取数据并生成折线图了。Echarts具有丰富的功能和灵活的配置选项,可以满足各种数据可视化的需求。它广泛应用于数据可视化、商业分析和地理信息系统等领域。\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [微信小程序——Echarts使用(保姆式教程)](https://blog.csdn.net/hh867308122/article/details/131222122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图](https://blog.csdn.net/qq_40558766/article/details/101928337)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值