Explication détaillée de la façon d'installer et de référencer ECharts dans l'applet WeChat ?-Développement de mini-programmes-php.cn

Cet article vous expliquera comment utiliser npm pour introduire ECharts dans l'applet WeChat. J'espère qu'il vous sera utile !

Explication détaillée de la façon d'installer et de référencer ECharts dans l'applet WeChat ?

Apache ECharts fournit officiellement des exemples de code et des composants ec-canvas pour utiliser Echarts dans les mini-programmes WeChat, mais le package npm n'a pas été publié. ec-canvas 组件，但是未发布 npm 包。

此项目在官方代码之上修改支持 ec-canvas 组件传入 echarts 可支持 npm 引入 echarts 或本地自定义构建后的 echarts，更符合 Web 开发体验。

并且发布 npm 包，支持小程序通过 npm 安装使用。并支持 Taro 按需引入 echarts 减小打包体积。【相关学习推荐：小程序开发教程】

安装

npm install echarts-for-weixin

Copier après la connexion

小程序引用

参考代码 tools/demo

1、首先在页面的 json 文件加入 usingComponents 配置字段

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

Copier après la connexion

2、项目根目录创建 package.json 并执行 npm install 安装依赖

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

Copier après la connexion

3、小程序开发者工具中构建 npm

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

Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?

4、在页面中引入 echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积

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

Copier après la connexion

5、然后可以在对应页面的 wxml 中直接使用该组件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
</view>

Copier après la connexion

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);
  }
})

Copier après la connexion

Taro 引用

参考代码 examples/taro

准备工作

安装依赖

npm install echarts-for-weixin

Copier après la connexion

在项目根目录中新建文件 project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。这么做的目的是为了能够共享项目 node_modules

project.package.json

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

Copier après la connexion

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

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

Copier après la connexion

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

npm run dev:weapp

Copier après la connexion

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

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

Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?

引入 Echarts

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

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

Copier après la connexion

在页面中引入 echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积

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

Copier après la connexion

将引入的 echarts 传给组件

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

Copier après la connexion

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>
    )
  }
}复制代码

Copier après la connexion

Taro 按需引用

参考代码 examples/taro-manual-load

注意：小程序开发者工具打开的项目目录是打包后的 dist

Ce projet est modifié au-dessus du code officiel pour prendre en charge le composant ec-canvas en passant dans echarts pour prendre en charge npm et en introduisant echarts</code > Ou des <code>echarts personnalisés localement, ce qui est plus conforme à l'expérience de développement Web.

Et publiez le package npm pour prendre en charge l'installation et l'utilisation de petits programmes via npm. Il prend également en charge Taro pour introduire des echarts à la demande afin de réduire la taille de l'emballage. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes

]

Installation

npm install echarts-for-weixin

Copier après la connexion

Référence du mini programme

🎜Code de référence tools/demo🎜🎜1 Tout d'abord, ajoutez la configuration usingComponents au json. fichier de la page Field🎜

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

Copier après la connexion

🎜2. Créez package.json dans le répertoire racine du projet et exécutez npm install pour installer les dépendances🎜

{
  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: {}
  }
}

Copier après la connexion

🎜3. Construisez npm dans les outils de développement du mini programme🎜🎜Cliquez sur le bouton. barre de menu dans les outils de développement : Outils--> Build npm🎜🎜 1. png

🎜🎜4. Introduisez des echarts dans la page. Vous pouvez introduire des echarts depuis npm, ou vous pouvez introduire des echarts personnalisés localement pour réduire la taille🎜

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

Copier après la connexion

🎜5 Ensuite, vous pouvez utiliser ce composant directement dans le wxml de la page correspondante🎜

npm run dev:weapp

Copier après la connexion

🎜6. -canvas et comment initialiser le graphique Veuillez vous référer à Exemple d'applet officiel Echarts🎜🎜

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

Copier après la connexion

Référence Taro

🎜 Code de référence exemples/taro 🎜

Préparation🎜

Installer les dépendances

// 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,
  ]
);

Copier après la connexion

Créez un nouveau fichier dans le répertoire racine du projet. Fichier project.package.json ou personnalisez le nom. Ce fichier est le package.json du mini-programme, et ajoutez la méthode npm de construction personnalisée du mini-programme à l'étape suivante. Le but de ceci est de pouvoir partager le projet node_modules

🎜project.package.json🎜

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

Copier après la connexion

Ajoutez un mini programme dans le setting de project.config pour personnaliser la façon de construire npm, reportez-vous à Construisez la méthode npm en personnalisant les emplacements node_modules et miniprogram_npm🎜

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>
    )
  }
}

Copier après la connexion

Exécutez des commandes de développement ou d'empaquetage de Taro</ code> pour le développement de projets </li></ol>rrreee<ol start="5"><li>Construisez npm dans les outils de développement d'applets. Remarque : Le répertoire du projet ouvert par l'outil de développement de mini-programmes est le dossier <code>dist

🎜Cliquez sur la barre de menu dans les outils de développement : Outils--> 🎜 Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?

Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?

🎜

Introduisez Echarts🎜
Ajoutez-le dans le `app.config.js` global ou dans une configuration d'une seule page qui doit utiliser `echarts< /code> Ajouter un composant de référence</li></ol>rrreee<ol start="2"><li>Introduire <code>echarts` dans la page, vous pouvez introduire `depuis <code>npm` echarts, vous pouvez également introduire des `echarts` locaux personnalisés pour réduire la taille
rrreee
Le Les < code>echarts introduits sont transmis au composant
rrreee
`ec-canvas` pour une utilisation spécifique et comment initialisez le graphique, veuillez vous référer à< a href="https://github.com/ecomfe/echarts-for-weixin#%E5%88%9B%E5%BB%BA%E5%9B%BE%E8%A1 %A8" target="_blank" ref="nofollow noopener noreferrer">Exemple d'applet officiel Echarts🎜
Exemple de code
rrreee

Référence Taro sur demande

🎜Code de référence examples/taro-manual-load🎜🎜Remarque : Le répertoire de projet ouvert par l'outil de développement de mini-programmes est le package

dist</code > Répertoire🎜🎜Préparation🎜🎜1 Installer les dépendances🎜.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">npm install echarts-for-weixin</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>2、在项目根目录中新建文件 <code>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"
  }
}

Copier après la connexion

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: {}
  }
}

Copier après la connexion

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

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

Copier après la connexion

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

npm run dev:weapp

Copier après la connexion

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

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

Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?

引入 Echarts

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

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

Copier après la connexion

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,
  ]
);

Copier après la connexion

3、将引入的 echarts 传给组件

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

Copier après la connexion

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>
    )
  }
}

Copier après la connexion

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

Explication détaillée de la façon dinstaller et de référencer ECharts dans lapplet WeChat ?