H5端引入echart 视图更新的大坑

H5端引入echart 视图更新的大坑

1、主要是写移动端引入echart折线图重置数据的时候遇到的样式错乱的坑,效果图如下
在这里插入图片描述
2、项目是每次请求数据重置图表,以下会在代码列出错误的地方

//HTML部分
    <div id="main" style="width:100%!important;"></div>
//JS部分
   //在mounted初始化图表
  myChart = echarts.init(document.getElementById('main'))
  //窗口变化时候更新视图
    window.onresize = function () {
          myChart.resize()
        }
   //赋值图表数据,视图更新的坑就在于这个setOption的第二个参数 true,如果是在PC端,则没什么影响,但是如果在移动端,我是用了rem布局,引入了淘宝的flexible.js 
 myChart.setOption(this.optionGauge,true)

3、如果在移动端在初始化页面的时候,setOption可以传入第二个参数true,但是在重新赋值的时候不能写进这个参数,会导致视图样式错误,本来设置300的高度,重置数据后,比如我的如下:
在这里插入图片描述

4、myChart.setOption(this.optionGauge,true)中的true是更新视图层的作用,具体为啥会导致在移动端出现这种情况,小弟也不清楚,哪位大佬懂的话,提点一下 ,谢谢,希望能帮助到大伙!

要在uniapp h5使用ucharts,你需要按照以下步骤进行操作: 1. 首先,你需要在你的uniapp项目安装ucharts。可以使用npm或yarn进行安装,命令如下: ``` npm install ucharts --save ``` 或 ``` yarn add ucharts ``` 2. 安装完成后,你需要在你的vue组件引入ucharts,代码如下: ```js import uCharts from 'ucharts'; ``` 3. 接下来,你需要在你的vue组件定义一个canvas元素,并且给它一个唯一的ID。例如: ```html <canvas id="myChart" style="width:100%;height:300px;"></canvas> ``` 4. 在vue组件的mounted生命周期函数,你需要初始化ucharts,并且传入你的canvas元素ID以及数据。例如: ```js mounted() { const canvas = document.getElementById('myChart'); const ctx = uni.createCanvasContext(canvas); const data = { categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], series: [{ name: '成交量1', data: [20, 40, 60, 80, 100, 120, 140] }, { name: '成交量2', data: [10, 20, 30, 40, 50, 60, 70] }] }; new uCharts({ $this: this, canvas, type: 'column', legend: { show: true, position: 'bottom', fontSize: 12, data: ['成交量1', '成交量2'] }, dataLabel: true, dataPointShape: true, background: '#FFFFFF', pixelRatio: uni.getSystemInfoSync().pixelRatio, categories: data.categories, series: data.series, animation: true, width: uni.upx2px(375), height: uni.upx2px(200), extra: { column: { width: uni.upx2px(40) } } }); } ``` 5. 最后,你需要在你的vue组件引入ucharts的css文件。例如: ```html <style> @import "node_modules/ucharts/uCharts.css"; </style> ``` 这样,你就可以在uniapp h5成功引入ucharts并且使用它了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值