微信小程序如何使用e-charts插件
2018-11-09 13:02
239 查看
在e-charts官网已经发布了微信小程序的使用demo,根据配置项修改值达到自己想要的效果。
http://echarts.baidu.com/index.html
在github上下载dome,只需复制ec-canvas这个文件夹到微信小程序下,创建页面引入插件,然后后根据api更改值。
以上三种柱状图又不同e-charts插件制作而成,
其中第一种和第二中是e-charts官方出的微信小程序demo更改而来。
其中几个比较重要的api:
grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。
[code]function initChart(canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); option = { color: ['#37a2da', '#32c5e9', '#67e0e3'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { //图标 data: ['有功(kWh)'] }, grid: { left: 20, right: 40, bottom: 30, top: 40, containLabel: true }, xAxis: [ { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } } ], yAxis: [ { type: 'category', axisTick: { show: false }, textStyle:{ height:10 }, data: ['1', '2', '3', '4', '5', '6', '7', 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], axisLine: { lineStyle: { color: '#999' }, lineHeight: 30 }, axisLabel: { color: '#666' } } ], series: [ { name: '有功(kWh)', type: 'bar', label: { normal: { show: false,//控制Y轴的数据显示 position: 'right' } }, data: [1, 2, 88.1, 89.2, 87.9, 88.2, 88.1, 77.9, 87.9, 100.2, 98.4, 97.9, 88.9, 85.9, 81.1, 82, 81.5, 86.1, 90.1, 92.6, 82.4, 76.4, 73.1, 89], itemStyle: { // emphasis: { // color: '#37a2da' // } } } ] }; chart.setOption(option); return chart; }
[code]onReady() { console.log("===============") console.log(chart) wx.request({ url: 'https://local:8080', //请更改域名 data: { //此处填写请求数据 }, method: 'GET', header: { 'content-type': 'application/json' }, success: function (res) { //请求成功的时候返回数据 console.log(res) option.series[0].data = res.data.result.Pw; chart.setOption(option); }, }) },
在微信小程序的page外面定义函数,创建图形,可以在生命周期函数里更改option.series的值,使用chart.setOption(option)从新渲染数据。
阅读更多相关文章推荐
- 微信小程序--wx-charts图表插件使用教程
- 社区版本idea如何使用tomcat插件调试程序
- 微信小程序图表插件(wx-charts)
- 微信小程序图表插件(wx-charts)
- [置顶] wx-charts 微信小程序图表插件
- 微信小程序开发如何使用npm包--labrador使用
- 拿到微信小程序APPID了如何使用https版API中心来开发
- 在微信小程序中使用富文本转化插件wxParse
- 微信小程序数字滚动插件使用详解
- 微信小程序开发--富文本插件wxParse的使用
- 使用sublime3 开发微信小程序插件
- 微信小程序去哪里找 小程序到底如何使用(附小程序名单)
- 微信小程序如何使用阿里妈妈iconfont图标库
- 微信小程序开发--富文本插件wxParse的使用
- 微信小程序图表插件(wx-charts)实例代码
- 微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)
- 微信小程序开发(十二)富文本插件wxParse的使用
- 微信小程序配置websocket环境及如何在小程序上使用做个简单的解释吧
- 微信小程序中如何使用setData修改数组或对象中的某一参数
- 微信小程序_家具在线-演示如何使用下拉选项