主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文介绍了使用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";,& quotechart -for -微信& quot:& quot^1.0.0";}}3.在小程序开发工具中构建npm。
单击开发人员工具中的菜单栏:工具--》构建npm。
4.将电子图表引入页面。您可以从npm或本地定制的echarts引入echarts以减小尺寸。
将*作为电子图片从& amp#39;埃查特斯& amp#39;//介绍来自npm&的EchartSimport * as e图表;#39;。/echarts & amp;#39;//或者在本地导入自定义构建的echarts5,然后就可以在相应页面的wxml中直接使用这个组件了。
& lt视图class = & 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。(如何安装小程序示例) https://zhujicankao.com/111589.html
评论前必须登录!
注册