在手机端展示图表效果:
实现代码如下:引入
样式表:/vcharts/css/style.min.css
js:/vcharts/js/echarts.min.js
<!-- 营收趋势 柱形图 -->
<div class="bg-white mtb-10">
<h2 class="bg-white plr-15 font-18 font-black font-bloder ptb-15 title-item">营收趋势</h2>
<template v-if="chartData.rows&&chartData.rows.length>0">
<ve-line :data="chartData" :extend="extend" :settings="chartSettings"></ve-line>
</template>
<template v-else>
<van-skeleton :row="3"></van-skeleton>
</template>
</div>
vuejs代码实现:
var app = new Vue({
el: "#myapp",
data: function () {
this.extend = {
series: {
//label: { show: true, position: "top"},
itemStyle: {
color: '#5291ff',
shadowColor: '#5291ff'
}
}
};
this.chartSettings = {
labelMap: {
'date': '日期',
'total_fee': '成交金额(元)'
},
};
return {
loading: false,
finished: false,
//营收简报数据
chartData: {
columns: ['date', 'total_fee'],
rows: [] //趋势数据内容;
},
};
},
methods: {
//营收趋势
qstoggle: function () {
var that = this;
that.chartData.rows = [];
that.loading = true;
that.finished = false;
axios.get('/mmp/api/home/trend').then(function (res) {
that.loading = false;
that.finished = true;
if (res.status == 200) {
that.chartData.rows = res.data.data;
}
}).catch(function (res) {
that.$toast(res);
});
},
}
});