Vue 和 ECharts 完整入门：从零打造数据统计页面 数据统计页面开发指南：Vue + ECharts 实现动态图表展示 新手友好的数据分析项目：Vue + ECharts 一步步实现 Vue

编程语言 2024-11-04 19:09:37 阅读次数: 0

效果图

在这里插入图片描述

以下是一个详细的新手入门博客教程，帮助初学者理解如何使用 Vue 和 ECharts 创建一个数据统计页面。此博客将一步步讲解如何实现界面布局、功能以及图表配置。

Vue 和 ECharts 实现的数据统计页面新手教程

目录

  1. 项目简介
  2. 环境准备
  3. 创建 Vue 页面结构
  4. 编写样式布局
  5. 使用 ECharts 创建图表
  6. 运行效果展示

项目简介

本教程将带您一步步实现一个简单的数据统计页面，包含以下功能：

  • 顶部统计汇总区域
  • 多种图表展示，包括饼图、折线图和环形图
  • 任务时间线展示
    通过这个项目，您将学会如何使用 Vue 和 ECharts 配置图表并搭建基本的布局。

环境准备

  1. 安装 Vue：我们使用 CDN 引入 Vue 2.7，确保快速上手开发。
  2. 引入 ECharts：使用 ECharts 提供的数据可视化功能，我们同样通过 CDN 引入它。

以下是项目的 HTML 基础模板：

<!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>
    /* 样式代码会在后续讲解 */
  </style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

创建 Vue 页面结构

在 #app 内编写 HTML 结构，将页面分为四部分：

  1. Header：标题栏
  2. Summary：数据汇总显示区域
  3. Chart Section：图表区域，包括三种图表
  4. Task List：任务时间线展示
<div id="app">
  <!-- Header Section -->
  <div class="header">数据统计</div>

  <!-- Summary Section -->
  <div class="summary">
    <div class="summary-item">
      <div class="value">191</div>
      <div>专注次数</div>
    </div>
    <div class="summary-item">
      <div class="value">233小时12分</div>
      <div>专注时长</div>
    </div>
    <div class="summary-item">
      <div class="value">65</div>
      <div>使用天数</div>
    </div>
  </div>

  <!-- 专注内容分布饼图 -->
  <div class="chart-section">
    <div class="chart-title">专注内容分布</div>
    <div class="chart" ref="pieChart"></div>
  </div>

  <!-- 专注时间分布折线图 -->
  <div class="chart-section">
    <div class="chart-title">专注时间分布</div>
    <div class="chart" ref="lineChart"></div>
  </div>

  <!-- 打断原因分布圆环图 -->
  <div class="chart-section">
    <div class="chart-title">打断原因分析</div>
    <div class="chart" ref="donutChart"></div>
  </div>

  <!-- 任务时间线 -->
  <div class="task-list">
    <div class="task-item">
      <span>看完一篇英文短文</span>
      <span class="status-complete">已完成</span>
      <span>10分钟</span>
    </div>
    <div class="task-item">
      <span>写一篇500字作文</span>
      <span class="status-incomplete">未完成</span>
      <span>5分钟</span>
    </div>
    <div class="task-item">
      <span>午休一会</span>
      <span class="status-complete">已完成</span>
      <span>30分钟</span>
    </div>
  </div>
</div>

编写样式布局

将页面样式写在 <style> 标签中，增加视觉效果，使其更加美观和符合业务需求。

