溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖

發(fā)布時間：2020-09-08 20:46:12 來源：腳本之家 閱讀：1282 作者：故事外的人呀 欄目：web開發(fā)

微信小程序使用echarts，實現(xiàn)左右雙Y軸，動態(tài)獲取數(shù)據(jù)，生成折線圖

本來使用的是wxcharts，但發(fā)現(xiàn)實現(xiàn)不了左右雙y軸的效果，就換成echarts

要實現(xiàn)這樣的效果，需要以下幾步：

（1）去github下載插件，放進自己的項目里

只需要將名稱是ec-canvas的文件夾放進自己項目里。

像這樣：

微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖

（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

這里分步寫：

第一步：導(dǎo)入 echarts 插件

import * as echarts from '../../ec-canvas/echarts';

第二步：寫在Page外的方法

function echart(chart, leftData, rightData) {//leftData是坐標(biāo)系左邊y軸，rightData是右邊y軸
 var option = {
  //網(wǎng)格
  grid: {
   bottom: 80,
   show: true,
   // containLabel: true
  },
  //圖例
  legend: {
   data: [{
     name: 'leftData',
     textStyle: { //設(shè)置顏色
      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網(wǎng)格
   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標(biāo)軸名稱的文字樣式
    nameTextStyle: {
     color: '#FFC560'
    },
    //網(wǎng)格線
    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',
    //折線區(qū)域
    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 // 后臺傳過來的動態(tài)數(shù)據(jù)
    //設(shè)置固定的數(shù)據(jù)
    // 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,//后臺傳過來的動態(tài)數(shù)據(jù)
    //設(shè)置固定的數(shù)據(jù)
    // data: [
    //  2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
    // ]
   }]
 }
}

第三步：寫在Page里的方法，（包括onLoad(),初始化）

/**
 * 頁面的初始數(shù)據(jù)
 */
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,//從后臺獲取的數(shù)據(jù)
    rightData: xxxx //從后臺獲取的數(shù)據(jù)
  });
  },
 //給圖表加上數(shù)據(jù)
 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;
 });
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手