In diesem Artikel erfahren Sie, wie Sie ECharts mit npm in das WeChat-Applet einführen. Ich hoffe, er wird Ihnen hilfreich sein!
Apache ECharts stellt offiziell Codebeispiele und ec-canvas-Komponenten für die Verwendung von Echarts in WeChat-Miniprogrammen bereit, das npm-Paket wurde jedoch nicht veröffentlicht. 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
4、在页面中引入 echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积
import * as echarts from 'echarts' // 从 npm 引入 echarts import * as echarts from './echarts' // 或者从本地引入自定义构建的 echarts
5、然后可以在对应页面的 wxml 中直接使用该组件
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
</view>6、ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例
import * as echarts from 'echarts'
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: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: '#37a2da'
// }
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: '#32c5e9'
// }
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: '#67e0e3'
// }
}
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
echarts,
ec: {
onInit: initChart
}
},
onReady() {
setTimeout(function () {
// 获取 chart 实例的方式
console.log(chart)
}, 2000);
}
})参考代码 examples/taro
npm install echarts-for-weixin
project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。这么做的目的是为了能够共享项目 node_modulesproject.package.json
{
"dependencies": {
"echarts": "^5.1.2",
"echarts-for-weixin": "^1.0.2"
}
}project.config 的 setting 中添加小程序自定义构建 npm 方式，参考 自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "../project.package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}Taro 的开发或者打包命令进行项目开发npm run dev:weapp
dist 文件夹点击开发者工具中的菜单栏：工具 --> 构建 npm
app.config.js 中添加或者在单个需要使用到 echarts 的页面配置中添加引用组件{
"usingComponents": {
"ec-canvas": "echarts-for-weixin"
}
}echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积import * as echarts from 'echarts' // 从 npm 引入 echarts import * as echarts from './echarts' // 或者从本地引入自定义构建的 echarts
echarts 传给组件<ec-canvas
id='mychart-dom-area'
canvas-id='mychart-area'
echarts={echarts} // 将引入的 echarts 传给组件
ec={this.state.ec}
/>ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height
})
canvas.setChart(chart) const model = { yCates: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'], xCates: ['1', '2', '3', '4', '5'], 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] || '-']
}) const option = { tooltip: { position: 'top'
}, animation: false, grid: { bottom: 60, top: 10, left: 80
}, xAxis: { type: 'category', data: model.xCates
}, yAxis: { type: 'category', data: model.yCates
}, visualMap: { min: 1, max: 10, show: false, calculable: true, orient: 'horizontal', left: 'center', bottom: 10, inRange: { color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
}
}, series: [{ name: 'Punch Card', type: 'heatmap', data: data, label: { normal: { show: true
}
}, itemStyle: { emphasis: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
chart.setOption(option) return chart
}export default class Echarts extends React.Component {
state = { ec: { onInit: initChart
}
}
render () { return ( <View className='echarts'> <ec-canvas
id='mychart-dom-area'
canvas-id='mychart-area'
echarts={echarts}
ec={this.state.ec}
/> </View>
)
}
}复制代码参考代码 examples/taro-manual-load
注意：小程序开发者工具打开的项目目录是打包后的 dist
ec-canvas-Komponente zu unterstützen, die echarts weitergibt, um npm zu unterstützen und einzuführen echarts</code > Oder lokal angepasste erstellte <code>echarts, die eher der Web-Entwicklungserfahrung entsprechen. Und geben Sie das Paket npm frei, um die Installation und Verwendung kleiner Programme über npm zu unterstützen. Es unterstützt auch Taro, um bei Bedarf echarts einzuführen, um die Verpackungsgröße zu reduzieren. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]
npm install echarts-for-weixin
tools/demo🎜🎜1 Fügen Sie zunächst die usingComponents-Konfiguration zum JSON hinzu Datei der Seite Field🎜{
"dependencies": {
"echarts-for-weixin": "^1.0.2"
}
}package.json im Projektstammverzeichnis und führen Sie npm install aus, um Abhängigkeiten zu installieren🎜{
copy: {
patterns: [
{ from: 'project.package.json', to: 'dist/package.json' }, // 指定需要 copy 的文件
{ from: 'node_modules/echarts-for-weixin/', to: 'dist/node_modules/echarts-for-weixin/' }
],
options: {}
}
}🎜🎜4. Fügen Sie echarts in die Seite ein. Sie können echarts von npm einführen, oder Sie können lokal benutzerdefinierte echarts einführen, um die Größe zu reduzieren -canvas und wie man das Diagramm initialisiert. Weitere Informationen finden Sie unter Echarts offizielles Applet-Beispiel🎜🎜{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}examples/taro 🎜npm run dev:weapp
project.package.json oder passen Sie den Namen an. Diese Datei ist die package.json des Miniprogramms und Fügen Sie im nächsten Schritt die benutzerdefinierte Build-NPM-Methode des Miniprogramms hinzu. Der Zweck besteht darin, das Projekt node_modulesproject.package.json🎜{
"usingComponents": {
"ec-canvas": "echarts-for-weixin"
}
}setting von project.config hinzu, um die Art und Weise zum Erstellen von npm anzupassen, siehe Erstellen Sie die NPM-Methode durch Anpassen der Speicherorte von node_modules und miniprogram_npm🎜// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// 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 'echarts/charts';
// 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 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
CanvasRenderer,
// SVGRenderer,
} from 'echarts/renderers';
// Register the required components
echarts.use(
[
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
CanvasRenderer,
HeatmapChart,
VisualMapComponent,
VisualMapContinuousComponent,
VisualMapPiecewiseComponent,
]
);Taro aus</ Code> für die Projektentwicklung </li></ol><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;"><ec-canvas
id=&#39;mychart-dom-area&#39;
canvas-id=&#39;mychart-area&#39;
echarts={echarts} // 将引入的 echarts 传给组件
ec={this.state.ec}
/></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><ol start="5"><li>Erstellen Sie npm in den Applet-Entwicklertools. Hinweis: Das vom Mini-Programmentwicklungstool geöffnete Projektverzeichnis ist der Ordner <code>dist
🎜app.config.js oder in eine einzelne Seitenkonfiguration ein, die echarts</ verwenden muss code> Referenzkomponente hinzufügen</li></ol><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">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>
)
}
}</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><ol start="2"><li>Fügen Sie <code>echarts in die Seite ein, Sie können von <code>npm< einführen /code> echarts, Sie können auch lokal benutzerdefinierte echarts einführen, um die Größe zu reduzierenec-canvas zur spezifischen Verwendung und zur Initialisierung übergeben Die Tabelle finden Sie unter< 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">Echarts offizielles Applet-Beispiel🎜examples/taro-manual-load🎜🎜Hinweis: Das vom Miniprogramm-Entwicklertool geöffnete Projektverzeichnis ist das gepackte < code>dist Verzeichnis🎜🎜Vorbereitung🎜🎜1. Abhängigkeiten installieren🎜npm install echarts-for-weixin
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: 'project.package.json', to: 'dist/package.json' }, // 指定需要 copy 的文件
{ from: 'node_modules/echarts-for-weixin/', to: 'dist/node_modules/echarts-for-weixin/' }
],
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
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 'echarts/core';
// 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 'echarts/charts';
// 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 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
CanvasRenderer,
// SVGRenderer,
} from 'echarts/renderers';
// Register the required components
echarts.use(
[
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
CanvasRenderer,
HeatmapChart,
VisualMapComponent,
VisualMapContinuousComponent,
VisualMapPiecewiseComponent,
]
);3、将引入的 echarts 传给组件
<ec-canvas
id='mychart-dom-area'
canvas-id='mychart-area'
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: ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday',
'Sunday'],
xCates: ['1', '2', '3', '4', '5'],
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] || '-']
})
const option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
bottom: 60,
top: 10,
left: 80
},
xAxis: {
type: 'category',
data: model.xCates
},
yAxis: {
type: 'category',
data: model.yCates
},
visualMap: {
min: 1,
max: 10,
show: false,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: 10,
inRange: {
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
}
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
chart.setOption(option)
return chart
}
export default class Echarts extends React.Component {
state = {
ec: {
onInit: initChart
}
}
render () {
return (
<View className='echarts'>
<ec-canvas
id='mychart-dom-area'
canvas-id='mychart-area'
echarts={echarts}
ec={this.state.ec}
/>
</View>
)
}
}5、可以查看小程序开发者工具中的依赖分析，确定文件大小以及是否正确按需引入
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zur Installation und Referenzierung von ECharts im WeChat-Applet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist ECharts?
echarts adaptive Größeneinstellungen
Was ist der Unterschied zwischen JD International Self-Operated und JD Self-Operated?
So legen Sie die Transparenz der HTML-Schriftfarbe fest
Was passiert, wenn ich keine Verbindung zum Netzwerk herstellen kann?
So machen Sie den Hintergrund in PS transparent
So sortieren Sie in Excel
console.readline
