小程序使用echarts常见问题

在 uni-app 中使用 百度eCharts demo地址 的一些坑

  1. 使用和安装根据文档提示即可

  2. 安装后的 eCharts 会出现在 uni_module中,并且文件特别大,大约 900k;

  3. 可以使用压缩版 eCharts, 内容可定制,大约 400k;

出现问题

   1. 在模拟器上会发现 eCharts 图表层级太高,不跟随页面滚动等问题,
   2. 这个问题在发布后 真机打开是不存在的,
   3. eCharts 图表不支持模拟器上的真机调试功能,会出现报错信息
      真机调试报错 TypeError: H.createEvent is not a function
   4. 使用压缩版 echarts
     需将压缩后的 js 文件 放入 `uni_modules\lime-echart\components\l-echart\` 中
     并将文件名改为 echarts.js 即可
     压缩的时候需要注意,目前百度echarts 支持的版本使用的旧版的,5.0以下的,我使用的是 4.7.0
        可能问题:压缩如果使用的最新版本,可能会有报错
   5. 之后正常使用即可

使用 百度echarts

  1. tooltip: 不支持 html 模板渲染,只支持字符串,
    1. 支持属性:trigger、backgroundColor 、padding、textStyle:color、formatter:  不支持 html 模板渲染,只支持字符串,
    2. 不支持属性:borderColor、borderWidth、extraCssText
 2. series:不支持areaStyle:color
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序使用 Echarts 传输数据的一种常见方式是通过 Ajax 请求获取数据,然后将数据传递给 Echarts 进行渲染。以下是一个简单的示例: 1. 在小程序页面中引入 Echarts 库: ```javascript import * as echarts from '../../ec-canvas/echarts'; ``` 2. 在页面的 WXML 中添加一个画布用于渲染 Echarts 图表: ```html <view class="chart-container"> <ec-canvas id="chart" canvas-id="chart-canvas"></ec-canvas> </view> ``` 3. 在页面的 JS 中初始化 Echarts 图表并绑定数据: ```javascript Page({ data: { chart: null, chartData: {} // 存放图表数据的对象 }, onLoad: function() { this.initChart(); this.getData(); }, initChart: function() { this.setData({ chart: this.selectComponent('#chart') }, () => { this.data.chart.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); // 绘制图表 this.setChartOption(chart); return chart; }); }); }, setChartOption: function(chart) { // 根据获取到的数据设置图表配置项 const option = { // ... }; chart.setOption(option); }, getData: function() { wx.request({ url: 'https://example.com/data', // 替换为实际的数据接口地址 success: res => { this.setData({ chartData: res.data }, () => { this.updateChart(); }); } }); }, updateChart: function() { const { chartData } = this.data; const chart = this.data.chart; // 更新图表数据 // ... // 重新绘制图表 chart.setOption(option); } }); ``` 以上示例演示了如何在小程序使用 Echarts 绘制图表,并通过 Ajax 请求获取数据更新图表。具体的数据请求和图表配置需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值