微信小程序使用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 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Vue SSR 组件加载问题
May 02 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
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采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
Python中super的用法实例
2015/05/28 Python
python开发中module模块用法实例分析
2015/11/12 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
C语言开发工程师测试题
2016/12/20 面试题
周年庆典邀请函范文
2014/01/23 职场文书
幼教求职信
2014/03/12 职场文书
竞聘上岗演讲
2014/05/19 职场文书
教研处工作方案
2014/05/26 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书