admin 管理员组

文章数量: 888526

微信小程序使用echarts

前期准备：
1.echarts提供了一个微信小程序原生组件，下载地址：ecomfe/echarts-for-weixin ，拿到 ec-canvas 文件夹
2. 到 echarts官网 在线定制组件包

注意：版本一定要和 ec-canvas 相同

3.将下载的 echarts.min.js 替换掉原本的 echarts.js ，小程序文件过大影响发布
4.引入

ec-canvas.json

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

ec-canvas.wxml

<view class="ec-container"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>

注意：记得给容器设置宽高，否则会出现空白

ec-canvas.js

import * as echarts from '../../components/ec-canvas/echarts.min'
Page({data: {ec: {lazyLoad: true},},onReady: function () {// 手动获取到echart节点this.compBar = this.selectComponent('#mychart-dom-bar')this.loadData()},loadData: function () {api.getData().then(res => {// 数据处理const opts = {// ...}if (this.chartBar) {this.chartBar.setOption(opts)} else {this.initBar(opts)}})},initBar: function (option) {if(!this.compBar){this.compBar = this.selectComponent('#mychart-dom-bar')}this.compBar.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 像素});chart.setOption(option)this.chartBar = chartreturn chart})},
});

如果需要复用，可以封装成组件

my-ec-canvas.wxml

<view class="my-ec-container"><ec-canvas id="{{chartId}}" canvas-id="{{canvasId}}" ec="{{ec}}"></ec-canvas>
</view>

my-ec-canvas.js

import * as echarts from '../../components/ec-canvas/echarts.min'Component({properties: {chartId: {type: String,value: null},canvasId: {type: String,value: null},chartOpts: {type: Object,value: {}}},data: {ec: {lazyLoad: true}},methods: {initChart(options) {if(!this.chartComp){this.chartComp = this.selectComponent(`#${this.properties.chartId}`)}this.chartComp && this.chartComp.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr})chart.setOption(options)this.chart = chartreturn chart})}},observers: {'chartOpts': function (opts) {if (this.chart) {this.chart.setOption(opts)} else {this.initChart(opts)}}}
})

使用组件，传入 id，options 配置即可

<my-ec-canvas chartId="{{chartDomId}}" canvas-id="{{canvasId}}" chartOpts="{{optionsData}}"></my-ec-canvas>

参考文章：

本文标签： 微信小程序使用echarts

版权声明：本文标题：微信小程序使用echarts 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688275625h200353.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。