body {
    
    
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
#app {
    
    
  max-width: 400px;
  margin: 20px auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {
    
    
  text-align: center;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #4CAF50;
}
.summary {
    
    
  display: flex;
  justify-content: space-around;
  background-color: #f7f7f7;
  padding: 10px 0;
}
.summary-item {
    
    
  text-align: center;
  color: #4CAF50;
}
.summary-item div {
    
    
  font-size: 12px;
  color: #888;
}
.summary-item .value {
    
    
  font-size: 18px;
  color: #4CAF50;
}
.chart-section {
    
    
  padding: 20px 10px;
  border-bottom: 1px solid #eee;
}
.chart-title {
    
    
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.chart {
    
    
  width: 100%;
  height: 200px;
}
.task-list {
    
    
  padding: 10px;
  border-top: 1px solid #eee;
}
.task-item {
    
    
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #f4f4f4;
  font-size: 14px;
}
.status-complete {
    
    
  color: #4CAF50;
  font-weight: bold;
}
.status-incomplete {
    
    
  color: #FF5722;
  font-weight: bold;
}

使用 ECharts 创建图表

我们将使用 ECharts 绘制三种图表：饼图、折线图和环形图。代码写在 <script> 标签内，通过 Vue 的 mounted 生命周期钩子初始化图表。

<script>
  new Vue({
    
    
    el: '#app',
    mounted() {
    
    
      this.initPieChart();
      this.initLineChart();
      this.initDonutChart();
    },
    methods: {
    
    
      initPieChart() {
    
    
        const pieChart = echarts.init(this.$refs.pieChart);
        const pieOption = {
    
    
          tooltip: {
    
    
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
    
    
              name: '专注内容分布',
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
    
    
                show: true,
                formatter: '{b}: {d}%'
              },
              data: [
                {
    
     value: 40, name: '收集箱' },
                {
    
     value: 24, name: '锻炼计划' },
                {
    
     value: 23, name: '学习安排' },
                {
    
     value: 12, name: '工作任务' }
              ],
              color: ['#66c2ff', '#ffcc66', '#66ff99', '#ff9966']
            }
          ]
        };
        pieChart.setOption(pieOption);
      },
      initLineChart() {
    
    
        const lineChart = echarts.init(this.$refs.lineChart);
        const lineOption = {
    
    
          tooltip: {
    
    
            trigger: 'axis'
          },
          xAxis: {
    
    
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
    
    
            type: 'value'
          },
          series: [
            {
    
    
              name: '专注时长',
              type: 'line',
              smooth: true,
              data: [18, 30, 45, 40, 32, 25, 20],
              areaStyle: {
    
     color: '#4CAF50' },
              lineStyle: {
    
     color: '#4CAF50' }
            }
          ]
        };
        lineChart.setOption(lineOption);
      },
      initDonutChart() {
    
    
        const donutChart = echarts.init(this.$refs.donutChart);
        const donutOption = {
    
    
          tooltip: {
    
    
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
    
    
              name: '打断原因分析',
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
    
    
                show: true,
                formatter: '{b}: {d}%'
              },
              data: [
                {
    
     value: 56, name: '暂时有事' },
                {
    
     value: 34, name: '其他' },
                {
    
     value: 20, name: '不

想专注' }
              ],
              color: ['#66c2ff', '#ffcc66', '#ff9966']
            }
          ]
        };
        donutChart.setOption(donutOption);
      }
    }
  });
</script>

运行效果展示

现在，您可以在浏览器中打开页面，应该能看到包含统计汇总、三种图表和任务时间线的完整数据统计页面。

希望这个教程对您的项目开发有所帮助！

完整代码

