样式必须否则不显示,echarts和wxcharts不能共存
ec-canvas {
width: 100%;
height: 200px;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
<!--index.wxml-->
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../ec-canvas/echarts';
Page({
onLoad() {
this.barComponent = this.selectComponent('#mychart-dom-bar');
this.getToken();
},
init_bar: function () {
this.barComponent.init((canvas, width, height) => {
const barChart = echarts.init(canvas, null, {
width: width,
height: height
});
barChart.setOption(this.getBarOption());
return barChart;
});
},
getBarOption: function () {
var _this = this;
var option = {}
return option;
},
getToken() {
wx.showLoading({
title: '加载中',
})
let _this = this;
wx.request({
url: url,
method: "get",
complete() {
wx.hideLoading();
},
success(res) {
_this.getData();
},
fail(err) {
console.log(err);
}
})
},
getData() {
var _this = this;
wx.request({
url: url,
header: {
'content-type': 'application/x-www-form-urlencoded',
"Authorization": "bearer " + _this.data.token
},
method: "post",
data:{}
complete() { },
success(res) {
if (res.data.Code == 200) {
var result = res.data.Result;
_this.init_bar();
} else {
})
}
}
})
},
});