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

最新推荐文章于 2023-09-07 19:56:40 发布

Minnor

最新推荐文章于 2023-09-07 19:56:40 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/holive_9/article/details/125896193

版权

本文介绍了如何在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/

安装依赖

npm install echarts --save

在report.vue组件中导入 echarts

// 全局引入
import * as echarts from 'echarts';

在 HTML 中定义有宽度和高度的父容器

<div id="main" style="width: 600px;height:400px;"></div>

在 mounted()中基于准备好的dom，初始化echarts实例

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

准备数据和配置项绘制图表

export default {
   
    mounted() {
   
    // 4.基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))
    // 5.绘制图表
    myChart.setOption({
   
      title: {
   
        text: 'ECharts 入门示例'
      },
      tooltip: {
   },
      xAxis: {
   
        data: ['衬衫