renderjs-echarts-demo插件使用(发送网络请求和多个图表)

h5页面,echarts的datazoom滚动、图例点击都失效(暂时发现这些)


1.首先下载插件,把插件中static的echarts.js放到自己的项目中,也可以去echarts网站自行下载

2.在项目中新建一个页面,把插件中index页面内容复制粘贴,然后进行改造

3.参数的作用

<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>

<button @click="changeOption">更新数据</button>

页面有两部分script标签,两部分需要互相传递数据,分别编号1、2,下面用1、2表示

(1) @click="echarts.onClick"


 

2需要调用1的方法可以这样使用,常用到点击图表做一些操作

(2):prop="option" :change:prop="echarts.updateEcharts"

updateEcharts方法就是监测option的变化,:prop可以放需要监测的内容

(3)@click="changeOption"     changeOption就是更新数据的作用

4. 项目中使用

<view class="btnClass"><button @click="changeOption">折线图筛选</button></view>

<view class="fold-charts">

<view @click="echarts.onClick" :prop="lineOption" style="width: 380px;height: 300px;" :change:prop="echarts.updateEcharts" id="linechart" class="linechart"></view>

</view>

不需要发送请求,可以直接使用;

发送请求

(1)web运行两部分可以正常通信,但在手机或模拟器运行会通讯受阻,且renderjs中不能使用uni的api,所以在renderjs这部分发网络请求有点困难尝试用fetch发请求,但是在手机运行中,json方法不生效,axios也不行(可能没找对方法)所以放弃在该部分发送请求

(2)网络请求放到了第一部分


 

因为页面需要初始化数据,这部分就把lineOption传入了请求返回的数据,这里lineOption一有变动updateEcharts就会接收到数据,就可以设置折线图了


 

初始化的时候可能会存在dom没加载完成,或者js执行顺序的问题,加上了定时器和this.$nextTick()


 

多个图表展示(仪表盘)


 

跟单个图表一样的做法,在获取参数的时候设置gaugeOptions,初始化的时候循环设置图表


 

 

posted @ 2020-10-14 10:54  白小杨  阅读(1322)  评论(0编辑  收藏  举报