用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 ...

Rolan 2019-11-8 00:52

微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts效果图展示要实现这样的效果,需要以下几步:(1)去github下载插件,放进自 ...

微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 
本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts

效果图展示 

要实现这样的效果,需要以下几步: 
(1)去github下载插件,放进自己的项目里 
呐,链接 ===>点击这里 
只需要将名称是ec-canvas的文件夹放进自己项目里。 
像这样: 

图片发自简书App

(2)分别写小程序的四个文件 

  1. //echart.json
  2. {
  3. "usingComponents": {
  4. "ec-canvas": "../../ec-canvas/ec-canvas"
  5. }
  6. }

  1. <!--echart.wxml-->
  2. <view class="container">
  3. <ec-canvas id="myechart" canvas-id="graph" ec="{{ ec }}"></ec-canvas>
  4. </view>

  1. /* echart.wxss*/
  2. .container{
  3. margin: 0;
  4. padding: 0
  5. }

④ 
echart.js 
这里分步写: 
第一步:导入 echarts 插件

  1. import * as echarts from '../../ec-canvas/echarts';

第二步:写在Page外的方法

  1. function echart(chart, leftData, rightData) {//leftData是坐标系左边y轴,rightData是右边y轴
  2. var option = {
  3. //网格
  4. grid: {
  5. bottom: 80,
  6. show: true,
  7. // containLabel: true
  8. },
  9. //图例
  10. legend: {
  11. data: [{
  12. name: 'leftData',
  13. textStyle: { //设置颜色
  14. color: '#6076FF',
  15. fontSize: '14',
  16. }
  17. },
  18. {
  19. name: 'rightData',
  20. textStyle: {
  21. color: '#FFC560',
  22. fontSize: '14',
  23. }
  24. }
  25. ],
  26. x: 'left',
  27. bottom: 15,
  28. left: 30
  29. },
  30. //x轴
  31. xAxis: {
  32. type: 'category',
  33. boundaryGap: false,
  34. disableGrid: true, //绘制X网格
  35. data: ['', '', '', '', '', '', '', '', ''],
  36. splitLine: {
  37. show: true,
  38. // 改变轴线颜色
  39. lineStyle: {
  40. // 使用深浅的间隔色
  41. color: ['#DDDDDD']
  42. }
  43. },
  44. //去掉刻度
  45. axisTick: {
  46. show: false
  47. },
  48. //去掉x轴线
  49. axisLine: {
  50. show: false
  51. },
  52. },
  53. //y轴
  54. yAxis: [{
  55. name: 'mph',
  56. type: 'value',
  57. min: 0,
  58. // max: 40,
  59. //y标轴名称的文字样式
  60. nameTextStyle: {
  61. color: '#FFC560'
  62. },
  63. //网格线
  64. splitLine: {
  65. show: true,
  66. lineStyle: {
  67. color: ['#DDDDDD']
  68. }
  69. },
  70. //去掉刻度
  71. axisTick: {
  72. show: false
  73. },
  74. //去掉y轴线
  75. axisLine: {
  76. show: false
  77. },
  78. },
  79. {
  80. name: 'g',
  81. type: 'value',
  82. // max: 4,
  83. min: 0,
  84. nameTextStyle: {
  85. color: '#6076FF'
  86. },
  87. //去掉刻度
  88. axisTick: {
  89. show: false
  90. },
  91. //去掉y轴线
  92. axisLine: {
  93. show: false
  94. },
  95. }
  96. ],
  97. series: [{
  98. name: 'leftData',
  99. type: 'line',
  100. animation: true, //动画效果
  101. symbol: 'none',
  102. //折线区域
  103. areaStyle: {
  104. //渐变颜色
  105. color: {
  106. type: 'linear',
  107. x: 0,
  108. y: 0,
  109. x2: 0,
  110. y2: 1,
  111. colorStops: [{
  112. offset: 0,
  113. color: '#6076FF' // 0% 处的颜色
  114. }, {
  115. offset: 1,
  116. color: 'rgba(96,118,255,0.1)' // 100% 处的颜色
  117. }],
  118. global: false, // 缺省为 false
  119. },
  120. },
  121. //折线宽度
  122. lineStyle: {
  123. width: 2
  124. },
  125. color: '#6076FF',
  126. data: leftData // 后台传过来的动态数据
  127. //设置固定的数据
  128. // data: [
  129. // 23, 30, 20, 23, 30, 26, 20, 25, 25
  130. // ]
  131. },
  132. {
  133. name: 'rightData',
  134. type: 'line',
  135. yAxisIndex: 1,
  136. animation: true,
  137. symbol: 'none',
  138. areaStyle: {
  139. color: {
  140. type: 'linear',
  141. x: 0,
  142. y: 0,
  143. x2: 0,
  144. y2: 1,
  145. colorStops: [{
  146. offset: 0,
  147. color: '#FFC560' // 0% 处的颜色
  148. }, {
  149. offset: 1,
  150. color: 'rgba(255, 197, 96,0.3)' // 100% 处的颜色
  151. }],
  152. global: false, // 缺省为 false
  153. },
  154. },
  155. lineStyle: {
  156. width: 2
  157. },
  158. color: '#FFC560',
  159. data: rightData,//后台传过来的动态数据
  160. //设置固定的数据
  161. // data: [
  162. // 2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
  163. // ]
  164. }]
  165. }
  166. }

第三步:写在Page里的方法,(包括onLoad(),初始化)

  1. /**
  2. * 页面的初始数据
  3. */
  4. data: {
  5. ec: {
  6. lazyLoad: true //初始化加载
  7. }
  8. },
  9. onLoad: function (options) {
  10. let that = this;
  11. this.oneComponent = this.selectComponent('#mychart');
  12. let url = "xxxxx";
  13. let params = {
  14. "openId": options.id,
  15. };
  16. wx.request({
  17. url: "xxxx",
  18. method: 'POST'
  19. data: params,
  20. header: header,
  21. success: (res) => {
  22. that.setData({
  23. leftData: xxx,//从后台获取的数据
  24. rightData: xxxx //从后台获取的数据
  25. });
  26. },
  27. //给图表加上数据
  28. that.initGraph(that.data.leftData, that.data.rightData)
  29. })
  30. }

初始化图表

  1. initGraph: function (leftData, rightData) {
  2. this.oneComponent.init((canvas, width, height) => {
  3. const chart = echarts.init(canvas, null, {
  4. width: width,
  5. height: height
  6. });
  7. initChart(chart, leftData, rightData);
  8. this.chart = chart;
  9. return chart;
  10. });
  11. }

到这就搞定啦

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 故事外的人呀 来自: 简书