微信小程序封装echarts组件

下载echarts-for-weixin小程序组件，将ec-canvas文件夹放到小程序项目中
创建echarts组件

组件代码

<!-- com-chart/index.wxml -->
<view style="height: {{height}}"><ec-canvas id="{{chartId}}" canvas-id="{{canvasId}}" ec="{{ ec }}"></ec-canvas>
</view>

// com-chart/index.js
import * as echarts from '../../ec-canvas/echarts.min'Component({/*** 组件的属性列表*/properties: {height: {type: String},option: {type: Object,observer(val) {if (Object.keys(val).length) {this.initChart(val)}}}},/*** 组件的初始数据*/data: {chartId: '',canvasId: '',ec: {lazyload: true}},lifetimes: {attached() {this.setData({chartId: `chart_${this.__wxExparserNodeId__}`,canvasId: `canvas_${this.__wxExparserNodeId__}`})this.chart = this.selectComponent('#' + this.data.chartId)}},/*** 组件的方法列表*/methods: {initChart(option) {this.chart.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr})chart.setOption(option)this.chart = chartreturn chart})}}
})

{"component": true,"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

页面引用

{"usingComponents": {"com-chart": "../../components/com-chart/index"}
}

<view><com-chart option="{{option}}" height="400rpx"></com-chart>
</view>

Page({data: {option: {}},onLoad() {setTimeout(() => {this.setData({option: {backgroundColor: "#ffffff",series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '50%'],radius: ['20%', '40%'],data: [{value: 55,name: '北京'}, {value: 20,name: '武汉'}, {value: 10,name: '杭州'}, {value: 20,name: '广州'}, {value: 38,name: '上海'}]}]}})}, 500)}
})

微信小程序封装echarts组件相关推荐

微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...

微信小程序封装echarts组件

微信小程序封装echarts组件相关推荐

最新文章

热门文章