引入echarts组件

前往echarts微信版的github地址: https://github.com/ecomfe/echarts-for-weixin
拷贝 ec-canvas 目录到你的微信小程序中
在页面中使用

//json页面
{"usingComponents": {"ec-canvas": "../../components/ec-canvas/ec-canvas"}
}

// js页面
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 像素});canvas.setChart(chart);var option = {...};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart}}
});

这里注意要给ec-canvas设置一定的高度和宽度

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

展示echarts图表数据

1.最基本的使用
前往echarts文档的地址: https://echarts.apache.org/examples/zh/index.html
找到你心仪的图表样式

然后复制option 的内容到自己项目代码的option中即可展示最基本的图表

延迟加载图表

无用代码删除后的精简版

import * as echarts from "../../components/ec-canvas/echarts";
function line_set(chart, data) {//xdata, ydata分别表示x轴数据和y轴数据var option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: data,type: "line",},],};chart.setOption(option);
}Page({data: {ec: {lazyLoad: true, //延迟加载},},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.oneComponent = this.selectComponent("#mychart-dom-bar");this.getOption();// this.connectStart()},onReady: function () {},init_chart: function (data) {//初始化图表this.oneComponent.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr, // new});line_set(chart, data);//   this.chart = chart;//   return chart;});},//请求数据getOption: function () {// 获取数据填充进data中，具体依据实际填充const data = [[1, 2],[2, 3],[3, 4],[4, 0.4],];this.init_chart(data);},
});

如何解决echarts文件过大

1.引入echarts以后，单echarts代码包已经973KB，怎么样能缩小其体积呢？
2.使用自定义图表的方法压缩文件大小。
（因为实际项目中可能用到的图表可能就一两个，不需要全部引进，所以可以根据实际项目情况选择用到的图表即可）
echarts图表在线定制如下图所示: https://echarts.apache.org/zh/builder.html

3.将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echarts.js,将原本大小将近1000KB的echarts压缩了一半。

微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大相关推荐

微信小程序 picker-view 的 bindChange延迟问题的解决办法
这里写自定义目录标题微信小程序 picker-view 的 bindChange延迟问题的解决办法微信小程序 picker-view 的 bindChange延迟问题的解决办法微信小程序的 pi ...
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
微信小程序页面上面的名字怎么改_微信小程序如何动态修改页面标题——已解决...
微信小程序初始化的标题我们知道实在全局.json文件中设置的,如果修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变: 例如: "navigatio ...
微信小程序H.createEvent is not a function解决
微信小程序H.createEvent is not a function解决解决方案: 报错信息: 解决方案: 检查接口.资源地址是否正确,如果配置了ssl使用的https,检查证书是否过期! 报错 ...
微信小程序开发错误：LoginError {type: ERR_WX_GET_USER_INFO}解决方法
错误内容微信小程序登录接口报以下错误: LoginError {type: "ERR_WX_GET_USER_INFO", message: "获取微信用户信息失败,请 ...
微信小程序接口测试时appid为空如何解决
一.web接口测试和app/微信小程序接口测试的区别 web接口一般是通过浏览器访问,app接口是通过手机端访问的,所以他们header头部请求是不一样的,一样的就是User Agent这个参数. w ...
微信小程序云开发如何实现读取和下载excel文件导入数据到云数据库中？简单好理解
一般我们在开发中会遇到通过excel文件一键导入数据的模板操作,我们在微信小程序中可以使用node-xlsx插件来解析excel文件的内容变成以json格式的数据返回. 在处理该操作的云函数中下载安装 ...
微信小程序申请医疗-就医服务类目解决办法
微信小程序申请医疗-就医服务类目申请解决办法选择方式为提供合同方式由于我们公司不是医院这种类型的公司,所以没有卫生部的批文,只能选择这一种方式. 准备审核需要的资料承诺函合同首尾页拍照,然后通 ...

微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大