微信小程序使用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和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
详解js的视频和音频采集
Aug 09 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
php PDO异常处理详解
2016/11/20 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python显示天气预报
2014/03/02 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python实现聊天小程序
2018/03/13 Python
使用python3实现操作串口详解
2019/01/01 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
主持人演讲稿范文
2013/12/28 职场文书
财务主管的岗位职责
2013/12/30 职场文书
毕业晚会主持词
2014/03/24 职场文书
八项规定对照检查材料
2014/08/31 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
跑吧孩子观后感
2015/06/10 职场文书
大学生受助感言
2015/08/01 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang