详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)

本文介绍了使用npm将echarts引入微信小程序的方法，希望对您有所帮助！

Apache ECharts官方提供了在微信小程序中使用ECharts的代码示例和ec-canvas组件，但npm包尚未发布。

本项目在官方代码的基础上进行修改，支持ec-canvas组件传入echarts，支持npm引入echarts或本地定制的echarts，更符合Web开发体验。

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

安装npm安装echart -for -微信小程序参考参考代码工具/演示。

1.首先，将usingComponents配置字段添加到页面的json文件中。

{ & quot使用组件& quot:{ & quotec-画布& quot:& quotechart -for -微信& quot}}2.在项目根目录中创建package.json并实现npm install安装依赖项。

{ & quot依赖性& quot:{ & quotecharts & quot:& quot^5.1.2&quot；，& quotechart -for -微信& quot:& quot^1.0.0&quot；}}3.在小程序开发工具中构建npm。

单击开发人员工具中的菜单栏:工具--》构建npm。

4.将电子图表引入页面。您可以从npm或本地定制的echarts引入echarts以减小尺寸。

将*作为电子图片从& amp#39;埃查特斯& amp#39;//介绍来自npm&的EchartSimport * as e图表；#39;。/echarts & amp；#39;//或者在本地导入自定义构建的echarts5，然后就可以在相应页面的wxml中直接使用这个组件了。

& lt视图class = & quot容器&quot& gt& ltec-画布id = & quotmy chart -DOM -bar & quot；can vas -id = & quot；我的图表-条形& quotecharts = & quot{ { echarts } } & quotec = & quot{ { ec } } & quot& gt& lt/ec-画布& gt& lt/view & gt；6.ec-canvas的具体用法以及如何初始化图表，请参考Echarts官方小程序的示例。

将*作为电子图片从& amp#39;埃查特斯& amp#39;让chart = null函数init chart（canvas，width，height，DPR）{ chart = echarts . init（canvas，null，{ width: width，height: height，devicepixelpratio:DPR//new }）；canvas.setChart（图表）；var option = { tooltip: { trigger:#39;axis & amp#39;，axisPointer: {//轴指示器，轴触发器有效类型:&；#39;影子& amp#39;//默认为直线，可以选择:&；#39;线与线。#39;| & amp#39;影子& amp#39;}，confinet:true }，图例:{ data:

介绍Echarts并在全局app.config.js或需要使用echarts的单个页面配置中添加参考组件。使用组件& quot:{ & quotec-画布& quot:& quotechart -for -微信& quot}}将echarts引入页面您可以从npm或本地自定义的echarts中引入echarts，以减少从& amp；#39;埃查特斯& amp#39;//介绍来自npm&的EchartSimport * as e图表；#39;。/echarts & amp；#39;//或者在本地导入自定义构建的echarts，并将导入的echarts传递给组件；关于ec-canvas的具体用法以及如何初始化图表，请参考示例代码函数init chart（canvas，width，height）{ const chart = e charts。init（canvas，null，{ width: width，height:height }）canvas . setchart（chart）const model = { y cates:

介绍Echarts1、在全局app.config.js中添加引用组件或在需要使用Echarts的单个页面配置中添加引用组件。

{ & quot使用组件& quot:{ & quotec-画布& quot:& quotechart -for -微信& quot}}2.在页面中介绍echarts/core和所需的组件。芋头包装只会对进口组件进行包装，从而达到按需引进的目的。

//导入echarts核心模块，该模块提供了将echarts.import *用作来自& amp#39;echarts/core & amp；#39;；//导入图表，全部带图表后缀import { // LineChart，BarChart，// PieChart，// ScatterChart，// RadarChart，// MapChart，// TreeChart，// GaugeChart，// FunnelChart，// ParallelChart，// SankeyChart，// BoxplotChart，// CandlestickChart，//effectscatchart，// LineChart，// HeatmapChart，// PictorialBarChart，//theriverchart，//sunburschart，// CustomChart，} from#39;电子图表和图表。#39;；//导入组件，均以component import {//GridSimpleComponent，GridComponent，// PolarComponent，// RadarComponent，// GeoComponent，//singlaxiscomponent，//calendarccomponent，// GraphicComponent，// ToolboxComponent，TooltipComponent，//axiscoptercomponent，// BrushComponent，TitleComponent，// TimelineComponent，// MarkPointComponent，// MarkLineComponent，//markreacomponent，//legend#39;电子汽车/零部件及配件。#39;；//导入渲染器，请注意引入CanvasRenderer或SVGRenderer是必需的步骤import { CanvasRenderer ，// SVGRenderer ，} from & amp#39;电子美术/渲染器和。#39;；//注册所需的componentsecharts.use（

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

这几篇文章你可能也喜欢：

• 微信小程序中echarts的用法以及你可能遇到的坑，快来收藏避雷吧！！（微信小程序echarts降低等级）
• 详细讲解如何在微信小程序中安装和引用ECharts。(微信小程序安装包)

本文由主机参考刊发，转载请注明：详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例) https://zhujicankao.com/111589.html