用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 查看內容

小程序中使用Echart

Rolan 2020-3-16 00:22

最近有幾個小程序用到了圖表,把我一頓折騰。所以來講一下使用圖表時所遇到的問題。我們所用到的是ECharts 的微信小程序版本;它提供了一個小程序原生的組件,然后我們只需要在相關頁面引用改組件就好了。使用前準備 ...

最近有幾個小程序用到了圖表,把我一頓折騰。所以來講一下使用圖表時所遇到的問題。

我們所用到的是 ECharts 的微信小程序版本 ;它提供了一個小程序原生的組件,然后我們只需要在相關頁面引用改組件就好了。

使用前準備

  1. 先下載 ecomfe/echarts-for-weixin 中 ec-canvas 整個文件夾里面的文件

  2. 引用:然后在你的頁面中 的 json文件中 引用。當然你也可以作為全局組件寫在app.json 中。

{ 
  "usingComponents": {
     "ec-canvas": "../../components/ec-canvas/ec-canvas"
    }
}
復制代碼

注意:上面的 ec-canvas 引用組件名不能隨意改變,因為在封裝的組件 ec-canvas.js 中,需要找到 該節點 。

使用

  1. 我們要手動給 我們的圖表設置寬高,不然頁面只會顯示空白。也就是給.container 設置寬高。
<view class="container">
  <ec-canvas
   id="mychart-dom-bar" 
   canvas-id="mychart-bar" 
   ec="{{ ec }}">
  </ec- canvas>
</view>
復制代碼
  1. 其中 ec 是一個我們在 我們頁面 中定義的對象,它使得圖表能夠在頁面加載后被初始化并設置。初始化圖表的方法如下:
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
   });
  canvas.setChart(chart);
   // 圖表數據初始化
  var option = {
       ...
   };
   chart.setOption(option);
     return chart;
 }
復制代碼

這對于所有 ECharts 圖表都是通用的,用戶只需要修改上面 option 的內容,即可改變圖表。 option 的使用方法參見 ECharts 配置項文檔 。對于不熟悉 ECharts 的用戶,可以參見 [5 分鐘上手 ECharts]( echarts.baidu.com/tutorial.ht… 分鐘上手 ECharts) 教程。

因為我們一般都是需要延遲加載的, 也就是獲取數據后才加載圖表的,所以我們不能直接使用,

我們需要在獲取數據重新設置 options 之后才能使用。

代碼入下:

**.wxml 文件 **

<view class="echart-map">
  <view class="echart-title">全國疫情新趨勢</view>
  <ec-canvas 
    wx:if="{{hasGetOption}}"
    class="map-chart"   
    id="map-chart" 
    canvas-id="map-chart" 
    ec="{{ ec }}">
   </ec-canvas>
</view>
復制代碼

.js 文件

// 頁面中需要引入 ec-canvas 文件夾中的 echcrts.js
import * as echarts from '../../components/ec-canvas/echarts';  
page({
  data: {
    hasGetOption: false,
    ec: {
      // 當我們設置lazyLoad 為true 的時候,我們需要手動初始化圖表。
      lazyLoad: true,
    }
  },
  ready() {
    // 在ready 的時候獲取組件的實例。否則可能獲取不到。
    this.echartInstance = this.selectComponent('.map-chart');
},
setOption () {
  let option = {
     title: {
        // text: '全國疫情新增趨勢'
     },
     tooltip: {
       trigger: 'axis'
     },
     legend: {
       data: [ '確診']
      },
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
       data: []
     },
     yAxis: {
       type: 'value'
     },
     series: [{
       name: '確診',
       type: 'line',
       stack: '總量',
       data: [120, 132, 101, 134, 90, 230, 210],
       smooth: true
      }
      ]
    }
  },
initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
   canvas.setChart(chart);
   let option = this.getOption();
   chart.setOption(option);
   return chart;
  },
getPageData() {
   wx.request({
      ...
     success: (res) => {
        // 獲取到數據后再手動初始化
      this.echartInstance.init(this.initChart);
       this.setData({
         hasGetOption: true,
          ...
        })
      }
    })
  }
})
復制代碼

在之前的版本中會出現這么一個問題:

因為最新基礎庫版本中 支持 Canvas 2d,這個可以提升渲染性能,解決非同層渲染問題。

解決這個問題只需要在 ec-cnavas.js 的data 中將 isUseNewCanvas 設為true即可。

在 Taro 中使用

因為 Taro 中可以使用 微信中的原生組件,以及微信中的自定義組件。 所以使用方法同微信小程序類似。

  1. 下載

  2. 頁面引用

config = {
  navigationBarTitleText: '首頁',
  usingComponents: {
     "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
復制代碼
  1. 使用:
state = {
  ec: {
    lazyLoad: true,
  }
};
// 獲取組件實例。
setCanvasRef = node => this.canvasRef = node;
render () {
  return (
    <View className="line-chart">
       <ec-canvas 
         id="price-chart" 
         canvas-id="price-chart" 
         ref={this.setCanvasRef} 
         ec={ec} />
   </View>)
}
復制代碼

然后在數據請求完后 再圖表初始化。 init 是再組件中定義的

this.canvasRef.init (this.initChart);   
復制代碼
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 廣州蘆葦科技web前端 來自: 掘金
河北20选5大星走势图