Vue + ECharts 简单易懂的销售数据报表页面制作教程” “手把手教你用 Vue2 和 ECharts 打造动态销售数据展示页面” “入门级 Vue2 项目：使用 ECharts 实现销售数据

效果图

在这里插入图片描述

博客教程：使用 Vue2 和 ECharts 构建保险销售业绩报告页面

在本教程中，我们将使用 Vue2 和 ECharts 创建一个动态的保险销售业绩报告页面。此页面包含多个 UI 元素和数据展示，包括饼图、销售排行榜和底部二维码区域。本教程适合前端开发新手，并提供完整的步骤和代码示例。

概述

在本教程中，我们将使用 Vue2 和 ECharts 来实现一个简洁的保险销售数据展示页面。我们会使用 ECharts 生成动态饼图，展示完成保单的件数占比，还会添加一个销售排行榜以及其他信息展示。

步骤一：创建 HTML 文件并引入 Vue 和 ECharts

首先，创建一个 HTML 文件，并引入 Vue2 和 ECharts 库。确保在 <head> 中引入以下链接：

<!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>
</head>
<body>
<div id="app"></div>
</body>
</html>

步骤二：构建页面结构

在 Vue 应用中，我们将构建多个部分，包括页面头部、饼图区域、销售排行榜和底部的二维码区域。我们会在 #app 容器中编写这些结构。

<div id="app">
  <!-- Header -->
  <div class="header">本月销售业绩报告</div>
  
  <!-- Sub-header -->
  <div class="sub-header">完成保单件数的分布占比</div>
  
  <!-- Chart Section -->
  <div class="chart-section">
    <div class="chart-title">完成保单件数的分布占比</div>
    <div class="chart" ref="pieChart"></div>
    <div class="info-box">
      <div class="info-item">No.1<br>1-2件 45%</div>
      <div class="info-item">No.2<br>2-3件 25%</div>
    </div>
  </div>
  
  <!-- Sales Champion Section -->
  <div class="sales-table">
    <div class="sales-header">本月销售冠军</div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>销售额</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>高小定</td>
          <td>30000</td>
        </tr>
        <tr>
          <td>高女士</td>
          <td>20000</td>
        </tr>
        <tr>
          <td>高先生</td>
          <td>10000</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- Footer with QR Code -->
  <div class="footer">
    <div>奋发向上，拼出更好明天！</div>
    <div class="qr-code"></div>
    <p>扫码添加「稳定保险」查看更多保险信息</p>
  </div>
</div>

步骤三：添加 CSS 样式

接下来，为页面添加样式，使其看起来美观整洁。以下是相关的 CSS 样式代码。

