js:const app = getApp();//首先引入wxcharts.js插件var wxCharts = require("../../../../dist/wxc.._wxechart oninit不执行">
当前位置:   article > 正文

微信原生小程序使用echarts_wxechart oninit不执行

wxechart oninit不执行

 html:

  1. view class="echats" >
  2. <ec-canvas id="mychart-dom-bar" id="mychart-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
  3. </view>

 js:

  1. const app = getApp();
  2. //首先引入wxcharts.js插件
  3. var wxCharts = require("../../../../dist/wxcharts.js");
  4. var dateTimePicker = require('../../../../utils/dateTimePicker.js');
  5. import * as echarts from '../../../../components/ec-canvas/echarts';
  6. //定义记录初始屏幕宽度比例,便于初始化
  7. var windowW = 0;
  8. function setOption(chart, data) {
  9. console.log(data)
  10. var option = {
  11. title: {
  12. text: '收益统计',
  13. left: 'center'
  14. },
  15. tooltip: {
  16. trigger: 'item'
  17. },
  18. legend: {
  19. orient: 'horizontal',
  20. left: 'center',
  21. bottom: '10'
  22. },
  23. series: [{
  24. name: '回收类型',
  25. type: 'pie',
  26. radius: '48%',
  27. center: ['50%', '42%'],
  28. data: data,
  29. emphasis: {
  30. itemStyle: {
  31. shadowBlur: 10,
  32. shadowOffsetX: 0,
  33. shadowColor: 'rgba(0, 0, 0, 0.5)'
  34. }
  35. }
  36. }]
  37. };
  38. chart.setOption(option)
  39. }
  40. Page({
  41. data: {
  42. start_date:'',
  43. end_date:'',
  44. tongji_data: {},
  45. ec: {
  46. lazyLoad: true,
  47. },
  48. timer: '',
  49. },
  50. onLoad(options) {
  51. var that = this
  52. that.getTody();
  53. this.setData({ //每隔一分钟刷新一次
  54. timer: setInterval(function() {
  55. that.getList();
  56. }, 60000)
  57. })
  58. },
  59. onReady: function() {
  60. this.oneComponent = this.selectComponent('#mychart-pie');
  61. },
  62. onUnload: function() {
  63. clearInterval(this.data.timer)
  64. },
  65. getTody() {
  66. var date = new Date();
  67. var year = date.getFullYear();
  68. var month = date.getMonth() + 1;
  69. var strDate = date.getDate();
  70. var tempstr = year+'-'+month+'-'+strDate;
  71. console.log(tempstr)
  72. this.setData({
  73. start_date: tempstr,
  74. end_date:""
  75. })
  76. this.getList();
  77. },
  78. getList() {
  79. var that = this
  80. app.util.request({
  81. 'url': 'entry/wxapp/Api',
  82. 'data': {
  83. m: 'ox_reclaim',
  84. r: 'store.count',
  85. uid: wx.getStorageSync('uid'),
  86. time: this.data.start_date,
  87. time2:this.data.end_date,
  88. },
  89. success(res) {
  90. console.log(res)
  91. that.setData({
  92. tongji_data: res.data.data
  93. })
  94. var arr = [];
  95. res.data.data.piedata.forEach(item => {
  96. var obj = {
  97. name: item.name,
  98. value: item.data,
  99. }
  100. arr.push(obj);
  101. })
  102. that.init_Echarts(arr)
  103. }
  104. })
  105. },
  106. init_Echarts(data) {
  107. this.oneComponent.init((canvas, width, height,dpr) => {
  108. const chart = echarts.init(canvas, null, {
  109. width: width,
  110. height: height,
  111. devicePixeRatio:dpr,
  112. });
  113. canvas.setChart(chart)
  114. setOption(chart, data)
  115. this.chart = chart;
  116. return chart;
  117. })
  118. },
  119. changeDate(e) {
  120. if(e.currentTarget.dataset.id==1){
  121. // 开始时间
  122. this.setData({
  123. start_date: e.detail.value
  124. });
  125. }else{
  126. //结束时间
  127. this.setData({
  128. end_date: e.detail.value
  129. });
  130. }
  131. console.log(e)
  132. this.getList()
  133. },
  134. })

css:样式

  1. /* echarts图表 */
  2. .echats{
  3. width: 100%;
  4. height: 710rpx;
  5. margin-top: 30rpx;
  6. }
  7. ec-canvas{
  8. width:100%;
  9. height:100%;
  10. }

效果图:

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/526619
推荐阅读
相关标签
  

闽ICP备14008679号