介绍
如何在微信小程序中使用Echarts方法?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
xxx。json
{
,“usingComponents": {
,“ec-canvas":“xxx/xxx/xxx/ec-canvas/ec-canvas"
,}
} xxx。wxml
& lt; view 类=癱ontainer-echarts margin-top-10"比;
,& lt; ec-canvas 类=癿ycharts", id=癿ychart-dom-bar", canvas-id=癿ychart-bar", ec=皗{, ec }}“祝辞& lt;/ec-canvas>
& lt;/view> xxx。js首先要引入echarts然后才能用下面的initChart方法,所以根据放置的ec-canvas的路径引入echarts。
import *, as echarts 得到& # 39;xxx/xxx/xxx/ec-canvas echarts& # 39;,,//,根据放置的ec-canvas的路径引入echarts
let chart =, null //,用一个变量保存echarts的初始化
let options =,{,//图形配置,用过echarts的人都知道是嘛意思~,这里给出官网线图的基础例子
,xAxis: {
类型:才能,& # 39;类别# 39;
,,数据:[& # 39;我的# 39;,,& # 39;星期二# 39;,,& # 39;结婚# 39;,,& # 39;星期四# 39;,,& # 39;星期五# 39;,,& # 39;坐在# 39;,,& # 39;太阳# 39;】
},
,桠溪:{
类型:才能,& # 39;价值# 39;
},
,系列:[{
,,数据:(150,,230,,224,,218,,135,,147,,260),
类型:才能,& # 39;行# 39;
,}]
},
function initChart(画布,,宽度,高度,dpr),{,//这里的画布,宽度,高度,dpr都可以不用管
,const chart =, echarts.init(画布,,null,, {
,宽度:宽度,
,高度:高度,
,devicePixelRatio: dpr //,像素
,});
,canvas.setChart(图);
,chart.setOption(选项);
,return 图表;
}
页面({
,数据:{
,ec: {
,,的onInit: initChart //,这里不要加括号哦!
,}
,}
}); 保存运行,到这一步理论上echarts已经可以显示了,实际怎么样还要自己调试的。
用一个图变量保存echarts的初始化,官网上把选项也写在方法里,我给拿出来了。那图有什么用呢?因为大部分的数据都是异步获取的,所以要动态渲染echarts。当拿到数据后,这个图就用上了。
chart.setOption ({
,xAxis: {
,数据:newData.map (item =祝辞,{
return 才能;项目[0];
,})
},
,系列:{
,数据:newData.map (item =祝辞,{
return 才能;项目[1];
,})
,}
}) 这里关于数据的数据格式,看每个人的选项里面要渲染的是什么图吧。我这里用的是官网给的这个例子传送门,echarts的数据更新可以直接用setOption。
在开发者工具中的放大缩小滚动没有用,但是上传到体验版上后在手机上是好的。微信对油画有类型=? d",在ec-canvas中想要使用类型=? d"的话,要改动ec-canvas。js
数据:,{
,isUseNewCanvas: true //,这里改成这样,,默认是假的
} 因为:isUseNewCanvas默认是假的,是旧版的画布上。
& lt; !——,新的:接口对其了H5 ——比;
& lt; canvas wx:如果=皗{isUseNewCanvas}}“,类型=? d",类=癳c-canvas", canvas-id=皗{, canvasId }}“, bindinit=癷nit", bindtouchstart=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchStart& # 39;,}}“, bindtouchmove=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchMove& # 39;,}}“, bindtouchend=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchEnd& # 39;,}}“祝辞& lt;/canvas>
& lt; !——,旧的,——比;
& lt; canvas wx: else 类=癳c-canvas", canvas-id=皗{, canvasId }}“, bindinit=癷nit", bindtouchstart=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchStart& # 39;,}}“, bindtouchmove=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchMove& # 39;,}}“, bindtouchend=皗{, ec.disableTouch ?, & # 39; & # 39;,:, & # 39; touchEnd& # 39;,}}“祝辞& lt;/canvas> echarts.js体积大的问题,上传项目2 mib限制问题
就下载的ec-canvas里面的echarts.js有几百简约,相对于2 mib的来说挺大的,当我上传项目的时候提示我超出限制,那能想到的就是减小echarts.js的体积和分包两个能即时见效的方法了。
echarts.js体积大的问题
在echarts的官网有按需构建的方法(传送门- - -在线定制),进入下面的在线定制,选择自己需要的图,我就选了折线图,坐标系选了直角坐标系,组件里除了刷选,工具栏和自定义图形外别的都选了,其它选项把svg也勾上了,然后点击下载进入建筑页面,这里等它构建完成会自动下载一个echarts.min.js文件,大小最后少了200来简约。然后把它重命名成echarts.js替换进ec-canvas里。
