08-vue_shop后台管理系统—数据统计功能

本文介绍了如何在Vue.js项目中实现数据统计功能,重点是使用ECharts进行图表绘制。首先创建新分支,然后绘制页面,包括面包屑导航和卡片区域。接着,详细讲解了如何根据ECharts官方文档安装依赖并初始化图表。在响应数据部分,讨论了如何处理服务器返回的数据,并通过ECharts的merge方法合并数据以完善图表效果。最后,展示了代码提交和分支管理的过程。
摘要由CSDN通过智能技术生成

数据统计功能,主要部分是 学习在项目中使用 ECharts , lodash中的一个新方法 _.merge(object,[sources]) 将两个对象合并

创建新分支

  • git checkout -b report在主分支上创建一个新分支 report并跳转到该子分支上
  • git push -u origin report 将本地的 report 分支推送到云端仓库的 report 分支中

绘制页面

  • BreadCrumb 面包屑导航区域
  • Card卡片区域
    • echarts 绘制图表

echarts 绘制图表

官方文档:https://echarts.apache.org/handbook/zh/basics/import/

  1. 安装依赖
npm install echarts --save
  1. report.vue组件中导入 echarts
// 全局引入
import * as echarts from 'echarts';
  1. 在 HTML 中定义有宽度和高度的父容器
<div id="main" style="width: 600px;height:400px;"></div>
  1. mounted()中基于准备好的dom,初始化echarts实例

只要执行到了 mounted这个函数,说明此时页面上的DOM元素已经渲染完毕了

  1. 准备数据和配置项绘制图表
export default {
   
    mounted() {
   
    // 4.基于准备好的dom,初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))
    // 5.绘制图表
    myChart.setOption({
   
      title: {
   
        text: 'ECharts 入门示例'
      },
      tooltip: {
   },
      xAxis: {
   
        data: ['衬衫
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值