Giter VIP home page Giter VIP logo

echart-project's Introduction

数据可视化的后台系统 UI

see here

使用到的语言 & 框架:js/ts, less, vue3/vite

组件库:element-plus, element-icon

图表:echarts, vxetable

其他库 & 工具:pinia, axios, apifox

语法检查 & 编译器环境:vscode, vue-offical, prettier

项目开发过程中的记录

  • 搭建环境,安装必要的依赖:element-plus,'@element-plus/icons-vue',echarts,vxe-chart,axios

  • 用 vue-router 编写路由

  • 完成登录页面:

    • 表单的使用
    • axios 的 ts 封装
  • 制作主页:

    • echarts的使用
  • echarts 数据映射

xAxisyAxis 两个项绘制 x 轴和 y 轴。 xAxis.data 是指的刻度,而不是数据。

而数据一般放在 options.series.data ,一个数据是一个数组,每个数组元素被称为一个数据项,数据项一般为一个值,但也可以写成一个对象,用于定制一个数据项的绘制:

  data: [
    {
      // 这里每一个项就是数据项(dataItem)
      value: 2323, // 这是数据项的数据值(value)
      itemStyle: {}
    },
    1212, // 也可以直接是 dataItem 的 value,这更常见。
    2323, // 这里每个 value 都是"一维"的。
    4343,
    3434
  ];
  • piniaStore 的使用

  • apifox 的使用: apifox token 鉴权

  • script:根据 router 配置文件信息,创建出三层深度的侧边导航栏

  • 表单制作

  • 完成 tabs 切换功能

  • vxe-table 绘制

  • npm run build 构建和修复类型错误

  • 在 netlify 上自动构建项目

Waiting for fixes & improvements

  • bug:echarts 报警告:鼠标滚动事件被 chrome 要求必须显示的声明 passive 的行为,即明确自己是否会调用 preventDefault()。
  • improve: echart 本身并不是响应式布局。当页面发生变动时无法自适应。

echart-project's People

Contributors

xiaoyan13 avatar

Stargazers

 avatar Gaolei He avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.