<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue+echarts收支明细手机页面</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="top-bar">
<a href="javascript:;"></a>
<span>收支明细</span>
<i></i>
</div>
<!-- 我的个人账户 -->
<div class="account">
<div class="l">
<img src="statics/images/head-face.png" alt="">
<div class="info">
<p>我的个人账户</p>
<span>08:54PM</span>
</div>
</div>
<div class="r">
<span>个人中心<i></i></span>
</div>
</div>
<!-- 消费占比图表 -->
<div class="consumption-percent">
<div class="title">
<h4>消费占比</h4>
<span>(单位 %)</span>
</div>
<div class="chart" id="chart">
</div>
</div>
<!-- 明细 -->
<div class="detail">
<div class="title">
<h4>今天 周六</h4>
<span>收入125000，支出10300</span>
</div>
<div class="list">
<ul>
<li>
<div class="l">
<img src="statics/images/icon-gs.png" alt="">
<div class="info">
<p>果蔬-买菜<sup></sup></p>
<span>15:28:50</span>
</div>
</div>
<div class="r">
<span>-120</span>
<i>李</i>
</div>
</li>
<li>
<div class="l">
<img src="statics/images/icon-sy.png" alt="">
<div class="info">
<p>其他-收益</p>
<span>15:28:50</span>
</div>
</div>
<div class="r">
<span>+5600</span>
<i>陈</i>
</div>
</li>
</ul>
</div>
</div>
<!-- foot bar -->
<div class="holder"></div>
<div class="foot-bar">
<ul>
<li><i></i><span>银行卡</span></li>
<li><i></i><span>相册</span></li>
<li class="middle"><i></i></li>
<li><i></i><span>收支明细</span></li>
<li><i></i><span>更多</span></li>
</ul>
</div>
</div>
</body>
</html>
<script>
var that;
new Vue({
el: '#app',
data: {
chart:null, // 图表
data:[ // 数据
{name: '餐饮', value: 42},
{name: '购物', value: 18},
{name: '日用', value: 26},
{name: '学习', value: 14}
],
increment:[ // 增量
{name: '餐饮', value: 5},
{name: '购物', value: 7},
{name: '日用', value: -13},
{name: '学习', value: 8}
]
},
mounted:function(){
that = this;
this.$nextTick(function(){
this.initChart()
})
window.onresize = function(){
that.chart.resize();
}
},
methods: {
initChart(){
// 初始化图表
this.chart = echarts.init(document.getElementById('chart'));
// 配置项
var chartOptions = {
title: {
text: '￥82500',
subtext: '总支出',
textStyle: {
fontSize: 17,
color: '#ffffff',
lineHeight: 20
},
subtextStyle: {
fontSize: 12,
color: '#ffffff'
},
textAlign: 'center',
left: '23%',
top: '41%'
},
tooltip: {
formatter:function(params){
return params.data.name+':'+params.data.value+'%'
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: '0%',
top: 'center',
itemGap: 15,
selectedMode: false,
itemWidth: 12,
itemHeight: 12,
icon: 'diamond',
textStyle: {
color: '#77899c',
fontSize:12,
rich: {
a: {
color: '#0bf4fd',
width:40,
align:'right'
},
b: {
color: '#fd5b80',
width:40,
align:'right'
}
}
},
formatter:function(name) {
if(that.getValue(that.increment,name)>0){
return name+' '+ that.getValue(that.data,name)+'%'+' {a|+'+that.getValue(that.increment,name)+'%}'
}else{
return name+' '+ that.getValue(that.data,name)+'%'+' {b|'+that.getValue(that.increment,name)+'%}'
}
}
},
color: ['#fecf4b', '#fe6a6c', '#4599fc', '#02c4a9 '],
series: [
{
type: 'pie',
radius: ['55%', '85%'],
center: ['25%', '55%'],
label: {
show: true,
position: 'inner',
textStyle: {
color: '#fff',
fontSize: 10
},
formatter(params) {
return params.data.value+'%'
}
},
labelLine: {
show: false
},
data: this.data,
}
]
};
// 填充配置
this.chart.setOption(chart
vue+echarts收支明细手机页面
需积分: 5 7 浏览量
2023-03-17
13:41:24
上传
评论
收藏 278KB RAR 举报
vueecharts收支明细手机页面.rar （17个子文件） 
statics js 
flexible.js 1KB echarts.min.js 762KB vue.min.js 92KB css style.css 5KB images 
icon-sy.png 2KB icon-pic.png 557B tap-bar-album.png 469B icon-gs.png 3KB icon-triangle.png 186B icon-more.png 365B tap-bar-more.png 200B head-face.png 8KB tap-bar-detail.png 595B tap-bar-bank.png 325B icon-back.png 556B tap-bar-middle.png 412B
index.html 8KB资源评论
