Detailed explanation of how to install and reference ECharts in WeChat applet?

This article will introduce to you how to use npm to introduce ECharts into WeChat applet. I hope it will be helpful to you!

Apache ECharts officially providescode examples andec-canvascomponents for using Echartsin WeChat mini programs, but it has not Publish thenpmpackage.

This project is modified on top of the official code to supportec-canvasThe component is passed inechartsto supportnpmIntroductionechartsOrechartsafter local customization, which is more in line withWebdevelopment experience.

And publish thenpmpackage to support the installation and use of small programs through npm. And supportsTaroto introduceechartson demand to reduce the packaging size. [Related learning recommendations:小 program development tutorial]

Installation

npm install echarts-for-weixin

小program reference

Reference codetools/demo

1. First, add the usingComponents configuration field to the json file of the page

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

2. Create the project root directorypackage.jsonand execute npm install to install dependencies

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

3. Build npm in the mini program developer tools

Click the menu bar in the developer tools: Tools--> Build npm

4. Introduceechartsinto the page, you can introduceechartsfromnpm, or you can introduce local custom builtechartsto reduce Volume

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

5. Then you can use the component directly in the wxml of the corresponding page

6. For the specific usage ofec-canvasand how to initialize the chart, please refer toEcharts Official Mini Program Example

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

Taro Reference

Reference Codeexamples/taro

Preparation

1. Installation dependencies

npm install echarts-for-weixin

2. Create a new file in the project root directoryproject.package.jsonOr customize the name. This file is the appletpackage.json, and add the applet to customize the npm build method in the next step. The purpose of this is to be able to share the projectnode_modules

project.package.json

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

3. atAdd a small program to customize the npm building method insettingof project.config, refer toCustomizing the node_modules and miniprogram_npm locations for building npm method

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

4. Execute the development or packaging commands ofTarofor project development

npm run dev:weapp

5. Build npm in the applet developer tool. Note: The project directory opened by the mini program development tool is thedistfolder

Click the menu bar in the developer tools: Tools--> Build npm

Introduce Echarts

1. Add it to the globalapp.config.jsor use it individually if you needechartsAdd the reference component

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

2. to the page configuration and introduceechartsinto the page. You can introduceechartsfromnpm, You can also introduce local custom builtechartsto reduce the size

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

3. Pass the introducedechartsto the component

4. ec-canvasFor specific usage and how to initialize the chart, please refer toEcharts official applet example

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

Taro on-demand reference

Reference codeexamples/taro-manual-load

Note: Mini Program Developer Tools are open The project directory is the packageddistdirectory

Preparation work

1. Install dependencies

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

引入 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 '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传给组件

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

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

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

The above is the detailed content of Detailed explanation of how to install and reference ECharts in WeChat applet?. For more information, please follow other related articles on the PHP Chinese website!