微信小程序使用echarts获取数据并生成折线图


Posted in Javascript onOctober 16, 2019

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

本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts

要实现这样的效果,需要以下几步:

(1)去github下载插件,放进自己的项目里

只需要将名称是ec-canvas的文件夹放进自己项目里。

像这样:

微信小程序使用echarts获取数据并生成折线图

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

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

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

echart.wxss
.container{
 margin: 0;
 padding: 0
}


echart.js

这里分步写:

第一步:导入 echarts 插件

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

第二步:写在Page外的方法

function echart(chart, leftData, rightData) {//leftData是坐标系左边y轴,rightData是右边y轴
 var option = {
  //网格
  grid: {
   bottom: 80,
   show: true,
   // containLabel: true
  },
  //图例
  legend: {
   data: [{
     name: 'leftData',
     textStyle: { //设置颜色
      color: '#6076FF',
      fontSize: '14',
     }
    },
    {
     name: 'rightData',
     textStyle: {
      color: '#FFC560',
      fontSize: '14',
     }
    }
   ],
   x: 'left',
   bottom: 15,
   left: 30
  },
  //x轴
  xAxis: {
   type: 'category',
   boundaryGap: false,
   disableGrid: true, //绘制X网格
   data: ['', '', '', '', '', '', '', '', ''],
   splitLine: {
    show: true,
    // 改变轴线颜色
    lineStyle: {
     // 使用深浅的间隔色
     color: ['#DDDDDD']
    }
   },
   //去掉刻度
   axisTick: {
    show: false
   },
   //去掉x轴线
   axisLine: {
    show: false
   },
  },
  //y轴
  yAxis: [{
    name: 'mph',
    type: 'value',
    min: 0,
    // max: 40,
    //y标轴名称的文字样式
    nameTextStyle: {
     color: '#FFC560'
    },
    //网格线
    splitLine: {
     show: true,
     lineStyle: {
      color: ['#DDDDDD']
     }
    },
    //去掉刻度
    axisTick: {
     show: false
    },
    //去掉y轴线
    axisLine: {
     show: false
    },
   },
   {
    name: 'g',
    type: 'value',
    // max: 4,
    min: 0,
    nameTextStyle: {
     color: '#6076FF'
    },
    //去掉刻度
    axisTick: {
     show: false
    },
    //去掉y轴线
    axisLine: {
     show: false
    },

   }
  ],

  series: [{
    name: 'leftData',
    type: 'line',
    animation: true, //动画效果
    symbol: 'none',
    //折线区域
    areaStyle: {
     //渐变颜色
     color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
       offset: 0,
       color: '#6076FF' // 0% 处的颜色
      }, {
       offset: 1,
       color: 'rgba(96,118,255,0.1)' // 100% 处的颜色
      }],
      global: false, // 缺省为 false
     },
    },
    //折线宽度
    lineStyle: {
     width: 2
    },
    color: '#6076FF',
    data: leftData // 后台传过来的动态数据
    //设置固定的数据
    // data: [
    //  23, 30, 20, 23, 30, 26, 20, 25, 25
    // ] 
   },
   {
    name: 'rightData',
    type: 'line',
    yAxisIndex: 1,
    animation: true,
    symbol: 'none',
    areaStyle: {
     color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
       offset: 0,
       color: '#FFC560' // 0% 处的颜色
      }, {
       offset: 1,
       color: 'rgba(255, 197, 96,0.3)' // 100% 处的颜色
      }],
      global: false, // 缺省为 false
     },
    },
    lineStyle: {
     width: 2
    },
    color: '#FFC560',
    data: rightData,//后台传过来的动态数据
    //设置固定的数据
    // data: [
    //  2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
    // ]
   }]
 }
}

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

/**
 * 页面的初始数据
 */
data: {
 ec: {
  lazyLoad: true //初始化加载
 }
},
onLoad: function (options) {
 let that = this;
 this.oneComponent = this.selectComponent('#mychart');
 let url = "xxxxx";
 let params = {
  "openId": options.id,
 };
wx.request({
  url: "xxxx",
  method: 'POST'
  data: params,
  header: header,
  success: (res) => {
   that.setData({
    leftData: xxx,//从后台获取的数据
    rightData: xxxx //从后台获取的数据
  });
  },
 //给图表加上数据
 that.initGraph(that.data.leftData, that.data.rightData)
 })
}

初始化图表

initGraph: function (leftData, rightData) {
 this.oneComponent.init((canvas, width, height) => {
  const chart = echarts.init(canvas, null, {
   width: width,
   height: height
  });
  initChart(chart, leftData, rightData);
  this.chart = chart;
  return chart;
 });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
JS回调函数深入理解
Oct 16 #Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
You might like
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
angular *Ngif else用法详解
2020/12/15 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python使用cookielib库示例分享
2014/03/03 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python 格式化输出百分号的方法
2019/01/20 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python Selenium参数配置方法解析
2020/01/19 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python文件排序的方法总结
2020/09/13 Python
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
关于读书的演讲稿
2014/05/07 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014年个人委托书范本
2014/10/13 职场文书
北大自主招生自荐信
2015/03/04 职场文书
科技活动总结范文
2015/05/11 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书