效果图
目录
- 概述
- 步骤一：创建 HTML 文件并引入 Vue 和 ECharts
- 步骤二：设计页面结构
- 步骤三：编写页面样式
- 步骤四：使用 Vue 初始化页面
- 步骤五：使用 ECharts 绘制图表
- 完整代码
- 结语
概述
在本教程中，我们将使用 Vue.js 和 ECharts 制作一个信用卡使用数据展示页面。这个页面展示了不同消费类型的比例和信用卡授信额度占比，通过 Vue.js 结合 ECharts，让你快速上手数据可视化开发。
步骤一：创建 HTML 文件并引入 Vue 和 ECharts
首先，我们创建一个 HTML 文件，并在 <head> 标签中引入 Vue.js 和 ECharts 的 CDN 链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信用卡使用数据一览 - Vue 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/5.0.0/echarts.min.js"></script>
步骤二：设计页面结构
在 <body> 标签中，我们将页面结构分为以下几部分：头部、饼图和柱状图部分，以及底部的二维码部分。
<body>
<div id="app">
<!-- Header -->
<div class="header">
<h1>信用卡使用数据一览</h1>
</div>
<!-- Chart Section -->
<div class="chart-section">
<div class="pie-chart" ref="pieChart"></div>
<div class="top-item">
<h2>NO.1 购物消费</h2>
<p>份额最大，占比为</p>
<h2 style="font-size: 32px; color: #3949ab;">32%</h2>
</div>
<div class="top-item">
<h2>NO.2 旅游出行</h2>
<p>份额次大，占比为</p>
<h2 style="font-size: 32px; color: #3949ab;">20%</h2>
</div>
</div>
<!-- Bar Chart Section -->
<div class="chart-section">
<div class="bar-chart" ref="barChart"></div>
<div class="top-data">
<div class="top-item">
<h2>授信额度 < 1万</h2>
<p>占比为</p>
<h2>43.9%</h2>
</div>
<div class="top-item">
<h2>授信额度 1-3万</h2>
<p>占比为</p>
<h2>33.2%</h2>
</div>
<div class="top-item">
<h2>授信额度 3-10万</h2>
<p>占比为</p>
<h2>20.6%</h2>
</div>
<div class="top-item">
<h2>授信额度 > 10万</h2>
<p>占比为</p>
<h2>2.3%</h2>
</div>
</div>
</div>
<!-- Footer Section with QR Code -->
<div class="footer">
<div class="qr-code"></div>
<p>扫码添加二维码查看更多基金资讯</p>
</div>
</div>
步骤三：编写页面样式
在 <style> 标签中为页面各部分添加样式。包括 .header、.chart-section、.top-data、.footer 等。
<style>
body {
font-family: Arial, sans-serif;
background-color: #e3eaf4;
margin: 0;
padding: 0;
}
#app {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header {
background-color: #3949ab;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.chart-section {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pie-chart, .bar-chart {
width: 45%;
height: 300px;
}
.footer .qr-code {
width: 100px;
height: 100px;
background-color: #ddd;
margin: 10px auto;
border-radius: 8px;
}
</style>
步骤四：使用 Vue 初始化页面
在 <script> 标签中，我们创建一个 Vue 实例，将其挂载到 #app 元素上。我们会在 mounted 钩子函数中初始化图表。
<script>
new Vue({
el: '#app',
mounted() {
this.initPieChart();
this.initBarChart();
}
});
</script>
步骤五：使用 ECharts 绘制图表
1. 饼图初始化
在 Vue 实例的 methods 中添加 initPieChart 方法，使用 ECharts 初始化饼图，并设置图表选项。
methods: {
initPieChart() {
const pieChart = echarts.init(this.$refs.pieChart);
const pieOption = {
title: {
text: '公众号使用人群年龄占比',
left: 'center',
top: '10%',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: '0%',
left: 'center'
},
color: ['#FFAFB4', '#FFD95D', '#7EC4FF', '#A57EFF', '#20B4A7'],
series: [
{
type: 'pie',
radius: '60%',
data: [
{
value: 32, name: '购物消费' },
{
value: 20, name: '旅游出行' },
{
value: 18, name: '吃喝娱乐' },
{
value: 18, name: '家居生活' },
{
value: 12, name: '其他占比' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
pieChart.setOption(pieOption);
},
2. 柱状图初始化
在 methods 中添加 initBarChart 方法，使用 ECharts 初始化柱状图。
initBarChart() {
const barChart = echarts.init(this.$refs.barChart);
const barOption = {
title: {
text: '信用卡授信额度占比',
left: 'center',
top: '10%',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' }
},
xAxis: {
type: 'category',
data: ['<1万', '1-3万', '3-10万', '>10万'],
axisLabel: {
fontSize: 12 }
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12, color: '#888' }
},
color: ['#537EC5', '#FFD95D', '#FFAFB4', '#A57EFF'],
series: [
{
name: '
占比',
type: 'bar',
barWidth: '40%',
data: [43.9, 33.2, 20.6, 8.3]
}
]
};
barChart.setOption(barOption);
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信用卡使用数据一览 - Vue 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/5.0.0/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e3eaf4;
margin: 0;
padding: 0;
}
#app {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header {
background-color: #3949ab;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.header h1 {
margin: 0;
font-size: 24px;
}
.chart-section {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.pie-chart, .bar-chart {
width: 45%;
height: 300px;
}
.top-data {
display: flex;
justify-content: space-between;
padding: 0 20px;
margin-top: 20px;
border-top: 1px solid #ddd;
}
.top-item {
text-align: center;
padding: 10px;
}
.top-item h2 {
font-size: 18px;
color: #3949ab;
margin: 0;
}
.footer {
text-align: center;
margin-top: 20px;
padding: 20px;
border-top: 1px solid #ddd;
color: #888;
}
.footer .qr-code {
width: 100px;
height: 100px;
background-color: #ddd;
margin: 10px auto;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="app">
<!-- Header -->
<div class="header">
<h1>信用卡使用数据一览</h1>
</div>
<!-- Chart Section -->
<div class="chart-section">
<div class="pie-chart" ref="pieChart"></div>
<div class="top-item">
<h2>NO.1 购物消费</h2>
<p>份额最大，占比为</p>
<h2 style="font-size: 32px; color: #3949ab;">32%</h2>
</div>
<div class="top-item">
<h2>NO.2 旅游出行</h2>
<p>份额次大，占比为</p>
<h2 style="font-size: 32px; color: #3949ab;">20%</h2>
</div>
</div>
<!-- Bar Chart Section -->
<div class="chart-section">
<div class="bar-chart" ref="barChart"></div>
<div class="top-data">
<div class="top-item">
<h2>授信额度 < 1万</h2>
<p>占比为</p>
<h2>43.9%</h2>
</div>
<div class="top-item">
<h2>授信额度 1-3万</h2>
<p>占比为</p>
<h2>33.2%</h2>
</div>
<div class="top-item">
<h2>授信额度 3-10万</h2>
<p>占比为</p>
<h2>20.6%</h2>
</div>
<div class="top-item">
<h2>授信额度 > 10万</h2>
<p>占比为</p>
<h2>2.3%</h2>
</div>
</div>
</div>
<!-- Footer Section with QR Code -->
<div class="footer">
<div class="qr-code"></div>
<p>扫码添加二维码查看更多基金资讯</p>
</div>
</div>
<script>
new Vue({
el: '#app',
mounted() {
this.initPieChart();
this.initBarChart();
},
methods: {
// 初始化饼图
initPieChart() {
var pieChart = echarts.init(this.$refs.pieChart);
var pieOption = {
title: {
text: '公众号使用人群年龄占比',
left: 'center',
top: '10%',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: '0%',
left: 'center'
},
color: ['#FFAFB4', '#FFD95D', '#7EC4FF', '#A57EFF', '#20B4A7'],
series: [
{
name: '年龄占比',
type: 'pie',
radius: '60%',
data: [
{
value: 32, name: '购物消费' },
{
value: 20, name: '旅游出行' },
{
value: 18, name: '吃喝娱乐' },
{
value: 18, name: '家居生活' },
{
value: 12, name: '其他占比' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
pieChart.setOption(pieOption);
},
// 初始化柱状图
initBarChart() {
var barChart = echarts.init(this.$refs.barChart);
var barOption = {
title: {
text: '信用卡授信额度占比',
left: 'center',
top: '10%',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' }
},
xAxis: {
type: 'category',
data: ['<1万', '1-3万', '3-10万', '>10万'],
axisLine: {
show: false },
axisTick: {
show: false },
axisLabel: {
fontSize: 12 }
},
yAxis: {
type: 'value',
axisLine: {
show: false },
axisTick: {
show: false },
axisLabel: {
fontSize: 12, color: '#888' }
},
color: ['#537EC5', '#FFD95D', '#FFAFB4', '#A57EFF'],
series: [
{
name: '占比',
type: 'bar',
barWidth: '40%',
data: [43.9, 33.2, 20.6, 8.3]
}
]
};
barChart.setOption(barOption);
}
}
});
</script>
</body>
</html>
结语
通过本教程，你学习了如何使用 Vue.js 和 ECharts 创建一个数据展示页面。掌握这些基础后，可以应用于其他数据展示项目，丰富数据可视化的效果。