官网例子都是同步的,怎么引入及同步demo请移步官网
<view class="container"> ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas="mychart-dom-multi-scatter"="mychart-multi-scatter"="{{ ecScatter }}"> </view>
import * as echarts from '../../ec-canvas/echarts'; Page({ data: { ecBar: { lazyLoad: true // 延迟加载 },ecScatter: { lazyLoad: true } },onLoad(){ this.barComponent = this.selectComponent('#mychart-dom-multi-bar'); this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter'this.init_bar(); .init_sca(); },init_bar: function (){ this.barComponent.init((canvas,width,height) => { 初始化图表 const barChart = echarts.init(canvas,null,{ width: width,height: height }); barChart.setOption(.getBarOption()); 注意这里一定要返回 chart 实例,否则会影响事件处理等 return barChart; }); },init_sca: () { this.scaComponnet.init((canvas,1)"> 初始化图表 const scaChart = echarts.init(canvas,height: height }); scaChart.setOption(.getScaOption()); scaChart; }); },getBarOption:(){ return 请求数据 { color: ['#37a2da','#32c5e9','#67e0e3'],tooltip: { trigger: 'axis' 坐标轴指示器,坐标轴触发有效 type: 'shadow' 默认为直线,可选为:'line' | 'shadow' } },legend: { data: ['热度','正面','负面'] },grid: { left: 2015 },xAxis: [ { type: 'value' } },axisLabel: { color: '#666' } } ],yAxis: [ { type: 'category'false },data: ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎''bar''inside'] },{ name: '正面'120,102,141,174,190,250,220'left'] } ] }; },getScaOption:请求数据 var data = []; var data2 = []; for (var i = 0; i < 10; i++) { data.push( [ Math.round(Math.random() * 100),Math.round(Math.random() * 100) ] ); data2.push( [ Math.round(Math.random() * 100) ] ); } var axisCommon = { axisLabel: { textStyle: { color: '#C8C8C8' } },axisTick: { lineStyle: { color: '#fff''#C8C8C8' } } }; { color: ["#FF7070","#60B6E3"'aaaa','bbbb'100] } },series: [{ type: 'scatter''bbbb' (idx) { return idx * 50; },animationEasing: 'elasticOut' }; },});
注意:异步加载时,ec-canvas标签加载显示要先于this.scaComponnet.init,否则会报错。