15821967367
打开客服菜单
当前位置 : 明翔网络 > 新闻中心 > 微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 ...
微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 ...
时间 : 11-08 13:00 浏览量 : 18

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

效果图展示 

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

图片发自简书App

(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;  });}


标签:
微信小程序开发

适用类型 : 企业展示型

适用行业 : 企业

案例编号 : 001

您可能还在找这些
cache
Processed in 0.003581 Second.