如何在微信小程序中使用Echarts方法？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联专业为企业提供
库尔勒网站建设、库尔勒做网站、库尔勒网站设计、库尔勒网站制作等企业网站建设、网页设计与制作、库尔勒企业网站模板建站服务，十年
库尔勒做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
xxx.json
{
"usingComponents": {
"ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"
}
}xxx.wxml
xxx.js 首先要引入echarts然后才能用下面的initChart方法，所以根据放置的ec-canvas的路径引入echarts。
import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根据放置的ec-canvas的路径引入echarts
let chart = null // 用一个变量保存echarts的初始化
let options = { // 图形配置，用过echarts的人都知道是嘛意思～ 这里给出官网线图的基础例子
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
function initChart(canvas, width, height, dpr) { // 这里的canvas,width,height,dpr都可以不用管
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
chart.setOption(options);
return chart;
}
Page({
data: {
ec: {
onInit: initChart // 这里不要加括号哦！
}
}
});保存运行，到这一步理论上echarts已经可以显示了，实际怎么样还要自己调试的。
用一个chart变量保存echarts的初始化，官网上把options也写在方法里，我给拿出来了。那chart有什么用呢？因为大部分的数据都是异步获取的，所以要动态渲染echarts。当拿到数据后，这个chart就用上了。
chart.setOption({
xAxis: {
data: newData.map(item => {
return item[0];
})
},
series: {
data: newData.map(item => {
return item[1];
})
}
})这里关于data的数据格式，看每个人的options里面要渲染的是什么图吧。我这里用的是官网给的这个例子传送门，echarts的数据更新可以直接用setOption。
在开发者工具中的放大缩小滚动没有用，但是上传到体验版上后在手机上是好的。微信对canvas有type="2d"，在ec-canvas中想要使用type="2d"的话，要改动ec-canvas.js
data: {
isUseNewCanvas: true // 这里改成true， 默认是false
}因为：isUseNewCanvas默认是false，是旧版的canvas。
echarts.js体积大的问题，上传项目2MiB限制问题
就下载的ec-canvas里面的echarts.js有几百KiB，相对于2MiB的来说挺大的，当我上传项目的时候提示我超出限制，那能想到的就是减小echarts.js的体积和分包两个能即时见效的方法了。
echarts.js体积大的问题
在echarts的官网有按需构建的方法（传送门---在线定制），进入下面的在线定制，选择自己需要图，我就选了折线图，坐标系选了直角坐标系，组件里除了刷选，工具栏和自定义图形外别的都选了，其它选项把svg也勾上了，然后点击下载进入building页面，这里等它构建完成会自动下载一个echarts.min.js文件，大小最后少了200来KiB。然后把它重命名成echarts.js替换进ec-canvas里。
上传项目2MiB限制问题
echarts.js的体积减少了，但是上传的限制问题还在，那就是分包了。
在app.json里面，有一个subpackages
{
"subPackages": [
{
"root": "xxx/xxx",
"name": "xxx",
"independent": false,
"pages": [
"pages/xxx",
"pages/xxx",
"pages/xxx"
]
},
{
"root": "baoziTask/",
"name": "baozi",
"pages": [
"pages/roubaozi/roubaozi"
]
}
],
}这个分包在官网上讲的挺简单的，但是在我使用时是这样理解的。
root是要分包的路径，我是放到根目录的。那么baoziTask下的所有文件都会被认为是一个包。那不在这个baoziTask路径下的文件都会被打包进app这个主包内。
name就是分包的别名，预下载的时候会用，这个预下载就当在某个页面的时候，想主动下载这个可能被使用的分包，以提高访问速度。比如当我进入某个页面的时候，很大可能会点击某处跳转到某个分包里面，这个时候可以预下载这个分包，而不用跳转的时候才下载这个分包。
independent是分包是否独立，但是我没用过就没有直观的感觉。说是可以单独运行，不依赖app这个主包。这个需要配置，不是代码的下载，配置preloadRule，具体的话得看官网和自己尝试了。传送门---分包预下载
pages就更好理解了啊，就是包内的页面呗。
想要跳转到这些分包内的页面的时候给跳转的url写对路径就可以了，就比如跳转到roubaozi的时候url写⬇️面这样：
url: '/baoziTask/pages/roubaozi/roubaozi'
关于如何在微信小程序中使用Echarts方法问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
网站名称：如何在微信小程序中使用Echarts方法-创新互联
当前地址：
http://cdkjz.cn/article/dsppsi.html
