<view class="container" style="padding: 0;">
<ec-canvas class="mt10" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" style="width: 100%;height: 600rpx;"></ec-canvas>
</view>
{
"usingComponents": {
"ec-canvas": "../../../components/ec-canvas/ec-canvas"
},
"navigationBarTitleText": "店铺数据中心"
}
// pages/static/charts/index.js
import * as echarts from '../../../components/ec-canvas/echarts';
const APP = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let that = this;
this.get_e_data();
},
get_e_data(){
let that = this;
setTimeout(function(){
that.data.xData =['1', '2', '3', '4', '5', '6', '7'];
that.data.seriesData =[{
name:'收益金额',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
name:'消费金额',
data: [220, 220, 150, 80, 70, 130, 110],
type: 'line'
},]
that.initChart(that.data.xData, that.data.seriesData) //渲染月度数据
},100)
},
initChart: function (xData, seriesData) {
let that = this;
let legend = [];
seriesData.forEach(item=>{
legend.push(item.name)
})
this.echartsComponnet = this.selectComponent('#mychart-dom-bar'); //查找页面的echart组件位置
this.echartsComponnet.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
var option = {
title: {
text: ''
},
legend: {
data:legend, // ['收益金额','消费金额'],
left: 'right'
},
xAxis: {
type: 'category',
data: xData,
},
yAxis: {
type: 'value',
// interval: interval, // y轴间隔数
},
series: seriesData
};
chart.setOption(option);
});
},
})