Vue + ECharts 完整项目实战」:手把手打造可切换的全网闭环时长统计图 「超详细 Vue 新手教程」:用 ECharts 实现动态漏斗图和选项卡切换 「Vue.js 项目实战」:如何用 EC

效果图

在这里插入图片描述


目录

  1. 项目概述
  2. 准备工作
  3. HTML 结构和基本样式
  4. 使用 Vue 设置页面数据和选项卡切换
  5. 用 ECharts 创建漏斗图
  6. 代码总结
  7. 总结与扩展

项目概述

在本教程中,我们将使用 Vue.js 和 ECharts 创建一个数据统计页面。页面会展示全网闭环时长的漏斗图,并允许用户切换“周”和“月”两个选项卡,来查看不同的数据统计。


准备工作

在开始编码之前,请确保已经包含了以下资源:

  • 引入 Vue.js 2.7 版本
  • 引入 ECharts 5.0 版本
<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>

HTML 结构和基本样式

首先,我们需要编写页面的 HTML 结构,并设置基本的样式。

<div id="app">
  <div class="header">全网闭环时长</div>
  <div class="tabs">
    <span class="tab" :class="{ active: activeTab === '' }" @click="setActiveTab('')"></span>
    <span class="tab" :class="{ active: activeTab === '' }" @click="setActiveTab('')"></span>
  </div>
  <div class="chart" ref="funnelChart"></div>
</div>

样式代码

body {
    
    
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
#app {
    
    
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header {
    
    
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}
.chart {
    
    
  width: 100%;
  height: 400px;
}
.tabs {
    
    
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.tab {
    
    
  padding: 5px 10px;
  cursor: pointer;
  color: #007AFF;
  font-weight: bold;
}
.tab.active {
    
    
  color: #007AFF;
  border-bottom: 2px solid #007AFF;
}

以上代码将创建一个居中的容器,包含顶部标题和切换选项卡。接下来,我们将用 Vue 和 ECharts 为图表和交互功能提供支持。


使用 Vue 设置页面数据和选项卡切换

我们将在 Vue 实例中管理页面的状态和选项卡的切换逻辑。

<script>
  new Vue({
    
    
    el: '#app',
    data: {
    
    
      activeTab: '周' // 默认显示"周"数据
    },
    mounted() {
    
    
      this.initFunnelChart(); // 初始化漏斗图
    },
    methods: {
    
    
      // 切换选项卡并更新图表
      setActiveTab(tab) {
    
    
        this.activeTab = tab;
        this.updateChart(); // 更新图表数据
      },
      // 初始化图表
      initFunnelChart() {
    
    
        this.chartInstance = echarts.init(this.$refs.funnelChart);
        this.updateChart(); // 加载初始数据
      },
      // 更新图表数据
      updateChart() {
    
    
        const data = [
          {
    
     value: 56, name: '1-2天处理量', label: '56/30%' },
          {
    
     value: 56, name: '3-4天处理量', label: '56/30%' },
          {
    
     value: 56, name: '5-7天处理量', label: '56/30%' },
          {
    
     value: 56, name: '8-10天处理量', label: '56/30%' },
          {
    
     value: 56, name: '10天以上处理量', label: '56/30%' }
        ];

        const option = {
    
    
          tooltip: {
    
    
            trigger: 'item',
            formatter: '{b} : {c}%'
          },
          legend: {
    
    
            data: data.map(item => item.name),
            bottom: 0
          },
          series: [
            {
    
    
              name: '处理量',
              type: 'funnel',
              left: '10%',
              top: '10%',
              bottom: '10%',
              width: '80%',
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
    
    
                show: true,
                position: 'inside',
                formatter: '{b}\n{c}%'
              },
              labelLine: {
    
    
                length: 10,
                lineStyle: {
    
    
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
    
    
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
    
    
                label: {
    
    
                  fontSize: 20
                }
              },
              data: data.map((item, index) => ({
    
    
                ...item,
                itemStyle: {
    
    
                  color: ['#1E90FF', '#6495ED', '#00FA9A', '#FFD700', '#FF6347'][index]
                }
              }))
            }
          ]
        };
        
        this.chartInstance.setOption(option);
      }
    }
  });
</script>

代码解释

  • activeTab:用于跟踪当前选中的选项卡(周或月)。
  • setActiveTab(tab):当用户点击不同的选项卡时触发,更新activeTab的值并刷新图表。
  • initFunnelChart:初始化 ECharts 漏斗图。
  • updateChart:根据选项卡更新图表的数据。我们定义了数据和颜色,将其映射到不同的选项中。


总结与扩展

至此,我们已经完成了用 Vue 和 ECharts 创建一个动态的漏斗图页面。可以继续扩展项目:

  1. 动态数据加载:使用实际的后端接口数据。
  2. 多种图表类型:添加更多类型的图表进行数据可视化。

希望这个项目能帮助你进一步理解 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 示例</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: 600px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .header {
      
      
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }
    .chart {
      
      
      width: 100%;
      height: 400px;
    }
    .tabs {
      
      
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .tab {
      
      
      padding: 5px 10px;
      cursor: pointer;
      color: #007AFF;
      font-weight: bold;
    }
    .tab.active {
      
      
      color: #007AFF;
      border-bottom: 2px solid #007AFF;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="header">全网闭环时长</div>
  <div class="tabs">
    <span class="tab" :class="{ active: activeTab === '' }" @click="setActiveTab('')"></span>
    <span class="tab" :class="{ active: activeTab === '' }" @click="setActiveTab('')"></span>
  </div>
  <div class="chart" ref="funnelChart"></div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      activeTab: '周'
    },
    mounted() {
      
      
      this.initFunnelChart();
    },
    methods: {
      
      
      setActiveTab(tab) {
      
      
        this.activeTab = tab;
        this.updateChart();
      },
      initFunnelChart() {
      
      
        this.chartInstance = echarts.init(this.$refs.funnelChart);
        this.updateChart();
      },
      updateChart() {
      
      
        const data = [
          {
      
       value: 56, name: '1-2天处理量', label: '56/30%' },
          {
      
       value: 56, name: '3-4天处理量', label: '56/30%' },
          {
      
       value: 56, name: '5-7天处理量', label: '56/30%' },
          {
      
       value: 56, name: '8-10天处理量', label: '56/30%' },
          {
      
       value: 56, name: '10天以上处理量', label: '56/30%' }
        ];

        const option = {
      
      
          tooltip: {
      
      
            trigger: 'item',
            formatter: '{b} : {c}%'
          },
          legend: {
      
      
            data: data.map(item => item.name),
            bottom: 0
          },
          series: [
            {
      
      
              name: '处理量',
              type: 'funnel',
              left: '10%',
              top: '10%',
              bottom: '10%',
              width: '80%',
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
      
      
                show: true,
                position: 'inside',
                formatter: '{b}\n{c}%'
              },
              labelLine: {
      
      
                length: 10,
                lineStyle: {
      
      
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
      
      
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
      
      
                label: {
      
      
                  fontSize: 20
                }
              },
              data: data.map((item, index) => ({
      
      
                ...item,
                itemStyle: {
      
      
                  color: ['#1E90FF', '#6495ED', '#00FA9A', '#FFD700', '#FF6347'][index]
                }
              }))
            }
          ]
        };
        
        this.chartInstance.setOption(option);
      }
    }
  });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/143494765