I. 前言

echarts、ec-canvas，在小程式中進行資料可視化的意義

Echarts 是一款由百度開發和維護的的資料可視化工具庫，其提供了各種類型的圖表和互動式元件，同時支援動态資料更新和動畫效果等功能。通過使用 Echarts，使用者可以簡單、快速地建構可視化圖表和互動式元件，幫助使用者更好地了解和展示大量的資料資訊。而 ec-canvas 是 Echarts 專門針對小程式開發的圖表庫，通過提供對小程式原生 canvas 屬性的封裝和優化，進而達到将 Echarts 功能轉化為小程式能夠識别的 Api，進而實作在小程式中進行資料可視化的目的。

在小程式中進行資料可視化，可以幫助使用者直覺地展示資料，提高資料解讀和分析的效率，同時讓使用者可以通過簡單的手勢操作，進行資料的篩選、比較和分析等操作，友善使用者對資料的處理和挖掘，進而為使用者提供更全面、精準的決策依據，幫助使用者更好地了解和處理資料。此外，小程式作為一種輕量級、互動性強的移動應用程式，在通路速度、使用者使用習慣等方面相較于傳統的 PC 和 Web 端應用具有更為優越的使用體驗。是以，将 Echarts 庫和 ec-canvas 元件運用到小程式中，可以充分利用小程式的優點，來實作資料的可視化展示和業務邏輯功能的實作。

II. 安裝ec-canvas

1. 下載下傳安裝ec-canvas元件

在小程式中使用 echarts 需要下載下傳安裝 ec-canvas 元件。

下面簡單介紹 ec-canvas 的安裝流程。

打開 Github ec-canvas 項目頁面：https://github.com/ecomfe/ec-canvas。
點選Clone or download，選擇Download ZIP來下載下傳 ec-canvas 元件。
解壓縮下載下傳的 ZIP 檔案，打開解壓縮後的檔案夾，可以看到其中包含一個名為 ec-canvas 的檔案夾，其中包含了 ec-canvas 元件的主要代碼。
将 ec-canvas 檔案夾中的檔案複制到您小程式項目的相應目錄下，一般為 /components/ec-canvas。
在小程式頁面的 json 配置檔案中添加 "usingComponents" 對象，以便能夠在頁面中引用 ec-canvas 元件。例如：
{ "usingComponents": { "ec-canvas": "/components/ec-canvas/ec-canvas" } }
在小程式頁面的 wxml 檔案中，即可通過标簽<ec-canvas>引用 ec-canvas 元件。

總之，下載下傳安裝 ec-canvas 元件非常簡單，隻需要在 Github 上下載下傳該元件，并将其導入到小程式項目中即可。

2. 配置元件參數

安裝完成 ec-canvas 元件後，需要進行參數配置，才能正确的使用。以下是 ec-canvas 元件的幾個主要參數：

canvas-id: Canvas 的 id，用于在 js 中擷取 Canvas 對象。
ec-parameter: 将 echarts 配置資訊以 json 類型傳入 ec-canvas 元件中，這個參數很重要。
disable-scroll: 是否禁止頁面滑動，預設值為 false。

針對這些參數，以下是如何正确地進行配置：

1. 設定 canvas-id

将在小程式頁面引用 ec-canvas 元件的标簽的 canvas-id 屬性設定為一個字元串，名稱可以任意指定，例如：

<ec-canvas canvas-id="mychart"></ec-canvas>

2. 設定 echarts 配置資訊

将 echarts 的配置資訊以 json 形式傳入 ec-canvas 元件中。這個配置資訊需要在 wxml 中通過綁定 data 值進行傳遞，例如：

<ec-canvas id='mychart-dom-line'
  canvas-id='mychart-line'
  ec:canvas-id='mychart-line'
  ec:binderror='onError'
  ec:show-tooltip='true'
  ec:enable-pinch-zoom='true'
  ec:touch-move-limit='20' 
  ec:scale-mode='aspectFit'
  ec:animation-duration='500'
  ec:categories='{{categories}}'
  ec:series='{{series}}'
  onInit='initChart'>
</ec-canvas>

上述代碼中，綁定了 ec:categories 和 ec:series 兩個參數，其中 categories 和 series 分别表示圖表的類别資訊和資料資訊。這些參數的具體含義和用法請參考 echarts 官方文檔。

3. 禁止頁面滑動

如果不希望通過手勢滑動頁面來滾動小程式中的 echarts 圖表，可以在 ec-canvas 元件上設定 disable-scroll 屬性：

<ec-canvas canvas-id="mychart" disable-scroll="{{true}}"></ec-canvas>

經過以上配置後，即可在小程式中愉快的使用 echarts 元件啦！

III. 初識ec-canvas

1. echarts在微信小程式中的工作原理

ECharts 是一個基于 JavaScript 的開源可視化圖表庫，它可以支援在 Web 應用中使用，并且也可以在移動端應用中進行使用。為了将 ECharts 應用于微信小程式中，需要進行以下步驟：

1. 安裝 echarts-for-weixin 庫包

npm install echarts-for-weixin --save

2. 導入 echarts 庫，并建立圖表執行個體

<canvas id="myChart"></canvas>

const echarts = require('echarts-for-weixin');
const chart = echarts.init(this.selectComponent('#myChart').canvas);

3. 配置圖表參數

const options = {
  title: {
    text: 'ECharts 入門示例'
  },
  tooltip: {},
  legend: {
    data:['銷量']
  },
  xAxis: {
    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

chart.setOption(options);

4. 渲染圖表

this.selectComponent('#myChart').canvasToTempFilePath({
    success(res) {
        console.log(res.tempFilePath);
    },
    fail(res) {
        console.log(res);
    },
    complete(res) {
        console.log(res);
    }
}, this);

以上便是使用 ECharts 在微信小程式中進行開發的基本步驟。富有表現力的可視化資料是許多小程式所需的關鍵業務應用，ECharts 可以提供豐富的體驗以及良好的互動設計。

2. echarts小程式版的局限性與創新點

ECharts小程式版相比于Web版有一些局限性。其中主要包括以下幾點：

圖表類型受限: 在小程式中，ECharts的支援的圖表類型會受到一定程度的限制。
靜态繪制: 小程式中的canvas畫布可以通過調用draw方法直接将圖表繪制在畫布上，但這種繪制方式不支援互動事件的響應。
性能限制：小程式本身的功能以及性能受限，使用ECharts可能會對小程式整體性能造成一定影響。

但是，ECharts小程式版也有一些創新點：

借助微信小程式提供的開發者工具，通過調用微信小程式的API，可以實作小程式與ECharts的深度結合，提供更好的使用者體驗。
ECharts小程式版的庫包體積較小，輕量化特點能更好地适應小程式開發所需。
通過內建ECharts可視化庫，能夠實作資料可視化，友善使用者對資料進行更具深度的分析。

3. 通過一個簡單的示例了解ec-canvas的基本用法

下面是一個簡單的示例，用于建立一個柱狀圖：

1. 在小程式頁面的json檔案中注冊canvas

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}

2. 在小程式頁面中引入echarts庫

import * as echarts from '../../utils/echarts.min.js'

3. 在小程式頁面wxml檔案中放置ec-canvas元件

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

4. 在小程式頁面js檔案中建立圖表執行個體，并進行相關配置與渲染

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  
  const option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接通路',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

以上便是通過 ec-canvas 實作一個簡單柱狀圖的流程，具體步驟包括建立canvas、初始化ECharts執行個體、配置ECharts參數、渲染圖表等過程。

IV. 使用ec-canvas繪制圖表

1. 根據echarts各元件屬性設定ec-canvas參數

ec-canvas會将ECharts執行個體中的option參數解析為對應canvas的屬性來渲染圖表。根據不同元件的屬性，ec-canvas會将option參數解析為對應的canvas參數。

以下是ec-canvas中使用到的一些屬性參數及其對應的ECharts配置項：

canvas: canvas自身的屬性，例如id、style等。
subtitle: 副标題的相關屬性，例如textStyle。
yAxis: 直角坐标系中y軸的相關屬性，例如axisLine、axisTick、axisLabel、splitLine、min、max等。
xAxis: 直角坐标系中x軸的相關屬性，例如axisLine、axisTick、axisLabel、splitLine等。
tooltip: 提示框元件的相關屬性，例如trigger、formatter、axisPointer等。
grid: 直角坐标系内繪圖網格的相關屬性，例如left、right、top、bottom、width、height、containLabel等。
series: 資料系列的相關屬性，例如symbol、symbolSize、itemStyle等。

通過在option參數中設定相應屬性，可以改變ECharts圖表的展現形式。例如，可以通過設定xAxis中的axisLine、axisTick以及axisLabel屬性來自定義x軸，通過設定tooltip屬性來定制提示框的樣式等。

總之，在使用ec-canvas中，需要熟悉各個元件的參數屬性，以及對應的ECharts配置項，以便将canvas上的圖表效果與設計要求相比對。

2. 配置圖表的樣式、類型、資料

在echarts中，通過配置option對象來配置圖表樣式、類型、資料。

option對象是一個包含各種配置參數的json對象，包含多個屬性，每個屬性對應不同的配置項，比如：标題、x軸、y軸、資料等。

下面是一個簡單的示例，用于建立一個柱狀圖例子：

// 引入 ECharts 主子產品
import * as echarts from '../../ec-canvas/echarts';

Page({
  onLoad: function (options) {
    this.setData({
      ec: {
        // 元件 ID
        id: 'chart1',
        // canvas 寬度，機關為px
        width: 360,
        // canvas 高度，機關為px
        height: 240,
        // ECharts配置項
        option: {
          // 圖表的标題
          title: {
            text: '銷售量'
          },
          // 柱狀圖
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    });
  }
})

在上面的代碼中，我們通過在data中設定一個ec對象，然後在onLoad函數中更新這個對象的值。ec對象包含了元件的ID、寬度、高度和option對象。在option中，我們定義了圖表的标題和一個柱狀圖。其中柱狀圖的資料為一個長度為6的數組，每個值對應一個柱子的高度。

可以看出，通過簡單地配置option對象，我們就可以完成資料的設定和圖表的樣式定制。可以根據ECharts的文檔和API進一步了解圖表類型、資料格式以及各種美化操作。

3. 使用setOption方法重新整理圖表

如果需要更新已經繪制的圖表，可以使用setOption方法。

例如，在一個柱狀圖中，我們可以通過點選按鈕，動态地更新資料。

完整的代碼示例如下：

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

let chart = null;

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  
  const option = {
    title: {
      text: '銷售量'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 8]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  updateChart: function() {
    const option = {
      series: [{
        data: [15, 30, 46, 20, 20, 30, 18]
      }]
    };
    chart.setOption(option);
  }
})

在上面代碼中，使用initChart函數初始化圖表，設定了初始option。資料系列中的data用一個長度為7的數組來定義，表示每一個資料點對應的顯示值。在updateChart函數中，通過更改資料系列中的data數組，用setOption方法更新圖表的資料。當觸發按鈕點選事件時，調用updateChart函數實作圖表的重新整理。隻需要更改視圖中圖表對應的option，再調用 setOption 方法進行更新即可。

當然，除了資料的更新，你還可以使用 setOption 函數來更新其他樣式配置，比如标題、坐标系、圖例、标記等。

4. 修改圖表的參數并重新整理畫面

要修改圖表參數并重新整理畫面，可以使用以下兩種方式：

方式一：直接更新option

可以使用 chart.getOption() 擷取目前圖表參數，修改需要修改的屬性後，再用 chart.setOption(option) 方法設定目前參數并重新整理畫面。

例如：

const option = chart.getOption();
option.title.text = "新标題";
option.xAxis[0].data = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
chart.setOption(option);

上述代碼中，我們首先使用 getOption 方法擷取了目前圖表的 option 參數，然後修改了參數中的 title 和 xAxis，最後使用 setOption 方法将新的參數設定并重新整理畫面。這裡修改了标題和x軸，其他的配置同理。

方式二：通過onInit方法更新option

通過修改onInit方法的調用參數，可以進行視圖的重新整理和重新繪制。

例如：

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });

  this.setData({
    chart: chart
  });

  const option = {
    /* ...填寫具體配置項 */
  };

  chart.setOption(option);
}

function updateChart() {
  const option = {
    /* ...填寫修改後的配置項 */
  };
  this.setData({
    ec: {
      onInit: initChart.bind(this),
      lazyLoad: true,
      option: option
    }
  });
}

如上述代碼，我們首先聲明了一個chart變量，用于儲存圖表執行個體。在onInit方法中，除了正常配置項外，還通過setData方法将建立好的圖表執行個體傳給了this.data，這樣我們就可以随時擷取chart執行個體進行操作。

在updateChart函數中，通過setData方法将新的option對象傳遞給了ec-canvas元件，同時在onInit方法中擷取最新的option，并進行了重新繪制操作。

注意：在使用這種方式時，需要将 lazyLoad 屬性設定為 true，這樣 ec-canvas 元件才會調用 onInit 方法，進行更新操作。

綜上，通過修改 option 參數，或者重新調用 onInit 方法，我們就可以更新圖表的參數并重新整理畫面了。不同的修改方式，可以根據具體場景進行選擇。

V.優化echarts小程式版體驗

1. 圖表響應式适配

ECharts 在支援多種圖表類型和豐富的配置選項的同時，也提供了響應式布局方案。

下面是一些常用的 ECharts 響應式适配方案：

使用resize方法：

通過監聽視窗尺寸變化事件，然後使用 chart.resize() 方法重新渲染圖表。

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

Page({
  onLoad: function (options) {
    this.setData({
      ec: {
        id: 'mychart',
        option: {},
        onInit: function (canvas, width, height, dpr) {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr
          });
          this.chart = chart;
          chart.setOption(this.getOption());
          return chart;
        }
      }
    });
  },

  onReady: function () {
    // 監聽視窗尺寸變化事件，執行 resize 方法重新渲染圖表
    wx.onWindowResize(() => {
      this.chart && this.chart.resize();
    });
  },

  getOption: function () {
    return {...}
  },
});

使用grid屬性指定圖表大小：

通過在 grid 屬性中指定圖表長和寬的百分比，實作圖表響應式布局。

const option = {
  title: {
    text: '響應式布局示例'
  },
  grid: {
    width: '80%', // 寬度占 80%
    containLabel: true // 包含刻度标簽

  },
  xAxis: {...},
  yAxis: {...},

  series: {...}

};

使用media資料集：

可以在 option.media 中設定多組屬性，這些屬性将覆寫option中的配置項。通過配置media資料集，可以根據視窗大小，按照不同的寬度，采用不同的配置項。

const option = {
  baseOption: {...},
  media: [
    {
      option: {
        grid: {
          width: '90%'
        },
        series: [{
          type: 'bar',
          barWidth: 20
        }]
      }
    },
    {
      query: {
        minWidth: 800
      },
      option: {
        grid: {
          width: '50%'
        },
        series: [{
          type: 'bar',
          barWidth: 30
        }]
      }
    }
  ]
};

在上面的代碼中，我們定義了兩個media的資料集，分别适用于寬度小于800px和大于800px的場景。通過在media的配置中設定 query 和 option ，可以實作視窗大小判定和對應的配置項設定。

使用flex布局：

重頭戲來啦！相比于前面的幾種方式來說，flex 布局具有更強大的響應式适配能力。

<view class='chart-container'>
  <ec-canvas id='mychart-canvas' canvas-id='mychart-canvas' ec="{{ ec }}" />
</view>

.chart-container{
  display: flex;
  width: 100%;
  height: 400rpx;
}

const option = {...}

Page({
  ...
  getOption() {
    if (someCondition) {
      option.title.text = '第一種配置項';
    } else {
      option.title.text = '第二種配置項';
    }
    return option;
  }
});

在上面的代碼中，我們使用CSS flex布局和onInit中的option配置來實作圖表的響應式适配。

具體來說，我們将 ec-canvas 元件放置在一層 div 容器中，然後通過設定它的 display 屬性為 flex，以父容器的寬度為基準，進行圖表的自适應展示。

同時我們也可以通過在 getOption() 方法中，對不同的情況傳回不同的配置項，以針對不同的螢幕大小進行設定。

2. echarts小程式版的性能與問題解決方案

ECharts 微信小程式版是 ECharts 官方提供的一款專為微信小程式定制和優化的圖表庫，擁有跨平台使用、資料可視化、圖表豐富等特點，同時在性能、穩定性等方面也做了不少優化。

但是，即便是經過了優化，ECharts在微信小程式的使用過程中，也會出現一些問題，例如初始加載慢、過度渲染、記憶體洩漏等。這裡介紹一些常見性能問題及對應解決方案：

1. 初始加載慢

經常會出現由于資料量過大、初始化過程中的複雜計算和渲染等原因，導緻圖表初始加載過慢的情況。這時可以通過一些措施來緩解這種情況：

使用緩存

可以通過在後端緩存資料，前端通過 AJAX 調用資料，然後利用 chart.clear() 和 chart.load() 的資料更新方法來重新整理頁面。

懶加載

可以通過設定 lazyLoad 屬性為 true，當視口進入範圍内時才會初始化圖表，避免不必要的初始計算和渲染。

資料優化

優化單條資料的顯示方式，比如橫軸坐标的旋轉和隐藏、資料的餅圖示簽重疊等。

2. 過度渲染

過度渲染是指當資料過多時，渲染所需的時間就會變得十分長，導緻頁面出現卡頓和操作響應不及時等問題。這裡有幾個解決方案：

資料分段

針對資料量大的問題，可以将資料分段展示，比如分段渲染大資料量的折線圖、柱狀圖等。

圖表共用

将資料分散到多個圖表中展示，互不重疊、互相協作，降低單個圖表的資料負荷。

動态渲染

對于連續-flow 的資料，可以通過動态渲染方式，來減輕一次性渲染的負擔，且互動體驗不會影響整體性能。

3. 記憶體洩漏

記憶體洩漏是一個普遍存在且引發疑難問題的情況，通常會導緻頁面卡頓，甚至直接崩潰的情況。解決方案可以是手動釋放資源、開啟回收機制、優化指派操作等：

手動釋放

在onUnload方法中，釋放對chart執行個體的引用。應避免在視圖銷毀之前，持有圖表執行個體的引用，以便系統可以釋放圖表的相關資源。

啟用分級回收算法

可以在圖表初始化的anchorOption中開啟 animationThreshold 配置項，以便可以在不同的動畫門檻值下顯示動畫。

優化指派操作

對于複雜的圖表或需要 frequent 資料更新的特殊圖表類型，可以考慮避免使用直接指派資料的方式。可以通過合理的資料處理以及增量更新等方式來減輕渲染壓力。

以上是一些常見的問題和解決方案，但在實際開發過程中，遇到的問題和解決方案還有很多，也需要根據實際情況進行優化，以提高使用者體驗和性能。

3. 減少echarts小程式版體積的五種方法

VI. 結語

1. 如何使用ec-canvas實作小程式中的資料可視化

在微信小程式中，由于代碼體積的限制，我們需要考慮對 ECharts 進行體積優化，以便能夠更好地适應微信小程式的開發。

以下是幾個常見的 ECharts 體積優化方案：

1. 異步加載：

可以使用 importScript 或者 wx.request 異步加載，隻有當資料請求成功後，才會進行圖表的渲染，進而實作按需加載。這種方式不僅可以縮短初始加載時間，還可以根據需求動态加載圖表子產品。

2. 按需引入：

ECharts 庫包含了很多元件和功能，但實際應用場景中，并不一定都需要用到。是以，按需引入需要的元件，可以有效地減小 ECharts 庫的體積。可以通過在page.json中配置：

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}

或者在頁面内使用import動态引入：

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

3. 離線打包：

通過使用 ECharts 的離線打包功能（Optimized ECharts），可以在保證功能不變的前提下，将體積從原來的 1.1MB 降低到 300KB 左右。在官網上下載下傳離線打封包件，然後直接引入即可。

4. 使用 gzip：

在使用 ECharts 庫時，提供給前端的 JS 檔案可以通過壓縮（gzip）來減小體積。伺服器傳回時，先判斷使用者的請求是否支援 gzip 壓縮，如果支援，則傳回 gzip 壓縮後的 JS 檔案。

5. 使用 CDN：

在開發過程中，如果遇到體積過大的 ECharts 庫，可以考慮使用 CDN。CDN 服務商會對一些檔案進行大量的緩存，以備下一次使用。這種方式可以緩解壓縮封包件過大的問題，将 ECharts 庫的體積大大減小。

綜上所述，五種方法可以幫助我們在微信小程式中減少 ECharts 庫的體積，提高使用者的使用體驗及性能，可以根據實際情況選擇其中一種或多種方法進行實作。

2. 小程式版的echarts在性能、使用上的不斷優化

ECharts 微信小程式版是 ECharts 官方提供的一款專為微信小程式定制和優化的圖表庫。在開發者不斷的回報和貢獻下，ECharts小程式版也在不斷地進行性能和使用上的優化。

下面是ECharts小程式版的性能和使用上的不斷優化：

1. 增加懶加載機制：

懶加載機制是指，當元件進入可視區域時才進行初始化繪制。這樣既能夠優化初始加載性能，又能避免引起過度渲染等問題，提高使用者體驗。

2. Layout性能優化：

對于常見圖表類型（如折線圖、柱狀圖等），通過 Layout 布局調整、優化和緩存，可以在不影響圖表展示效果的前提下，大大提高渲染性能。

3. 提高繪圖性能：

通過 Canvas 的底層操作和微信小程式中的自定義元件技術，ECharts 微信小程式版大大提高了繪制性能和渲染效果。

4. 完善文檔和示例：

ECharts 微信小程式版還提供了完善的文檔和大量示例代碼，可以幫助開發者更好地掌握使用技巧和最佳實踐。

5. 主動響應問題和需求：

ECharts 小程式版的開發團隊一直密切關注開發者的回報和需求，通過 GitHub Issue 等管道，積極響應問題和需求，及時提供技術支援和解決方案。

綜上所述，ECharts 微信小程式版在性能和使用方面的不斷優化，為開發者提供了更好的體驗和更高的效率，幫助開發者更好地完成微信小程式的資料可視化需求。

ec-canvas 在小程式上的使用

I. 前言

echarts、ec-canvas，在小程式中進行資料可視化的意義

II. 安裝ec-canvas

1. 下載下傳安裝ec-canvas元件

2. 配置元件參數

III. 初識ec-canvas

1. echarts在微信小程式中的工作原理

2. echarts小程式版的局限性與創新點

3. 通過一個簡單的示例了解ec-canvas的基本用法

IV. 使用ec-canvas繪制圖表

1. 根據echarts各元件屬性設定ec-canvas參數

2. 配置圖表的樣式、類型、資料

3. 使用setOption方法重新整理圖表

4. 修改圖表的參數并重新整理畫面

V.優化echarts小程式版體驗

1. 圖表響應式适配

2. echarts小程式版的性能與問題解決方案

3. 減少echarts小程式版體積的五種方法

VI. 結語

1. 如何使用ec-canvas實作小程式中的資料可視化

2. 小程式版的echarts在性能、使用上的不斷優化

繼續閱讀

原生JS-canvas實作畫闆/簽字闆功能前言最簡代碼樣例結果展示代碼講解封裝子產品

微信小小遊戲開發

vue 使用canvas生成含幹擾線的驗證碼

基于vue,js的簡單pc 音樂播放器一.簡介二.項目知識點

安卓筆記[1]--圓形立體按鈕view

自定義view-Android 簡單的滑動開關 ToggleButton

Canvas學習筆記00：canvas基礎知識，入門的開始

手勢移動圓形進度條

Canvas的drawBitmap以及Paint的PorterDuffXfermode使用心得

Android 圖像繪制之Matrix 的使用

android_65_簡易畫畫闆

QT Canvas3D 例子

canvas+js 貪吃蛇實作

HTML5 推箱子遊戲過關示範動畫

HTML5——canvas制作遊戲接住小球

HTML5Canvas 酷炫效果