<!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: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    #app {
      
      
      max-width: 400px;
      margin: 20px auto;
      padding: 10px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .header {
      
      
      text-align: center;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #4CAF50;
    }
    .summary {
      
      
      display: flex;
      justify-content: space-around;
      background-color: #f7f7f7;
      padding: 10px 0;
    }
    .summary-item {
      
      
      text-align: center;
      color: #4CAF50;
    }
    .summary-item div {
      
      
      font-size: 12px;
      color: #888;
    }
    .summary-item .value {
      
      
      font-size: 18px;
      color: #4CAF50;
    }
    .chart-section {
      
      
      padding: 20px 10px;
      border-bottom: 1px solid #eee;
    }
    .chart-title {
      
      
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    .chart {
      
      
      width: 100%;
      height: 200px;
    }
    .time-distribution {
      
      
      padding: 10px;
      font-size: 14px;
    }
    .task-list {
      
      
      padding: 10px;
      border-top: 1px solid #eee;
    }
    .task-item {
      
      
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid #f4f4f4;
      font-size: 14px;
    }
    .status-complete {
      
      
      color: #4CAF50;
      font-weight: bold;
    }
    .status-incomplete {
      
      
      color: #FF5722;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- Header Section -->
  <div class="header">数据统计</div>

  <!-- Summary Section -->
  <div class="summary">
    <div class="summary-item">
      <div class="value">191</div>
      <div>专注次数</div>
    </div>
    <div class="summary-item">
      <div class="value">233小时12分</div>
      <div>专注时长</div>
    </div>
    <div class="summary-item">
      <div class="value">65</div>
      <div>使用天数</div>
    </div>
  </div>

  <!-- 专注内容分布饼图 -->
  <div class="chart-section">
    <div class="chart-title">专注内容分布</div>
    <div class="chart" ref="pieChart"></div>
  </div>

  <!-- 专注时间分布折线图 -->
  <div class="chart-section">
    <div class="chart-title">专注时间分布</div>
    <div class="chart" ref="lineChart"></div>
  </div>

  <!-- 打断原因分布圆环图 -->
  <div class="chart-section">
    <div class="chart-title">打断原因分析</div>
    <div class="chart" ref="donutChart"></div>
  </div>

  <!-- 任务时间线 -->
  <div class="task-list">
    <div class="task-item">
      <span>看完一篇英文短文</span>
      <span class="status-complete">已完成</span>
      <span>10分钟</span>
    </div>
    <div class="task-item">
      <span>写一篇500字作文</span>
      <span class="status-incomplete">未完成</span>
      <span>5分钟</span>
    </div>
    <div class="task-item">
      <span>午休一会</span>
      <span class="status-complete">已完成</span>
      <span>30分钟</span>
    </div>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    mounted() {
      
      
      this.initPieChart();
      this.initLineChart();
      this.initDonutChart();
    },
    methods: {
      
      
      initPieChart() {
      
      
        const pieChart = echarts.init(this.$refs.pieChart);
        const pieOption = {
      
      
          tooltip: {
      
      
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
      
      
              name: '专注内容分布',
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
      
      
                show: true,
                formatter: '{b}: {d}%'
              },
              data: [
                {
      
       value: 40, name: '收集箱' },
                {
      
       value: 24, name: '锻炼计划' },
                {
      
       value: 23, name: '学习安排' },
                {
      
       value: 12, name: '工作任务' }
              ],
              color: ['#66c2ff', '#ffcc66', '#66ff99', '#ff9966']
            }
          ]
        };
        pieChart.setOption(pieOption);
      },
      initLineChart() {
      
      
        const lineChart = echarts.init(this.$refs.lineChart);
        const lineOption = {
      
      
          tooltip: {
      
      
            trigger: 'axis'
          },
          xAxis: {
      
      
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
      
      
            type: 'value'
          },
          series: [
            {
      
      
              name: '专注时长',
              type: 'line',
              smooth: true,
              data: [18, 30, 45, 40, 32, 25, 20],
              areaStyle: {
      
       color: '#4CAF50' },
              lineStyle: {
      
       color: '#4CAF50' }
            }
          ]
        };
        lineChart.setOption(lineOption);
      },
      initDonutChart() {
      
      
        const donutChart = echarts.init(this.$refs.donutChart);
        const donutOption = {
      
      
          tooltip: {
      
      
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
      
      
              name: '打断原因分析',
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
      
      
                show: true,
                formatter: '{b}: {d}%'
              },
              data: [
                {
      
       value: 56, name: '暂时有事' },
                {
      
       value: 34, name: '其他' },
                {
      
       value: 20, name: '不想专注' }
              ],
              color: ['#66c2ff', '#ffcc66', '#ff9966']
            }
          ]
        };
        donutChart.setOption(donutOption);
      }
    }
  });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/143494376
今日推荐
周排行
一维数组的常见查找法
新建文件夹接口
问题 1161: 【回文数(二)】
关于一些初级ACM竞赛题目的分析和题解（九）
转载：什么是分布式系统中的幂等性
【Selenium】
实用的滚动
使用google object_detection API检测重力波
1031 - Easy Game 简单区间DP
UNIX-LINUX编程实践教程笔记：5 学习stty
每日归档
更多
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)
2025-03-07(0)
2025-03-06(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022