DDR爱好者之家

微信小程序使用echarts获取数据并生成折线图
站长资源 2024/11/24 佚名
72 1538
DDR爱好者之家 Design By 杰米

微信小程序使用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;
 });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米