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,初始化的时候循环设置图表