微信小程序使用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中的String对象详谈
Mar 03 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
js实现两点之间画线的方法
May 12 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
实例详解带参数的 npm script
May 28 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python追加元素到列表的方法
2015/07/28 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
培训通知书模板
2015/04/17 职场文书
初中重阳节活动总结
2015/05/05 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript