詳解微信小程式中如何安裝和引用ECharts？-小程式開發-PHP中文網

安裝

小程式引用

引入 Echarts

首頁

微信小程式

小程式開發

詳解微信小程式中如何安裝和引用ECharts？

青灯夜游

Oct 19, 2021 am 10:55 AM

echarts npm 微信小程式

這篇文章為大家介紹微信小程式中使用 npm 引入 ECharts 的方法，希望對大家有幫助！

詳解微信小程式中如何安裝和引用ECharts？

Apache ECharts 官方提供了在微信小程式中使用Echarts 的程式碼實例和ec-canvas 元件，但未發布npm 套件。

此專案在官方程式碼之上修改支持ec-canvas# 元件傳入echarts 可支援npm 引入echarts 或本機自訂建置後的echarts，更符合Web 開發體驗。

並且發布 npm 包，支援小程式透過 npm 安裝使用。並支援 Taro 按需引入 echarts 減少打包體積。【相關學習推薦：小程式開發教學】

安裝

npm install echarts-for-weixin

登入後複製

小程式引用

參考程式碼tools/demo

#1、先在頁面的json 檔案加入usingComponents 設定欄位

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}

登入後複製

2、專案根目錄建立package.json 並執行npm install 安裝依賴

{
  "dependencies": {
    "echarts": "^5.1.2",
    "echarts-for-weixin": "^1.0.0"
  }
}

登入後複製

3、小程式開發者工具中建構npm

點選開發者工具中的功能表列：工具--> 建立npm

詳解微信小程式中如何安裝和引用ECharts？

# 4.在頁面中引入echarts，可以從npm 引入echarts，也可以引入本地自訂建構的

echarts

以減少體積

import * as echarts from &#39;echarts&#39; // 从 npm 引入 echarts
import * as echarts from &#39;./echarts&#39; // 或者从本地引入自定义构建的 echarts

登入後複製

5、然後可以在對應頁面的wxml 中直接使用該元件<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas> </view></pre><div class="contentsignin">登入後複製</div></div>6、ec-canvas 的具體用法和如何初始化圖表請參考

Echarts 官方小程式範例

import * as echarts from &#39;echarts&#39;

let chart = null;

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

  var option = {
    tooltip: {
      trigger: &#39;axis&#39;,
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: &#39;shadow&#39;        // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
      },
      confine: true
    },
    legend: {
      data: [&#39;热度&#39;, &#39;正面&#39;, &#39;负面&#39;]
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: &#39;value&#39;,
        axisLine: {
          lineStyle: {
            color: &#39;#999&#39;
          }
        },
        axisLabel: {
          color: &#39;#666&#39;
        }
      }
    ],
    yAxis: [
      {
        type: &#39;category&#39;,
        axisTick: { show: false },
        data: [&#39;汽车之家&#39;, &#39;今日头条&#39;, &#39;百度贴吧&#39;, &#39;一点资讯&#39;, &#39;微信&#39;, &#39;微博&#39;, &#39;知乎&#39;],
        axisLine: {
          lineStyle: {
            color: &#39;#999&#39;
          }
        },
        axisLabel: {
          color: &#39;#666&#39;
        }
      }
    ],
    series: [
      {
        name: &#39;热度&#39;,
        type: &#39;bar&#39;,
        label: {
          normal: {
            show: true,
            position: &#39;inside&#39;
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#37a2da&#39;
          // }
        }
      },
      {
        name: &#39;正面&#39;,
        type: &#39;bar&#39;,
        stack: &#39;总量&#39;,
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#32c5e9&#39;
          // }
        }
      },
      {
        name: &#39;负面&#39;,
        type: &#39;bar&#39;,
        stack: &#39;总量&#39;,
        label: {
          normal: {
            show: true,
            position: &#39;left&#39;
          }
        },
        data: [-20, -32, -21, -34, -90, -130, -110],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#67e0e3&#39;
          // }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    echarts,
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      console.log(chart)
    }, 2000);
  }
})

登入後複製

Taro 引用#參考程式碼

examples/taro

#安裝相依性

```
npm install echarts-for-weixin
```
登入後複製
登入後複製
登入後複製
在專案根目錄中新檔案project.package.json 或自訂命名，此檔案是小程式的 package.json，並在下一步中新增小程式自訂建置npm 方式。這麼做的目的是為了能夠共享專案

#project.package.json

```
{
  "dependencies": {
    "echarts": "^5.1.2",
    "echarts-for-weixin": "^1.0.2"
  }
}
```
登入後複製
#在 project.config 的setting 中新增小程式自訂建置npm 方式，參考

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "../project.package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

登入後複製

執行

的開發或打包指令進行專案開發

```
npm run dev:weapp
```
登入後複製
登入後複製
小程式開發者工具中建置npm。注意：小程式開發工具開啟的專案目錄是

資料夾

點選開發者工具中的功能表列：工具--> 建立npm 詳解微信小程式中如何安裝和引用ECharts？

在全域的app.config.js 中新增或在單一需要使用到

的頁面配置中加入引用元件

```
{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}
```
登入後複製
登入後複製
登入後複製
在頁面中引入echarts，可以從npm 引入echarts，也可以引入本地自訂建置的

以減少體積

import * as echarts from &#39;echarts&#39; // 从 npm 引入 echarts
import * as echarts from &#39;./echarts&#39; // 或者从本地引入自定义构建的 echarts

登入後複製

將引入的

傳給元件

<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 将引入的 echarts 传给组件
  ec={this.state.ec}
/>

登入後複製

ec-canvas 的具體用法和如何初始化圖表請參考

範例代碼

function initChart(canvas, width, height) {  const chart = echarts.init(canvas, null, {    width: width,    height: height
  })
  canvas.setChart(chart)  const model = {    yCates: [&#39;Saturday&#39;, &#39;Friday&#39;, &#39;Thursday&#39;,      &#39;Wednesday&#39;, &#39;Tuesday&#39;, &#39;Monday&#39;,      &#39;Sunday&#39;],    xCates: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;],    data: [      // [yCateIndex, xCateIndex, value]
      [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
      [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
      [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
      [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
      [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
      [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
      [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
    ]
  }  const data = model.data.map(function (item) {    return [item[1], item[0], item[2] || &#39;-&#39;]
  })  const option = {    tooltip: {      position: &#39;top&#39;
    },    animation: false,    grid: {      bottom: 60,      top: 10,      left: 80
    },    xAxis: {      type: &#39;category&#39;,      data: model.xCates
    },    yAxis: {      type: &#39;category&#39;,      data: model.yCates
    },    visualMap: {      min: 1,      max: 10,      show: false,      calculable: true,      orient: &#39;horizontal&#39;,      left: &#39;center&#39;,      bottom: 10,      inRange: {        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#91F2DE&#39;, &#39;#FFDB5C&#39;, &#39;#FF9F7F&#39;],
      }
    },    series: [{      name: &#39;Punch Card&#39;,      type: &#39;heatmap&#39;,      data: data,      label: {        normal: {          show: true
        }
      },      itemStyle: {        emphasis: {          shadowBlur: 10,          shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
        }
      }
    }]
  }

  chart.setOption(option)  return chart
}export default class Echarts extends React.Component {

  state = {    ec: {      onInit: initChart
    }
  }

  render () {    return (      <View className=&#39;echarts&#39;>        <ec-canvas 
          id=&#39;mychart-dom-area&#39; 
          canvas-id=&#39;mychart-area&#39; 
          echarts={echarts} 
          ec={this.state.ec}
        />      </View>
    )
  }
}复制代码

登入後複製

Taro 按需引用參考代碼

examples/taro-manual-load

注意：小程式開發者工具打開的專案目錄是打包後的

dist

2、在项目根目录中新建文件 project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。并配置 config/index.js 中的 copy 选项，将 project.package.json 复制到 dist 目录下并且重命名为 package.json。并且复制 node_modules/echarts-for-weixin 至 dist/node_modules/echarts-for-weixin 避免在小程序开发者工具中打开的项目重新安装依赖

project.package.json

{
  "dependencies": {
    "echarts-for-weixin": "^1.0.2"
  }
}

登入後複製

config/index.js

{
  copy: {
    patterns: [
      { from: &#39;project.package.json&#39;, to: &#39;dist/package.json&#39; }, // 指定需要 copy 的文件
      { from: &#39;node_modules/echarts-for-weixin/&#39;, to: &#39;dist/node_modules/echarts-for-weixin/&#39; }
    ],
    options: {}
  }
}

登入後複製

3、在 project.config 的 setting 中添加小程序自定义构建 npm 方式，参考自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

登入後複製

4、执行 Taro 的开发或者打包命令进行项目开发

npm run dev:weapp

登入後複製

5、小程序开发者工具中构建 npm。注意：小程序开发工具打开的项目目录是 dist 文件夹

点击开发者工具中的菜单栏：工具 --> 构建 npm

詳解微信小程式中如何安裝和引用ECharts？

引入 Echarts

1、在全局的 app.config.js 中添加或者在单个需要使用到 echarts 的页面配置中添加引用组件

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}

登入後複製

2、在页面中引入 echarts/core 和需要的组件，Taro 打包会只打包引入的组件，这样达到按需引入的目的

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from &#39;echarts/core&#39;;
// Import charts, all with Chart suffix
import {
  // LineChart,
  BarChart,
  // PieChart,
  // ScatterChart,
  // RadarChart,
  // MapChart,
  // TreeChart,
  // TreemapChart,
  // GraphChart,
  // GaugeChart,
  // FunnelChart,
  // ParallelChart,
  // SankeyChart,
  // BoxplotChart,
  // CandlestickChart,
  // EffectScatterChart,
  // LinesChart,
  // HeatmapChart,
  // PictorialBarChart,
  // ThemeRiverChart,
  // SunburstChart,
  // CustomChart,
} from &#39;echarts/charts&#39;;
// import components, all suffixed with Component
import {
  // GridSimpleComponent,
  GridComponent,
  // PolarComponent,
  // RadarComponent,
  // GeoComponent,
  // SingleAxisComponent,
  // ParallelComponent,
  // CalendarComponent,
  // GraphicComponent,
  // ToolboxComponent,
  TooltipComponent,
  // AxisPointerComponent,
  // BrushComponent,
  TitleComponent,
  // TimelineComponent,
  // MarkPointComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // LegendComponent,
  // LegendScrollComponent,
  // LegendPlainComponent,
  // DataZoomComponent,
  // DataZoomInsideComponent,
  // DataZoomSliderComponent,
  // VisualMapComponent,
  // VisualMapContinuousComponent,
  // VisualMapPiecewiseComponent,
  // AriaComponent,
  // TransformComponent,
  DatasetComponent,
} from &#39;echarts/components&#39;;
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
  // SVGRenderer,
} from &#39;echarts/renderers&#39;;
// Register the required components
echarts.use(
  [
    TitleComponent,
    TooltipComponent, 
    GridComponent, 
    BarChart, 
    CanvasRenderer, 
    HeatmapChart, 
    VisualMapComponent,
    VisualMapContinuousComponent,
    VisualMapPiecewiseComponent,
  ]
);

登入後複製

3、将引入的 echarts 传给组件

<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 将引入的 echarts 传给组件
  ec={this.state.ec}
/>

登入後複製

4、ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)
  const model = {
    yCates: [&#39;Saturday&#39;, &#39;Friday&#39;, &#39;Thursday&#39;,
      &#39;Wednesday&#39;, &#39;Tuesday&#39;, &#39;Monday&#39;,
      &#39;Sunday&#39;],
    xCates: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;],
    data: [
      // [yCateIndex, xCateIndex, value]
      [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
      [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
      [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
      [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
      [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
      [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
      [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
    ]
  }

  const data = model.data.map(function (item) {
    return [item[1], item[0], item[2] || &#39;-&#39;]
  })

  const option = {
    tooltip: {
      position: &#39;top&#39;
    },
    animation: false,
    grid: {
      bottom: 60,
      top: 10,
      left: 80
    },
    xAxis: {
      type: &#39;category&#39;,
      data: model.xCates
    },
    yAxis: {
      type: &#39;category&#39;,
      data: model.yCates
    },
    visualMap: {
      min: 1,
      max: 10,
      show: false,
      calculable: true,
      orient: &#39;horizontal&#39;,
      left: &#39;center&#39;,
      bottom: 10,
      inRange: {
        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#91F2DE&#39;, &#39;#FFDB5C&#39;, &#39;#FF9F7F&#39;],
      }
    },
    series: [{
      name: &#39;Punch Card&#39;,
      type: &#39;heatmap&#39;,
      data: data,
      label: {
        normal: {
          show: true
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
        }
      }
    }]
  }

  chart.setOption(option)
  return chart
}

export default class Echarts extends React.Component {

  state = {
    ec: {
      onInit: initChart
    }
  }

  render () {
    return (
      <View className=&#39;echarts&#39;>
        <ec-canvas 
          id=&#39;mychart-dom-area&#39; 
          canvas-id=&#39;mychart-area&#39; 
          echarts={echarts} 
          ec={this.state.ec}
        />
      </View>
    )
  }
}

登入後複製

5、可以查看小程序开发者工具中的依赖分析，确定文件大小以及是否正确按需引入

詳解微信小程式中如何安裝和引用ECharts？

更多编程相关知识，请访问：编程入门！！

以上是詳解微信小程式中如何安裝和引用ECharts？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1653

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1251

C# 教程

1224

Related knowledge

閒魚微信小程式正式上線 Feb 10, 2024 pm 10:39 PM

閒魚官方微信小程式悄悄上線，在小程式中可以發布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等，有用好奇閒魚微信小程式叫什麼，現在快來看一下。閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能；3、想要使用的話必要要開通微信支付才可以購買；

ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖 Dec 17, 2023 pm 10:37 PM

ECharts和Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖，需要具體程式碼範例隨著網路時代的到來，資料分析變得越來越重要。統計圖表是一種非常直觀而有力的展示方式，透過圖表可以更清楚地展示數據，讓人們更能理解數據的內涵和規律。在Java開發中，我們可以使用ECharts和Java介面來快速實現各種統計圖表的展示。 ECharts是一款由百度開發

如何利用php介面和ECharts產生可視化的統計圖表 Dec 18, 2023 am 11:39 AM

在今天數據視覺化變得越來越重要的背景下，許多開發者都希望能夠利用各種工具，快速產生各種圖表與報表，以便能夠更好的展示數據，幫助決策者快速做出判斷。而在此背景下，利用Php介面和ECharts函式庫可以幫助許多開發者快速產生可視化的統計圖表。本文將詳細介紹如何利用Php介面和ECharts庫產生視覺化的統計圖表。在具體實作時，我們將使用MySQL

使用ECharts和Python介面繪製儀錶板的步驟 Dec 18, 2023 am 08:40 AM

使用ECharts和Python介面繪製儀錶板的步驟，需要具體程式碼範例摘要：ECharts是一款優秀的資料視覺化工具，透過Python介面可以方便地進行資料處理和圖形繪製。本文將介紹使用ECharts和Python介面繪製儀錶板的具體步驟，並提供範例程式碼。關鍵字：ECharts、Python介面、儀錶板、資料視覺化簡介儀錶板是一種常用的資料視覺化形式，它透過

如何在ECharts中使用地圖熱力圖展示城市熱度 Dec 18, 2023 pm 04:00 PM

如何在ECharts中使用地圖熱力圖展示城市熱度ECharts是一款功能強大的視覺化圖表庫，它提供了各種圖表類型供開發人員使用，包括地圖熱力圖。地圖熱力圖可以用來展示城市或地區的熱度，幫助我們快速了解不同地方的熱門程度或密集程度。本文將介紹如何使用ECharts中的地圖熱力圖來展示城市熱度，並提供程式碼範例供參考。首先，我們需要一個包含地理資訊的地圖文件，EC

閒魚微信小程式叫什麼 Feb 27, 2024 pm 01:11 PM

閒魚官方微信小程式已經悄悄上線，它為用戶提供了一個便捷的平台，讓你可以輕鬆地發布和交易閒置物品。在小程式中，你可以與買家或賣家進行私訊交流，查看個人資料和訂單，以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢，這篇教學攻略將為您詳細介紹，想要了解的用戶們快來跟著本文繼續閱讀吧！閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能；3、

如何在ECharts中使用長條圖展示數據 Dec 18, 2023 pm 02:21 PM

如何在ECharts中使用長條圖展示資料ECharts是一款基於JavaScript的資料視覺化函式庫，在資料視覺化的領域非常流行且使用廣泛。其中，長條圖是最常見和常用的圖表類型，可以用來顯示各種數值資料的大小、比較和趨勢分析。本文將介紹如何使用ECharts來繪製長條圖，並提供程式碼範例。首先，我們需要在HTML檔案中引入ECharts庫，可以透過以下方式引

ECharts和golang技術指南: 創建各類統計圖表的實用秘籍 Dec 17, 2023 pm 09:56 PM

ECharts和golang技術指南:創建各類統計圖表的實用秘籍，需要具體程式碼範例導語：在現代化的資料視覺化領域，統計圖表是資料分析和視覺化的重要工具。 ECharts是一個強大的資料視覺化函式庫，而golang是一種快速，可靠且有效率的程式語言。本文將向您介紹如何使用ECharts和golang建立各種類型的統計圖表，並提供程式碼範例，幫助您掌握這項技能。準備工作

See all articles

詳解微信小程式中如何安裝和引用ECharts？

安裝

小程式引用

目錄

引入 Echarts

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題