<style>
  body {
      
      
    font-family: Arial, sans-serif;
    background-color: #e6eef5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  #app {
      
      
    max-width: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  .header {
      
      
    background-color: #f5846b;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  .sub-header {
      
      
    background-color: #fdd1a4;
    color: #555;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .chart-section {
      
      
    padding: 20px;
    text-align: center;
  }
  .chart-title {
      
      
    margin-bottom: 10px;
    font-weight: bold;
  }
  .chart {
      
      
    width: 100%;
    height: 200px;
  }
  .info-box {
      
      
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #f0f4f8;
  }
  .info-item {
      
      
    font-size: 18px;
    font-weight: bold;
    color: #3949ab;
  }
  .sales-table {
      
      
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
  }
  .sales-header {
      
      
    background-color: #3949ab;
    color: white;
    font-size: 18px;
    padding: 10px;
    text-align: center;
  }
  table {
      
      
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  th, td {
      
      
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
  }
  th {
      
      
    background-color: #f4f6fb;
    color: #555;
    font-weight: bold;
  }
  .footer {
      
      
    background-color: #f0f4f8;
    padding: 15px;
    text-align: center;
    color: #555;
    font-size: 14px;
  }
  .qr-code {
      
      
    width: 80px;
    height: 80px;
    background-color: #ddd;
    margin: 10px auto;
  }
</style>

步骤四：使用 ECharts 实现饼图

现在，我们需要在 Vue 实例的 mounted 生命周期钩子中初始化 ECharts 饼图。以下是完整的 JavaScript 代码：

<script>
  new Vue({
      
      
    el: '#app',
    mounted() {
      
      
      this.initPieChart();
    },
    methods: {
      
      
      // 初始化饼图
      initPieChart() {
      
      
        var pieChart = echarts.init(this.$refs.pieChart);
        var pieOption = {
      
      
          tooltip: {
      
      
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
      
      
            bottom: '0%',
            data: ['1件以下', '1-2件', '2-3件', '3-4件', '4件以上']
          },
          series: [
            {
      
      
              name: '保单数量',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
      
      
                show: false,
                position: 'center'
              },
              emphasis: {
      
      
                label: {
      
      
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
      
      
                show: false
              },
              data: [
                {
      
       value: 10, name: '1件以下' },
                {
      
       value: 45, name: '1-2件' },
                {
      
       value: 25, name: '2-3件' },
                {
      
       value: 15, name: '3-4件' },
                {
      
       value: 5, name: '4件以上' }
              ]
            }
          ],
          color: ['#5175a6', '#5cb3cc', '#ffaf51', '#ff7895', '#ffc878']
        };
        pieChart.setOption(pieOption);
      }
    }
  });
</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: #e6eef5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    #app {
      
      
      max-width: 600px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    .header {
      
      
      background-color: #f5846b;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
    }
    .sub-header {
      
      
      background-color: #fdd1a4;
      color: #555;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
    }
    .chart-section {
      
      
      padding: 20px;
      text-align: center;
    }
    .chart-title {
      
      
      margin-bottom: 10px;
      font-weight: bold;
    }
    .chart {
      
      
      width: 100%;
      height: 200px;
    }
    .info-box {
      
      
      display: flex;
      justify-content: space-around;
      padding: 20px;
      background-color: #f0f4f8;
    }
    .info-item {
      
      
      font-size: 18px;
      font-weight: bold;
      color: #3949ab;
    }
    .sales-table {
      
      
      width: 100%;
      margin-top: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
    .sales-header {
      
      
      background-color: #3949ab;
      color: white;
      font-size: 18px;
      padding: 10px;
      text-align: center;
    }
    table {
      
      
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    th, td {
      
      
      padding: 8px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      
      
      background-color: #f4f6fb;
      color: #555;
      font-weight: bold;
    }
    .footer {
      
      
      background-color: #f0f4f8;
      padding: 15px;
      text-align: center;
      color: #555;
      font-size: 14px;
    }
    .qr-code {
      
      
      width: 80px;
      height: 80px;
      background-color: #ddd;
      margin: 10px auto;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">本月销售业绩报告</div>
  
  <!-- Sub-header -->
  <div class="sub-header">完成保单件数的分布占比</div>
  
  <!-- Chart Section -->
  <div class="chart-section">
    <div class="chart-title">完成保单件数的分布占比</div>
    <div class="chart" ref="pieChart"></div>
    <div class="info-box">
      <div class="info-item">No.1<br>1-2件 45%</div>
      <div class="info-item">No.2<br>2-3件 25%</div>
    </div>
  </div>
  
  <!-- Sales Champion Section -->
  <div class="sales-table">
    <div class="sales-header">本月销售冠军</div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>销售额</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>高小定</td>
          <td>30000</td>
        </tr>
        <tr>
          <td>高女士</td>
          <td>20000</td>
        </tr>
        <tr>
          <td>高先生</td>
          <td>10000</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- Footer with QR Code -->
  <div class="footer">
    <div>奋发向上，拼出更好明天！</div>
    <div class="qr-code"></div>
    <p>扫码添加「稳定保险」查看更多保险信息</p>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    mounted() {
      
      
      this.initPieChart();
    },
    methods: {
      
      
      // 初始化饼图
      initPieChart() {
      
      
        var pieChart = echarts.init(this.$refs.pieChart);
        var pieOption = {
      
      
          tooltip: {
      
      
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
      
      
            bottom: '-10%',
            data: ['1件以下', '1-2件', '2-3件', '3-4件', '4件以上']
          },
          series: [
            {
      
      
              name: '保单数量',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
      
      
                show: false,
                position: 'center'
              },
              emphasis: {
      
      
                label: {
      
      
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
      
      
                show: false
              },
              data: [
                {
      
       value: 10, name: '1件以下' },
                {
      
       value: 45, name: '1-2件' },
                {
      
       value: 25, name: '2-3件' },
                {
      
       value: 15, name: '3-4件' },
                {
      
       value: 5, name: '4件以上' }
              ]
            }
          ],
          color: ['#5175a6', '#5cb3cc', '#ffaf51', '#ff7895', '#ffc878']
        };
        pieChart.setOption(pieOption);
      }
    }
  });
</script>
</body>
</html>

结语

通过以上步骤，你已经学会了如何使用 Vue2 和 ECharts 来构建一个保险销售数据报告页面。这是一个简单的项目示例，适合前端新手用来熟悉 Vue 和 ECharts 的基本操作。