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=" 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()