微信小程序获取数据接口动态渲染Echarts折线图

上篇文章介绍的是最简单的折线图配置方法，若是放到开发的项目中还需要进行一些改动，比如，如何调用接口获取数据动态渲染折线图：

为了更好的体验项目开发中调取接口获得数据渲染折线图，我让朋友给我开发了接口模拟了一些假数据部署到服务器上，因为加了时间筛选功能，所以只模拟了2019-7-17到2019-7-23这7天内的数据，其余时间段数据为0，如果进行测试的话，就选这个时间段筛选就行。

项目准备：

1、拷贝 ec-canvas 目录到项目根目录下，对于该文件内的echarts.js文件，可以使用最新版本项目中自带的，也可以去官网下载自定义构建的（自定义构建的目的就是缩小文件，针对性的下载自己需要的数据图表，注意自定义下载下来的文件名为echarts.min.js，重新引入到ec-canvas 目录中的时候需要修改为echarts.js，不然会有报错）；

2、配置index.json

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"},"navigationBarTitleText": "更多数据"
}

3、在index.wxml中引入 <ec-canvas> 组件

  <view class="container"><ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas></view>

4、重点来了，在js文件中开始写函数了

js文件最顶部先引入import * as echarts from '../../ec-canvas/echarts';

//data中配置
ec: {lazyLoad: true}

onLoad页面初始化创建组件，调用初始化echarts函数：

onLoad: function () {this.echartsComponnet = this.selectComponent('#mychart');this.init_echarts()},

  //初始化图表init_echarts: function () {this.echartsComponnet.init((canvas, width, height) => {// 初始化图表const Chart = echarts.init(canvas, null, {width: width,height: height});Chart.setOption(this.getOption());// 注意这里一定要返回 chart 实例，否则会影响事件处理等return Chart;});},// 获取数据getOption: function () {var that = this// 前台配置折线线条表示属性// 使用for in 遍历对象拿出name,并配置icon和textStyle，最后放入新建的legendList数组中var legendList = []for (var i in that.data.series) {var obj = {name: that.data.series[i].name,icon: 'circle',textStyle: {color: '#000000',}}legendList.push(obj)that.data.series[i].data.reverse()}var option = {// 折线图线条的颜色color: ["#37A2DA", "#67E0E3"],// 折线图的线条代表意义legend: {itemWidth: 5, //小圆点的宽度itemGap: 25,selectedModel: 'single', //折线可多选inactiveColor: '#87CEEB',data: legendList,bottom: 0,left: 30,z: 100},// 刻度grid: {containLabel: true},// 悬浮图标tooltip: {show: true,trigger: 'axis',position: function (pos, params, dom, rect, size) {var obj = {top: 60};obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;return obj;}},xAxis: {type: 'category',boundaryGap: false,data: that.data.ascissaData.reverse()},yAxis: {x: 'center',type: 'value',splitLine: {lineStyle: {type: 'dashed'}},axisLine: { //y轴坐标是否显示show: false},axisTick: { //y轴刻度小标是否显示show: false}},series: that.data.series}return option},// 点击查询按钮调用接口获取折线图数据getChartData: function () {var that = thisconsole.log(that.data.date01, that.data.date02)wx.request({url: 'http://weixin.frp.kaigejava.com/salary/getSalaryByDate',data: {start: that.data.date01,end: that.data.date02,},header: {'content-type': 'application/x-www-form-urlencoded',// 'Authorization': 'Bearer ' + wx.getStorageSync('token')},success: function (res) {console.log(res);var data = res.data.datathat.setData({series: data.series,ascissaData: data.ascissaData //默认横坐标})that.init_echarts()}})},

最后是日期选择器：

  // 日期选择器bindDateChange01: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date01: e.detail.value})},bindDateChange02: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date02: e.detail.value})},

为了更好的体验demo的实现效果，欢迎来我的git下载代码https://github.com/chenlun1000/ECharts02.git

微信小程序获取数据接口动态渲染Echarts折线图相关推荐

微信小程序之数据的同步渲染
微信小程序之数据的同步渲染结论: 微信小程序通过setData方法实现数据的同步渲染,直接修改data无法实现同步渲染. setData工作原理小程序分为逻辑层和渲染层,而每次逻辑层改变了,要借用 ...
微信小程序使用三元运算符动态渲染布局
今天在写微信小程序时,被坑到了, <!--.wxml-> <view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}&q ...
微信小程序数据接口，微信小程序获取数据
1.公共文件中定义域名信息 // app.js App({myapp:{// 定义接口域名myweb:"http://www.hansnwxapi.com/index/"},onL ...
解决通过微信小程序获取的定位坐标在百度地图渲染误差过大问题
微信小程序可以获取两种坐标系的经纬度,分别为WGS84(大地坐标系)和GCJ02(国测局坐标系)而百度却是在其基础上进行加密形成了自己的一套坐标系bd09(百度坐标系),如果直接用微信小程序获取的经纬 ...
微信小程序链接后台接口，进行数据交互
微信小程序链接后台接口,进行数据交互新手学微信小程序,设计页面还可以,有没有让进行数据交互的时候就不知道怎么弄了,下面就记录一下我是怎么进行交互的 1.登陆微信小程序平台,进入首页,点击开发设置 2 ...
好玩的接口之 Java 解密微信小程序获取手机号
LZ-Says:有些东西,真的是很矛盾,本来很简单的事儿,各自坚持,结果,不欢而散,不舍?如何? 前言最近搞接口,基于 Spring Boot,怎么说呢,很虐. 不过熟悉了业务,表结构等等,相对来说 ...
微信小程序获取Onenet温湿度数据并控制灯亮灭
其实之前就写过类似的文章,但是看过我博客的朋友就知道,我是先写微信小程序获取onenet,然后再写esp32上云到onenet.一篇是ESP32-C3通过MQTT协议把温湿度上传到OneNet平台 ...
微信小程序获取客户端IP地址,HTTPS接口(ts\js)
微信小程序获取用户IP地址,HTTPS接口很简单实用的ip地址接口, 只返回当前ip 接口返回内容格式为: {"ip":"27.211.239.98"} // ...
微信小程序获取手机号，含java后台接口实现
前言前面写了一篇 java实现微信小程序加密数据解密_女IT玩家-彬彬的博客-CSDN博客然后接着写微信小程序如何获取手机号,本文既有小程序的实现代码.也有后台java的实现代码哦!! 小程序实现 ...

微信小程序获取数据接口动态渲染Echarts折线图

微信小程序获取数据接口动态渲染Echarts折线图相关推荐

最新文章

热门文章