ホームページ > 記事 > WeChat アプレット > WeChat アプレットに EChart をインストールして参照する方法について詳しく説明します。
WeChat アプレットに EChart をインストールして参照する方法について詳しく説明します。
- 青灯夜游転載
- 2021-10-19 10:55:184446ブラウズ
この記事では、npm を使用して WeChat アプレットに EChart を導入する方法を紹介します。
Apache ECharts は、WeChat ミニ プログラムで Echarts を使用するための コード サンプルと ec-canvas コンポーネントを公式に提供していますが、まだ提供されていません。 npm パッケージを公開します。
このプロジェクトは、ec-canvas をサポートするために公式コードの上に変更されています。このコンポーネントは、npm をサポートするために echarts に渡されます。 ##echarts または、ローカル カスタマイズ後の echarts。これは、Web の開発経験により一致します。
npm パッケージを公開します。また、Taro をサポートして、オンデマンドで echarts を導入し、パッケージ サイズを削減します。 [関連する学習の推奨事項: 簡単なプログラム開発チュートリアル]
npm install echarts-for-weixin
小さなプログラム リファレンスリファレンス コードツール/デモ
<pre class="brush:js;toolbar:false;">{ "usingComponents": { "ec-canvas": "echarts-for-weixin" } }</pre>
2 の json ファイルに usingComponents 構成フィールドを追加します。プロジェクトのルート ディレクトリpackage.json を作成し、npm install を実行します。依存関係をインストールします
{
"dependencies": {
"echarts": "^5.1.2",
"echarts-for-weixin": "^1.0.0"
}
} 3. ミニ プログラム開発者ツールで npm をビルドします開発者ツールのメニュー バーをクリックします: [ツール]-->[npm をビルド]
echarts をページに導入します。npm から echarts を導入することも、ローカルのカスタム ビルドの echarts を導入することもできます。 ボリュームを削減するには
import * as echarts from 'echarts' // 从 npm 引入 echarts import * as echarts from './echarts' // 或者从本地引入自定义构建的 echarts5。その後、対応するページの wxml でコンポーネントを直接使用できます
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
</view>6。
リファレンス コード
examples/taro# を参照してください。 ##準備
インストールの依存関係
- プロジェクトのルート ディレクトリに新しいファイルを作成します
npm install echarts-for-weixin
- または、名前をカスタマイズします。このファイルはアプレット
- package.json
であり、次のステップで npm ビルド メソッドをカスタマイズするためにアプレットを追加します。この目的は、プロジェクトnode_modules project.package.json
{
"dependencies": {
"echarts": "^5.1.2",
"echarts-for-weixin": "^1.0.2"
}
}- の
- setting
に、npm ビルド メソッドをカスタマイズするための小さなプログラムを追加します。npm メソッドをビルドするための node_modules および miniprogram_npm の場所のカスタマイズを参照してください。{ "setting": { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "../project.package.json", "miniprogramNpmDistDir": "./" } ] } }プロジェクト開発用の
- の開発コマンドまたはパッケージ化コマンドを実行します。
<pre class="brush:js;toolbar:false;">npm run dev:weapp</pre>アプレット開発者ツールで npm をビルドします。注: ミニ プログラム開発ツールによって開かれるプロジェクト ディレクトリは、
- フォルダーです。
-
開発者ツールのメニュー バーをクリックします: [ツール]-->[Build npm]
Echarts の導入
グローバル
app.config.js- に追加するか、
- echarts が必要な場合は個別に使用します
参照コンポーネント<pre class="brush:js;toolbar:false;">{ "usingComponents": { "ec-canvas": "echarts-for-weixin" } }</pre> をページ構成に追加し、
- をページに導入します。## から
- echarts
を導入できます。 #npm、ローカルのカスタム ビルド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 具体的な使用方法とチャートの初期化方法については、
examples/taro-manual-load
注意: ミニ プログラム開発者ツールが開いています プロジェクト ディレクトリは、パッケージ化された
dist ディレクトリです準備作業
1. 依存関係をインストールします<pre class="brush:js;toolbar:false;">npm install echarts-for-weixin</pre><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"
}
}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 的开发或者打包命令进行项目开发
5、小程序开发者工具中构建 npm。注意：小程序开发工具打开的项目目录是 dist 文件夹
点击开发者工具中的菜单栏：工具 --> 构建 npm
引入 Echarts
1、在全局的 app.config.js 中添加或者在单个需要使用到 echarts 的页面配置中添加引用组件
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、可以查看小程序开发者工具中的依赖分析，确定文件大小以及是否正确按需引入
更多编程相关知识，请访问：编程入门！！
以上がWeChat アプレットに EChart をインストールして参照する方法について詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。