微信小程序中使用ECharts 异步加载数据的方法

官网例子都是同步的,怎么引入及同步demo请移步官网

rush:js;">
{ // 初始化图表 const barChart = echarts.init(canvas,null,{ width: width,height: height }); barChart.setoption(this.getBarOption()); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return barChart; }); },init_sca: function () { this.scaComponnet.init((canvas,height) => { // 初始化图表 const scaChart = echarts.init(canvas,height: height }); scaChart.setoption(this.getScaOption()); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return scaChart; }); },getBarOption:function(){ //return 请求数据 return { color: ['#37a2da','#32c5e9','#67e0e3'],tooltip: { trigger: 'axis',axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 认为直线,可选为:'line' | 'shadow' } },legend: { data: ['热度','正面','负面'] },grid: { left: 20,right: 20,bottom: 15,top: 40,containLabel: true },xAxis: [ { type: 'value',axisLine: { linestyle: { color: '#999' } },axisLabel: { color: '#666' } } ],yAxis: [ { type: 'category',axisTick: { show: false },data: ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎'],series: [ { name: '热度',type: 'bar',label: { normal: { show: true,position: 'inside' } },data: [300,270,340,344,300,320,310] },{ name: '正面',stack: '总量',label: { normal: { show: true } },data: [120,102,141,174,190,250,220] },{ name: '负面',position: 'left' } },data: [-20,-32,-21,-34,-90,-130,-110] } ] }; },getScaOption:function(){ //请求数据 var data = []; var data2 = []; for (var i = 0; i < 10; i++) { data.push( [ Math.round(Math.random() * 100),Math.round(Math.random() * 100),Math.round(Math.random() * 40) ] ); data2.push( [ Math.round(Math.random() * 100),Math.round(Math.random() * 100) ] ); } var axisCommon = { axisLabel: { textStyle: { color: '#C8C8C8' } },axisTick: { linestyle: { color: '#fff' } },axisLine: { linestyle: { color: '#C8C8C8' } },splitLine: { linestyle: { color: '#C8C8C8',type: 'solid' } } }; return { color: ["#FF7070","#60B6E3"],backgroundColor: '#eee',xAxis: axisCommon,yAxis: axisCommon,legend: { data: ['aaaa','bbbb'] },visualMap: { show: false,max: 100,inRange: { symbolSize: [20,70] } },series: [{ type: 'scatter',name: 'aaaa',data: data },{ name: 'bbbb',type: 'scatter',data: data2 } ],animationDelay: function (idx) { return idx * 50; },animationEasing: 'elasticOut' }; },});

注意:异步加载时,ec-canvas标签加载显示要先于this.scaComponnet.init,否则会报错。

总结

以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序