Vue 和 ECharts 从零开始：打造客户画像数据分析页面 一步步教你用 Vue 和 ECharts 实现数据可视化分析页面 新手友好！使用 Vue 和 ECharts 构建动态数据图表页面 基于

效果图

教程目录

1. 简介
2. 项目结构和前置依赖
3. 实现页面布局
4. 初始化 ECharts 图表
5. 配置实付价分布图表
6. 配置优惠敏感度分布图表
7. 运行与测试
8. 总结

---

教程正文

简介

本教程将带你一步步使用 Vue 和 ECharts，实现一个数据可视化页面，展示顾客的实付价分布和优惠敏感度分布。我们会通过简单的布局、样式配置和 ECharts 图表配置，来构建一个动态且实用的分析页面。

项目结构和前置依赖

我们将在一个 HTML 文件中完成所有代码。本项目使用 Vue 2 和 ECharts，无需安装其他依赖，直接引用 CDN 即可。

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/5.3.2/echarts.min.js"></script>

实现页面布局

首先，我们搭建页面结构，包含标题、子标题、图表区域和建议区域。

<div id="app">
  <!-- Header -->
  <div class="header">顾客画像</div>
  <div class="sub-header">以下为您的店铺近90天内成交顾客的画像分析</div>

  <!-- 顾客实付价分布 -->
  <div class="section-title">
    <span>顾客实付价分布</span>
    <span class="button">?</span>
  </div>
  <div class="chart-container" ref="priceChart"></div>
  <div class="recommendation">
    <span><strong>经营建议：</strong>根据不同实付金额的顾客进行精准营销，可以针对性地改善客单价的分布</span>
    <span class="button">精准营销</span>
  </div>

  <!-- 顾客优惠敏感度分布 -->
  <div class="section-title">
    <span>顾客优惠敏感度分布</span>
    <span class="button">?</span>
  </div>
  <div class="chart-container" ref="sensitivityChart"></div>
  <div class="recommendation">
    <span><strong>经营建议：</strong>根据不同实付金额的顾客进行精准营销，可以针对性地改善客单价的分布</span>
    <span class="button">精准营销</span>
  </div>
</div>

我们为每个部分设置了简洁的样式：

