微信小程序使用echarts动态获取数据

Number2 echarts动态获取数据

继续上一篇，结合echarts动态获取数据
官方提供了一个微信与echarts相结合的数据，里面就是简单的各种工具，数据获取没有进行动态绑定，各种搜索资料最后编写了一个动态获取数据的方法
这里以官方示例pie做改造
1.index.js

import * as echarts from '../../ec-canvas/echarts';const app = getApp();
function setOption(chart,piedata){var option = {backgroundColor: "#ffffff",series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '50%'],radius: ['20%', '40%'],data: piedata}]};chart.setOption(option);return chart;
}Page({data: {ec: {//onInit: initChart// 将 lazyLoad 设为 true 后，需要手动初始化图表lazyLoad: true}},initpie:function(piedata){let ecComponent = this.selectComponent('#mychart-dom-pie');ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});//调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去setOption(chart,piedata);// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});},onReady() {},onLoad: function (options) {var piedata = [{value: 55,name: '北京'}, {value: 20,name: '武汉'}, {value: 10,name: '杭州'}, {value: 20,name: '广州'}, {value: 38,name: '上海'}];this.initpie(piedata);}
});

2、index.json

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

3、index.wxml

<!--index.wxml-->
<view class="container"><ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

4、index.wxss

/**index.wxss**/
ec-canvas {width: 100%;height: 100%;
}

注意这里虽然只有ec-canvas的样式设置，但是需要在ec-canvas外面包裹<view>标签，并设置宽以及高，要不然图表不会显示，就跟jsp引用echarts
代码示例放在https://download.csdn.net/download/dongyang1124/85110432

微信小程序使用echarts动态获取数据相关推荐

微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){var that = this;wx.request({url: 'http://localhost:9096/a ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序如何从云端获取数据并渲染页面
页面的数据来自于云端数据库首先要从云端数据库获取之后接受传过来的数据传入到使用的地方(这一步还是传值) 接受并动态渲染页面效果图展示(数据均来自于数据库)
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目解压后打开,把ec-canvas文件夹复制到项目pages同 ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...

微信小程序使用echarts动态获取数据

Number2 echarts动态获取数据

微信小程序使用echarts动态获取数据相关推荐

最新文章

热门文章