微信小程序使用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>

参考文章：https://juejin.cn/post/6994742503207337991

微信小程序使用echarts相关推荐

微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
微信小程序使用echarts不显示的问题
前几天在微信小程序中用echarts发现不显示,主要有一下几个可能一.没配置好json,应配置如下 {"usingComponents": {"ec-canvas&qu ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...

微信小程序使用echarts

微信小程序使用echarts相关推荐

最新文章

热门文章