VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

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

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

详细讲解如何在微信小程序中安装和引用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。

1.png

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。(如何安装小程序示例) https://zhujicankao.com/111589.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!