<style>
  body {
    
    
    font-family: Arial, sans-serif;
    background-color: #f7f8fa;
    margin: 0;
    padding: 20px;
  }
  #app {
    
    
    max-width: 600px;
    margin: 0 auto;
  }
  .header {
    
    
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 16px;
  }
  .sub-header {
    
    
    background-color: #f1f1f1;
    padding: 10px;
    color: #888;
    font-size: 12px;
    text-align: center;
  }
  .section-title {
    
    
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-container {
    
    
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
  }
  .recommendation {
    
    
    background-color: #fef5e1;
    padding: 10px;
    font-size: 12px;
    color: #ff8c00;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .recommendation strong {
    
    
    color: #ff8c00;
    margin-right: 5px;
  }
  .button {
    
    
    padding: 5px 10px;
    background-color: #e0f7fa;
    color: #00796b;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }
</style>

初始化 ECharts 图表

在 Vue 实例的 mounted 钩子中，我们初始化 ECharts 图表。

new Vue({
    
    
  el: '#app',
  mounted() {
    
    
    this.initCharts();
  },
  methods: {
    
    
    initCharts() {
    
    
      this.initPriceChart();
      this.initSensitivityChart();
    },
    // 后续实现图表配置
  }
});

配置实付价分布图表

我们将创建一个柱状图来显示顾客的实付价分布。

initPriceChart() {
    
    
  var priceChart = echarts.init(this.$refs.priceChart);
  var option = {
    
    
    color: ['#4caf50'],
    tooltip: {
    
    
      trigger: 'axis',
      formatter: '{b}: {c}人'
    },
    xAxis: {
    
    
      type: 'category',
      data: ['0-20', '20-25', '25-30', '30-35', '35-40', '40-50', '50以上'],
      axisTick: {
    
     show: false }
    },
    yAxis: {
    
    
      type: 'value',
      axisLabel: {
    
     formatter: '{value}%' },
      max: 100
    },
    series: [
      {
    
    
        type: 'bar',
        data: [372, 540, 522, 365, 273, 396, 577],
        barWidth: '50%',
        label: {
    
    
          show: true,
          position: 'top',
          formatter: '{c}人'
        }
      }
    ]
  };
  priceChart.setOption(option);
}

配置优惠敏感度分布图表

接着，我们创建一个柱状图来显示顾客的优惠敏感度分布。

initSensitivityChart() {
    
    
  var sensitivityChart = echarts.init(this.$refs.sensitivityChart);
  var option = {
    
    
    color: ['#3f51b5'],
    tooltip: {
    
    
      trigger: 'axis',
      formatter: '{b}: {c}人'
    },
    xAxis: {
    
    
      type: 'category',
      data: ['极度敏感', '比较敏感', '中度敏感', '较不敏感', '不敏感', '未知'],
      axisTick: {
    
     show: false }
    },
    yAxis: {
    
    
      type: 'value',
      axisLabel: {
    
     formatter: '{value}%' },
      max: 100
    },
    series: [
      {
    
    
        type: 'bar',
        data: [2501, 108, 107, 46, 172, 111],
        barWidth: '50%',
        label: {
    
    
          show: true,
          position: 'top',
          formatter: '{c}人'
        }
      }
    ]
  };
  sensitivityChart.setOption(option);
}

运行与测试

将以上代码完整复制到 HTML 文件中，保存后使用浏览器打开文件，即可看到完整的分析页面。点击“精准营销”按钮，虽然暂时无功能，但展示了交互设计的思路。

总结

通过本教程，你学会了如何使用 Vue 和 ECharts 创建数据可视化页面，并了解了如何为图表添加自定义样式和布局结构。这种分析页面可以用于很多场景，例如销售数据分析、用户画像等。希望本教程能帮助你更好地掌握 Vue 和 ECharts 的基础。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>顾客画像 - Vue 和 ECharts 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <script src="https://cdn.staticfile.net/echarts/5.3.2/echarts.min.js"></script>
  <style>
    body {
      
      
      font-family: Arial, sans-serif;
      background-color: #f7f8fa;
      margin: 0;
      padding: 20px;
    }
    #app {
      
      
      max-width: 600px;
      margin: 0 auto;
    }
    .header {
      
      
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-size: 16px;
    }
    .sub-header {
      
      
      background-color: #f1f1f1;
      padding: 10px;
      color: #888;
      font-size: 12px;
      text-align: center;
    }
    .section-title {
      
      
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 20px 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .chart-container {
      
      
      width: 100%;
      height: 300px;
      margin-bottom: 20px;
    }
    .recommendation {
      
      
      background-color: #fef5e1;
      padding: 10px;
      font-size: 12px;
      color: #ff8c00;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .recommendation strong {
      
      
      color: #ff8c00;
      margin-right: 5px;
    }
    .button {
      
      
      padding: 5px 10px;
      background-color: #e0f7fa;
      color: #00796b;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">顾客画像</div>
  <div class="sub-header">以下为您的店铺近90天内成交顾客的画像分析</div>

  <!-- 顾客实付价分布 -->
  <div class="section-title">
    <span>顾客实付价分布</span>
    <span class="button">?</span>
  </div>
  <div class="chart-container" ref="priceChart"></div>
  <div class="recommendation">
    <span><strong>经营建议：</strong>根据不同实付金额的顾客进行精准营销，可以针对性地改善客单价的分布</span>
    <span class="button">精准营销</span>
  </div>

  <!-- 顾客优惠敏感度分布 -->
  <div class="section-title">
    <span>顾客优惠敏感度分布</span>
    <span class="button">?</span>
  </div>
  <div class="chart-container" ref="sensitivityChart"></div>
  <div class="recommendation">
    <span><strong>经营建议：</strong>根据不同实付金额的顾客进行精准营销，可以针对性地改善客单价的分布</span>
    <span class="button">精准营销</span>
  </div>
</div>

<script>
new Vue({
      
      
  el: '#app',
  mounted() {
      
      
    this.initCharts();
  },
  methods: {
      
      
    initCharts() {
      
      
      this.initPriceChart();
      this.initSensitivityChart();
    },
    initPriceChart() {
      
      
      var priceChart = echarts.init(this.$refs.priceChart);
      var option = {
      
      
        color: ['#4caf50'],
        tooltip: {
      
      
          trigger: 'axis',
          formatter: '{b}: {c}人'
        },
        xAxis: {
      
      
          type: 'category',
          data: ['0-20', '20-25', '25-30', '30-35', '35-40', '40-50', '50以上'],
          axisTick: {
      
       show: false }
        },
        yAxis: {
      
      
          type: 'value',
          axisLabel: {
      
       formatter: '{value}%' },
          max: 100
        },
        series: [
          {
      
      
            type: 'bar',
            data: [372, 540, 522, 365, 273, 396, 577],
            barWidth: '50%',
            label: {
      
      
              show: true,
              position: 'top',
              formatter: '{c}人'
            }
          }
        ]
      };
      priceChart.setOption(option);
    },
    initSensitivityChart() {
      
      
      var sensitivityChart = echarts.init(this.$refs.sensitivityChart);
      var option = {
      
      
        color: ['#3f51b5'],
        tooltip: {
      
      
          trigger: 'axis',
          formatter: '{b}: {c}人'
        },
        xAxis: {
      
      
          type: 'category',
          data: ['极度敏感', '比较敏感', '中度敏感', '较不敏感', '不敏感', '未知'],
          axisTick: {
      
       show: false }
        },
        yAxis: {
      
      
          type: 'value',
          axisLabel: {
      
       formatter: '{value}%' },
          max: 100
        },
        series: [
          {
      
      
            type: 'bar',
            data: [2501, 108, 107, 46, 172, 111],
            barWidth: '50%',
            label: {
      
      
              show: true,
              position: 'top',
              formatter: '{c}人'
            }
          }
        ]
      };
      sensitivityChart.setOption(option);
    }
  }
});
</script>
</body>
</html>